Index
Kintone Portal Designer是什么
Kintone Portal Designer是为帮助您更加轻松地设计kintone门户的工具(Chrome扩展功能)。
优点1: 只要HTML・CSS就可以设计门户
只要使用HTML・CSS就可以简单地进行设计。而无需JavaScript的知识。
优点2: 提供有模板和图标
有多个模板可供选择,你只要在模板的基础上根据个人喜好进行修改,
无需从头开始写HTML・CSS。另外,为了您更加快速方便地进行设计,还提供50多种图标。
另外,还有介绍如何进行门户自定义的文章供大家参考。
一起挑战一下kintone门户的自定义吧!
优点3:设计的门户可以应用到所有用户的页面
使用Kintone Portal Designer创建的设计可以导出为JavaScript文件。
只要把这个文件导入kintone,就能应用到所有用户的页面上了。
安装Kintone Portal Designer
安装Kintone Portal Designer
从此处下载整个包,并解压。
找到文件夹中的extension.zip文件,继续将该文件解压。
打开Chrom浏览器,如图所示打开扩展程序页面。
点击右上方的开发者模式。
点击[加载已解压的扩展程序]。
找到步骤2中解压的文件夹下的disc文件夹
启动Kintone Portal Designer
打开kintone的门户。
点击工具栏上的 Kintone Portal Designer按钮。
启动Kintone Portal Designer。
Kintone Portal Designer的构成
Kintone Portal Designer的页面构成如下:
由开启Kintone Portal Designer的状态开关按钮、HTML/CSS/JavaScript的编辑标签页、保存设计、导出、导入按钮组成。
导入模板
导入模板
点击“Import”按钮,点击“Import Sample Template”。
将显示模板列表对话框,请选择“advanced-3tabs”,然后点击“Import”按钮。
将载入模板的HTML及CSS。启用并保存
点击Kintone Portal Designer左上角的状态开关按钮,启用”Design Portal“。
开启后,将在kintone中载入写在Kintone Portal Designer里的HTML・CSS等。点击”Save“按钮。确认刚才设计的内容
回到门户页面,加载页面。可以看到刚才的范例模板已生效。演示环境模板下载
kintone演示环境模板下载
更改设计
试着改动一下范例模板”advanced-3tabs'.
选择HTML标签,将“Tab1”、“Tab2”、“Tab3”分别更改为“开发部”、“销售部”、“总务部”。
回到门户,加载页面,可以看到标签的文字已经变了。
导出模板
创建的设计可以导成JSON文件。
导出的文件可以再次导入到Kintone Portal Designer。
要导出设计时,点击“Export”按钮,选择“Export as JSON”。导出JSON文件。
要导入设计时,点击“Import”按钮,选择“Import JSON”。
应用到所有用户的环境
如要将设计应用到所有kintone用户的页面,需要将做成的设计导出到JavaScript文件。
导出JavaScript文件
点击“Export”按钮,选择“Export as JavaScript (Desktop)”。
导出JavaScript文件。关闭Kintone Portal Designer
点击Kintone Portal Designer左上角的状态开关按钮,关闭“Default Portal”。
(如果在启用“Design Portal”的情况下导入JavaScript文件,Kintone Portal Designer的设计会与JavaScript文件的设计冲突)打开“通过JavaScript / CSS自定义”页面
点击kintone的工具栏的设置按钮,依次点击“kintone系统管理”→“通过JavaScript / CSS自定义”。导入JavaScript文件
点击“JavaScript文件(电脑专用)”栏的“通过上传添加”按钮,选择步骤1中导出的JavaScript文件。隐藏门户的内容
JavaScript文件生效后,原本门户上的内容会显示在所设计的门户下面。
要隐藏这些内容,可以在“门户的设置"页面取消勾选“在门户页面显示:”下的选项。
总结
综上所述,在Kintone Portal Designer上通过HTML・CSS可以轻而易举地对您的kintone门户进行设计。
今后,我们还将继续发布/介绍新的范例。尽情期待。
相关链接
此Tips在2019年07月版的 kintone中确认过。