甘特图插件

cybozu发表于:2016年12月22日 18:10:40更新于:2019年11月19日 13:16:06

Index

概要

这次为大家介绍的是,将以范例形式公开的 “用甘特图显示To Do” 的Javascript转变为插件文件的步骤。
关于操作详情请参考 kintone 插件开发流程

主要的更新信息

2017/05: 对应了大项目-小项目表示形式。其他的追加功能请参考“更新履歴”。
注意:使用旧版本插件的系统,更新到新版本插件时,由于之前的颜色设置将变得无效,所以需要到插件的设置页面重新设置。

   另外、v2.0.0和以前的版本相比,在设置方法上稍微有点不一样。安装前请务必确认下这边的文章。
   甘特图插件更新的详细解说 (暂时仅提供日文)

完成的样子

下面是使用这个插件后,应用上显示的样子。
根据记录列表里的记录数据来显示甘特图。

001596f14a40f6aeb96ac95bcf65bbc

应用准备

此次插件所用的应用,“To Do”(请在附件中下载) 。
※对于已经在使用中的应用也可以直接安装。
将应用添加到您的kintone里,并添加几条范例数据。
※像完成的样子这样,想要设置2维结构的时候,需要追加表格字段。详细的设定方法可以参考这里 (暂时仅提供日文)的文章

插件文件的结构

访问plugin-sdk ,并下载各个文件夹。这些文件夹的里面有一个叫 " examples/ganttchart " 的,是这次使用的整个文件包。
“ganttchart” 下面的文件结构如下图。

0015a1d392ea5a33b6708f2b88e0545

各文件夹里面的文件说明。

文件夹:css

  • 51-modern-default.css
    才望子提供的插件设置页面的样式。

  • addin-style.css
    加载原始配色方案的样式。

文件夹:html

  • config.html
    插件设置页面的HTML。

    此文件用于制作设置页面,用来设置显示甘特图所必须的如下字段。

  • 标题

  • 副标题

  • 开始日

  • 终了日

  • 甘特图颜色

  • 初始显示的单位(日、周、月的任意一个单位)

  • 设置页面的语言会切换成登录用户的语言。主要使用了JsRender

  •  使用插件后的设置页面的范例

  • 001599e8a8757b0d5855d79491ddb23

文件夹:img

  • icon.png
    插件的图标

文件夹:js

  • config.js
    插件设置页面的程序。在这里,主要做以下的处理。

    • 点击 “保存” 的时候,为空的字段显示警告。

    • 点击 “保存” 的时候,页面上的设置值存入插件的变量里

    • 点击 “取消” 的时候,返回前面的页面。

    • 已经设置插件变量的情形下,设置各个字段的值。

    • 想作为标题的字段,如果选择表格字段的话,将会出现警告。

    • 表格字段和非表格字段混在一起保存的话,将会出现警告。

  • desktop-ganttchart.js
    甘特图的程序。(PC端专用)
    除了使用插件以外,应用的 “导入JavaScript” 功能也可以使用。

  • jquery.ui.datepicker-zh-CN.min.js
    选择开始日和结束日的时候使用Datepicker库。

文件:manifest.json

插件的资源管理配置文件。

  • 使用Cybozu CDN 的jQuery、jQuery.Gantt、JSRender。

  • 支持日语、英语、中文的设置页面。

 

打包

作成的 “plugin.zip” 请参考插件开发流程的 打包 ,进行打包。
这次作成 “work”,并在里面添加 “package.sh”后。 

命令行范例)
$ cd /work/
$ package.sh ./ganttchart/ 

打包后的范例
ganttchart.plugin.zip

导入和设置

  1. 在设置页面,将下载后的 “plugin.zip” 导入到kintone的系统管理页面。

  2. 在待安装的应用的设置页面上安装插件。

  3. 在插件的设置页面,设置显示甘特图的字段。

“输入值验证插件的作成范例 ”的教程里介绍了插件的安装方法和动作确认,大家可以参考一下。

更新历史记录

2017/05 v2.0.0公开了:追加了下面的功能。

  • 对应了表单的表格化(非表格化的情况下也可运行)。

  • 翻页后甘特图可以重新渲染。

  • 给甘特图的周六和周日添加了颜色。

  • 可在颜色调色板里选择优先度的颜色。

  • 增加了优先度的行添加功能。

  • 初始显示的日程里,追加了 “时间”。

  • 鼠标悬停出现的弹出框显示了设置页面设置的全部数据。

  • 鼠标悬停出现的弹出框里显示字段名。

  • 点击横条的话,会出现一个窗口,可以更新开始日和截止日。

  • 横条的标题显示小项目,如果没有小项目的话,显示大项目。

  • 追加了设置页面上的项目和甘特图上哪个项目关联的说明图片。

2017/08/24 v2.0.1公开了,更新了以下的点。

  • 样式表由 “51-current-default.css” 更新为 “51-modern-default.css”。

  • 其他一些轻微的修订。

2017/08/25 v2.0.2 公开了。修改了一些bug。

2017/11/24 v2.0.3 公开了。修改了 “addin-style.css” 。没有更改功能。详细情况可参考这里的通知。

限制事项

  • 不支持智能手机端的浏览器。

  • 日程视图里无法使用甘特图。

  • 大项目和小项目最多显示全角7个文字,全角8个文字以上的情形,最多显示到全角6个文字为止。

  • 放大或缩小浏览器页面时,甘特图的布局可能会奔溃。

注意点

  • 当设置的“开始日字段”的字段值为空的情形,会发生延迟显示的现象。

※kintone的插件功能只可在标准版使用,简易版不可使用这点请大家注意一下。


附件:To Do.zip • 10.67KB • 下载

回复(10)

  • cybozu

    嗯 中文版是因为 "js/jquery.ui.datepicker-ja.min.js",  这个配置写错了,我上面改成"js/jquery.ui.datepicker-zh-CN.min.js",就可以了

    引用 追梦人 的回复:

    首先,非常感谢你的帮助,问题已经解决了。刚刚我们公司的一位同事 从 日文版的 上面下载的 甘特图   的压缩包,在公司环境 插件里面 导入后直接就可以用了,下面是 日文版  的 manifest.json 配置文件:{   "manifest_version":1,   "version":2,   "type":"APP",   "name":{      "ja":"ガントチャートプラグイン",      "en":"GanttChart plugin",      "zh":"甘特图插件"   },   "description":{      "ja":"これはガントチャートを表示するサンプルのプラグインです。",      "en":"This is sample Gantt chart plugin.",      "zh":"这是插件的例子"   },   "icon":"img/icon.png",   "homepage_url":{      "ja":"https://developer.cybozu.io/hc/ja/articles/203716110",      "en":"https://developer.cybozu.io/hc/ja/articles/203716110",      "zh":"https://developer.cybozu.io/hc/ja/articles/203716110"   },   "desktop":{      "js":[         "https://js.cybozu.com/jquery/2.1.3/jquery.min.js",         "https://js.cybozu.com/jquerygantt/20140623/jquery.fn.gantt.min.js",         "https://js.kintone.com/momentjs/2.14.1/moment.min.js",         "https://momentjs.com/downloads/moment-timezone-with-data.min.js",         "https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js",         "js/jquery.ui.datepicker-ja.min.js",         "js/desktop-ganttchart.js"      ],      "css":[         "https://js.cybozu.com/jquerygantt/20140623/css/style.css",         "https://js.cybozu.com/jqueryui/1.12.1/themes/smoothness/jquery-ui.css",         "css/addin-style.css"      ]   },   "mobile":{      "js":[         "https://js.cybozu.com/jquery/2.1.3/jquery.min.js"      ]   },   "config":{      "html":"html/config.html",      "js":[         "https://js.cybozu.com/jquery/2.1.3/jquery.min.js",         "https://js.kintone.com/jsrender/0.9.80/jsrender.min.js",         "thirdparties/jqColorPicker.min.js",         "js/config.js"      ],      "css":[         "css/51-modern-default.css",         "css/config.css"      ],      "required_params":[         "ganttchartTitle",         "ganttchartFrom",         "ganttchartTo",         "ganttchartColor",         "ganttchartScall"      ]   }}

  • 追梦人

    首先,非常感谢你的帮助,问题已经解决了。刚刚我们公司的一位同事 从 日文版的 上面下载的 甘特图   的压缩包,在公司环境 插件里面 导入后直接就可以用了,下面是 日文版  的 manifest.json 配置文件:


    {

       "manifest_version":1,

       "version":2,

       "type":"APP",

       "name":{

          "ja":"ガントチャートプラグイン",

          "en":"GanttChart plugin",

          "zh":"甘特图插件"

       },

       "description":{

          "ja":"これはガントチャートを表示するサンプルのプラグインです。",

          "en":"This is sample Gantt chart plugin.",

          "zh":"这是插件的例子"

       },

       "icon":"img/icon.png",

       "homepage_url":{

          "ja":"https://developer.cybozu.io/hc/ja/articles/203716110",

          "en":"https://developer.cybozu.io/hc/ja/articles/203716110",

          "zh":"https://developer.cybozu.io/hc/ja/articles/203716110"

       },

       "desktop":{

          "js":[

             "https://js.cybozu.com/jquery/2.1.3/jquery.min.js",

             "https://js.cybozu.com/jquerygantt/20140623/jquery.fn.gantt.min.js",

             "https://js.kintone.com/momentjs/2.14.1/moment.min.js",

             "https://momentjs.com/downloads/moment-timezone-with-data.min.js",

             "https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js",

             "js/jquery.ui.datepicker-ja.min.js",

             "js/desktop-ganttchart.js"

          ],

          "css":[

             "https://js.cybozu.com/jquerygantt/20140623/css/style.css",

             "https://js.cybozu.com/jqueryui/1.12.1/themes/smoothness/jquery-ui.css",

             "css/addin-style.css"

          ]

       },

       "mobile":{

          "js":[

             "https://js.cybozu.com/jquery/2.1.3/jquery.min.js"

          ]

       },

       "config":{

          "html":"html/config.html",

          "js":[

             "https://js.cybozu.com/jquery/2.1.3/jquery.min.js",

             "https://js.kintone.com/jsrender/0.9.80/jsrender.min.js",

             "thirdparties/jqColorPicker.min.js",

             "js/config.js"

          ],

          "css":[

             "css/51-modern-default.css",

             "css/config.css"

          ],

          "required_params":[

             "ganttchartTitle",

             "ganttchartFrom",

             "ganttchartTo",

             "ganttchartColor",

             "ganttchartScall"

          ]

       }

    }

    引用 cybozu 的回复:

    我修改了这个配置文件,你再试下

  • cybozu

    我修改了这个配置文件,你再试下

    引用 追梦人 的回复:

    https://gitee.com/cybozudeveloper/plugin-sdk/blob/master/plugin-sdk-master/examples/ganttchart/manifest.json 这个链接中的  甘特图 插件  manifest.json  有没有问题?我打包的时候总是 报下面的错误:C:\Users\Administrator\Desktop\wanglichao\kehu\src>kintone-plugin-packer ganttchartInvalid manifest.json:- ".desktop.js[5]" should match format "https-url"- ".desktop.js[5]" should match format "relative-path"- ".desktop.js[5]" file size should be <= 20MB- ".desktop.js[5]" should match some schema in anyOfFailed: Invalid manifest.jsonError: Invalid manifest.json    at throwIfInvalidManifest (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:131:11)    at C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:43:7

  • cybozu

    这个插件是以前的 没有更新

    引用 追梦人 的回复:

    https://gitee.com/cybozudeveloper/plugin-sdk/blob/master/plugin-sdk-master/examples/ganttchart/manifest.json 这个链接中的  甘特图 插件  manifest.json  有没有问题?我打包的时候总是 报下面的错误:C:\Users\Administrator\Desktop\wanglichao\kehu\src>kintone-plugin-packer ganttchartInvalid manifest.json:- ".desktop.js[5]" should match format "https-url"- ".desktop.js[5]" should match format "relative-path"- ".desktop.js[5]" file size should be <= 20MB- ".desktop.js[5]" should match some schema in anyOfFailed: Invalid manifest.jsonError: Invalid manifest.json    at throwIfInvalidManifest (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:131:11)    at C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:43:7

  • 追梦人

    https://gitee.com/cybozudeveloper/plugin-sdk/blob/master/plugin-sdk-master/examples/ganttchart/manifest.json 


    这个链接中的  甘特图 插件  manifest.json  有没有问题?


    我打包的时候总是 报下面的错误:

    C:\Users\Administrator\Desktop\wanglichao\kehu\src>kintone-plugin-packer ganttchart

    Invalid manifest.json:

    - ".desktop.js[5]" should match format "https-url"

    - ".desktop.js[5]" should match format "relative-path"

    - ".desktop.js[5]" file size should be <= 20MB

    - ".desktop.js[5]" should match some schema in anyOf

    Failed: Invalid manifest.json

    Error: Invalid manifest.json

        at throwIfInvalidManifest (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:131:11)

        at C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:43:7


  • 追梦人

    这个 教程 的步骤: 

    访问plugin-sdk ,并下载各个文件夹。这些文件夹的里面有一个叫 " examples/ganttchart " 的,是这次使用的整个文件包。

    我这边下载下来了,然后 按照   

    https://cybozudev.kf5.com/hc/kb/article/1307833

    用plugin-packer打包插件文件  

    这个教程,

    执行以下命令,即可开始自动打包。

    12cd sample_project$ kintone-plugin-packer plugin_dir

    但是还是报下面的这个错误,可以帮我看下吗,谢谢。


    C:\Users\Administrator\Desktop\wanglichao\kehu\src>kintone-plugin-packer ganttchart

    Invalid manifest.json:

    - ".desktop.js[5]" should match format "https-url"

    - ".desktop.js[5]" should match format "relative-path"

    - ".desktop.js[5]" file size should be <= 20MB

    - ".desktop.js[5]" should match some schema in anyOf

    Failed: Invalid manifest.json

    Error: Invalid manifest.json

        at throwIfInvalidManifest (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:131:11)

        at C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:43:7




    下面是我下载的文件里面的  manifest.json 配置文件



    {

       "manifest_version":1,

       "version":2,

       "type":"APP",

       "name":{

          "ja":"ガントチャートプラグイン",

          "en":"GanttChart plugin",

          "zh":"甘特图插件"

       },

       "description":{

          "ja":"これはガントチャートを表示するサンプルのプラグインです。",

          "en":"This is sample Gantt chart plugin.",

          "zh":"这是插件的例子"

       },

       "icon":"img/icon.png",

       "homepage_url":{

          "ja":"https://cybozudev.kf5.com/hc/kb/article/1007997",

          "en":"https://cybozudev.kf5.com/hc/kb/article/1007997",

          "zh":"https://cybozudev.kf5.com/hc/kb/article/1007997"

       },

       "desktop":{

          "js":[

             "https://js.cybozu.cn/jquery/2.1.3/jquery.min.js",

             "https://js.cybozu.cn/jquerygantt/20140623/jquery.fn.gantt.min.js",

             "https://js.kintone.com/momentjs/2.14.1/moment.min.js",

             "https://momentjs.com/downloads/moment-timezone-with-data.min.js",

             "https://js.cybozu.cn/jqueryui/1.12.1/jquery-ui.min.js",

             "js/jquery.ui.datepicker-ja.min.js",

             "js/desktop-ganttchart.js"

          ],

          "css":[

             "https://js.cybozu.cn/jquerygantt/20140623/css/style.css",

             "https://js.cybozu.cn/jqueryui/1.12.1/themes/smoothness/jquery-ui.css",

             "css/addin-style.css"

          ]

       },

       "mobile":{

          "js":[

             "https://js.cybozu.cn/jquery/2.1.3/jquery.min.js"

          ]

       },

       "config":{

          "html":"html/config.html",

          "js":[

             "https://js.cybozu.cn/jquery/2.1.3/jquery.min.js",

             "https://js.kintone.cn/jsrender/0.9.80/jsrender.min.js",

             "thirdparties/jqColorPicker.min.js",

             "js/config.js"

          ],

          "css":[

             "css/51-modern-default.css",

             "css/config.css"

          ],

          "required_params":[

             "ganttchartTitle",

             "ganttchartFrom",

             "ganttchartTo",

             "ganttchartColor",

             "ganttchartScall"

          ]

       }

    }


    引用 cybozu 的回复:

    Invalid manifest.json 是这个配置文件内写的错了。请参考新的打包工具:https://cybozudev.kf5.com/hc/kb/article/1307833打包的配置文件说明: https://cybozudev.kf5.com/hc/kb/article/1000664/#

  • cybozu

    npm是一个工具,用来安装一些nodejs的库,具体 你可以百度下,因为这个涉及到了很多东西。

    引用 追梦人 的回复:

    非常感谢,我 看了打包配置文件,  下面的这个命令 怎么使用?$ npm install -g @kintone/plugin-packer这个命令在 windows 系统上面怎么用? 

  • 追梦人

    非常感谢,我 看了打包配置文件,  下面的这个命令 怎么使用?

    $ npm install -g @kintone/plugin-packer

    这个命令在 windows 系统上面怎么用?


     


    引用 cybozu 的回复:

    Invalid manifest.json 是这个配置文件内写的错了。请参考新的打包工具:https://cybozudev.kf5.com/hc/kb/article/1307833打包的配置文件说明: https://cybozudev.kf5.com/hc/kb/article/1000664/#

  • cybozu

    Invalid manifest.json 

    是这个配置文件内写的错了。

    请参考

    新的打包工具:https://cybozudev.kf5.com/hc/kb/article/1307833

    打包的配置文件说明: https://cybozudev.kf5.com/hc/kb/article/1000664/#

    引用 追梦人 的回复:

    我在尝试打包 甘特图插件的时候,遇到了下面的错误,我不清楚该如何处理,可以帮我看下吗,非常感谢。C:\Users\Administrator\Desktop\wanglichao\kehu\work>kintone-plugin-packer ganttchartInvalid manifest.json:- ".desktop.js[5]" should match format "https-url"- ".desktop.js[5]" should match format "relative-path"- ".desktop.js[5]" file size should be <= 20MB- ".desktop.js[5]" should match some schema in anyOfFailed: Invalid manifest.jsonError: Invalid manifest.json    at throwIfInvalidManifest (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:131:11)    at C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:43:7

  • 追梦人

    我在尝试打包 甘特图插件的时候,遇到了下面的错误,我不清楚该如何处理,可以帮我看下吗,非常感谢。



    C:\Users\Administrator\Desktop\wanglichao\kehu\work>kintone-plugin-packer ganttchart

    Invalid manifest.json:

    - ".desktop.js[5]" should match format "https-url"

    - ".desktop.js[5]" should match format "relative-path"

    - ".desktop.js[5]" file size should be <= 20MB

    - ".desktop.js[5]" should match some schema in anyOf

    Failed: Invalid manifest.json

    Error: Invalid manifest.json

        at throwIfInvalidManifest (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:131:11)

        at C:\Users\Administrator\AppData\Roaming\npm\node_modules\@kintone\plugin-packer\src\cli.js:43:7


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