甘特图插件

cybozu发表于:2016年12月22日 18:10:40更新于:2018年10月29日 15:40:56

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 • 下载

    您需要登录后才可以回复