用Kintone Portal Designer来设计门户 - cybozu

Index

Kintone Portal Designer是什么
安装Kintone Portal Designer
Kintone Portal Designer的构成
导入模板
更改设计
导出模板
应用到所有用户的环境
总结
相关链接

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，就能应用到所有用户的页面上了。

0015e0eb75bb8ebc3bb6b4b77de52d5

安装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的编辑标签页、保存设计、导出、导入按钮组成。
0015e1ead90b646695fcfdc13474ef2

导入模板

导入模板
点击“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”分别更改为“开发部”、“销售部”、“总务部”。
0015e1fbb2b5cd107d432266c59c5d1
回到门户，加载页面，可以看到标签的文字已经变了。
0015e1fbb510c61e20c9c6bac1618ba

导出模板

创建的设计可以导成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门户进行设计。
今后，我们还将继续发布/介绍新的范例。尽情期待。