甘特图插件

cybozu发表于:2016年12月22日 18:10:40更新于:2024年06月27日 11:44:52

Index

注意事项

  • 此插件是用于演示如何创建插件的范例,才望子不予以保证可正常运行。

  • 不对此范例提供技术支持。

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

概要

这次为大家介绍的是,将范例中的 “用甘特图显示To Do” Javascript做成插件时的步骤。
关于操作详情请参考 kintone 插件开发流程

主要的更新信息

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

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

完成的样子

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

001596f14a40f6aeb96ac95bcf65bbc

应用准备

为方便您确认插件的动作,在此提供了应用模板,点击“To Do”下载 。
※也可在现有的应用中直接添加。
将应用添加到您的kintone环境里,并添加几条范例数据。
※像完成的样子这样,想要设置子目录时,需要追加表格字段。详细的设定方法可以参考这里 (暂时仅提供日文)的文章

插件文件的结构

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

0015a1d392ea5a33b6708f2b88e0545

以下是各文件夹内的文件说明。

文件夹:css

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

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

文件夹:html

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

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

  • 标题

  • 副标题

  • 开始日

  • 结束日

  • 甘特图颜色

  • 默认显示的单位(小时、天、周、月的任意一个单位)

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

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

    001599e8a8757b0d5855d79491ddb23

文件夹:img

  • icon.png
    插件的图标
    001667cdff31d4caeaa44a2351339d9

文件夹:js

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

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

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

    • 点击 “取消” 时,返回上一画面。

    • 设置插件变量后,设置各字段值。

    • 设置标题字段时,如选择表格内字段,将会出现警告。

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

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

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

文件:manifest.json

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

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

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

打包

关于插件的打包方法,请参考 此Tips的打包步骤 ,进行打包。

导入和设置

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

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

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

“kintone活动日历插件的作成范例” 的教程里介绍了插件的安装方法和动作确认,大家可以参考一下。

更新历史记录

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” 。没有更改功能。详细情况可参考这里的通知。

2020/04/06 v2.1发布了。插件显示语言新增了中文,可根据用户自身环境的语言设置来切换中文/日文/英文了。

2021/03/22 v2.2发布了。修复了开始日期设置的字段值为空时甘特图显示异常的问题。

2022/09/06 v2.2.1 发布了。将JavaScript代码改写成ES6之后的写法。

2022/10/05 v2.2.2 发布了。修改了受系统基础架构更新影响的内容。

限制事项

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

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

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

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

  • 若设置为开始日或结束日的字段的值为空,则甘特图仅显示大项目和小项目。
    若不想查看这些记录,请使用筛选功能对其进行过滤。

所使用的OSS许可证信息

此插件使用的OSS许可证如下:

回复(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