用Kintone Portal Designer来设计门户

aki发表于:2019年12月26日 13:51:55更新于:2020年02月20日 14:42:20

Index

Kintone Portal Designer是什么

Kintone Portal Designer是为帮助您更加轻松地设计kintone门户的工具(Chrome扩展功能)。

优点1: 只要HTML・CSS就可以设计门户

只要使用HTML・CSS就可以简单地进行设计。而无需JavaScript的知识。

优点2: 提供有模板和图标

有多个模板可供选择,你只要将模板中不太满意的部分换成您的个性设计就可以了。
无需从头开始写HTML・CSS。另外,为了您更加快速方便地进行设计,还提供50多种图标

优点3:设计的门户可以应用到所有用户的页面

使用Kintone Portal Designer创建的设计可以导出为JavaScript文件。
只要把这个文件导入kintone,就能应用到所有用户的页面上了。

0015e0eb75bb8ebc3bb6b4b77de52d5

 

安装Kintone Portal Designer

  • 安装Kintone Portal Designer
    ※执行以下步骤需要事先安装node.js

  1. 此处下载整个包,并解压。

  2. 在命令行工具里,切换到步骤1中解压的文件夹所在目录。

  3. 输入以下命令并执行。

    $ npm install
  4. 继续输入以下命令并执行。

  5. $ npm run dev
  6. 打开Chrom浏览器,如图所示打开扩展程序页面。
    0015e4e273492e3f14c7ecc5008c81f

  7. 点击右上方的开发者模式。
    0015e4e274a9e215986243afa813b30

  8. 点击[加载已解压的扩展程序]。
    0015e4e27db361dac9c153c50afe36f

  9. 找到步骤一中解压的文件夹下的disc文件夹
    0015e4e27e5791366bae20af80a4bf0

  • 启动Kintone Portal Designer
    打开kintone的门户。
    点击工具栏上的 Kintone Portal Designer按钮。
    0015e1eab2238d0828042a74d87b36c

    启动Kintone Portal Designer。

Kintone Portal Designer的构成

Kintone Portal Designer的页面构成如下:
由开启Kintone Portal Designer的状态开关按钮、HTML/CSS/JavaScript的编辑标签页、保存设计、导出、导入按钮组成。
0015e1ead90b646695fcfdc13474ef2

导入模板

  1. 导入模板
    点击“Import”按钮,点击“Import Sample Template”。
    import.png
    将显示模板列表对话框,请选择“advanced-3tabs”,然后点击“Import”按钮。
    将载入模板的HTML及CSS。
    template.png

  2. 启用并保存
    点击Kintone Portal Designer左上角的状态开关按钮,启用”Design Portal“。
    开启后,将在kintone中载入写在Kintone Portal Designer里的HTML・CSS等。点击”Save“按钮。
    有効化して保存します。

  3. 确认刚才设计的内容
    回到门户页面,加载页面。可以看到刚才的范例模板已生效。

更改设计

试着改动一下范例模板”advanced-3tabs'.
选择HTML标签,将“Tab1”、“Tab2”、“Tab3”分别更改为“开发部”、“销售部”、“总务部”。
0015e1fbb2b5cd107d432266c59c5d1
回到门户,加载页面,可以看到标签的文字已经变了。
0015e1fbb510c61e20c9c6bac1618ba

导出模板

创建的设计可以导成JSON文件。
导出的文件可以再次导入到Kintone Portal Designer。

要导出设计时,点击“Export”按钮,选择“Export as JSON”。导出JSON文件。

要导入设计时,点击“Import”按钮,选择“Import JSON”。

应用到所有用户的环境

如要将设计应用到所有kintone用户的页面,需要将做成的设计导出到JavaScript文件。

  1. 导出JavaScript文件
    点击“Export”按钮,选择“Export as JavaScript (Desktop)”。
    导出JavaScript文件。
    0015e1fbeea5a8aa4856ac9c73046c7

  2. 关闭Kintone Portal Designer
    点击Kintone Portal Designer左上角的状态开关按钮,关闭“Default Portal”。
    (如果在启用“Design Portal”的情况下导入JavaScript文件,Kintone Portal Designer的设计会与JavaScript文件的设计冲突)

  3. 打开“通过JavaScript / CSS自定义”页面
    点击kintone的工具栏的设置按钮,依次点击“kintone系统管理”→“通过JavaScript / CSS自定义”。

  4. 导入JavaScript文件
    点击“JavaScript文件(电脑专用)”栏的“通过上传添加”按钮,选择步骤1中导出的JavaScript文件。
    0015e1fc3464b1afab2fd0e9cbd6fce

  5. 隐藏门户的内容
    JavaScript文件生效后,原本门户上的内容会显示在所设计的门户下面。
    要隐藏这些内容,可以在“门户的设置"页面取消勾选“在门户页面显示:”下的选项。
    0015e1fc42bc91b60ebd4d168cbf7a2

总结

综上所述,在Kintone Portal Designer上通过HTML・CSS可以轻而易举地对您的kintone门户进行设计。
今后,我们还将继续发布/介绍新的范例。尽情期待。

相关链接

此Tips在2019年07月版的 kintone中确认过。


    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
    您需要登录后才可以回复