2021/04/11 定期のメンテナンスでスペース表示イベントとスペース情報取得が追加されました。 こちらのAPIを用いて、スペースのポータルにガントチャートを表示してみます。
サンプル
スペースのポータルにガントチャートを表示します。
アプリ設定
プロジェクト情報保存用のアプリを用意します。
コード
JavaScript
「kintoneシステム管理 > JavaScript / CSSでカスタマイズ」にてファイルを読み込みます。 下記を順に読み込みます。
- https://js.cybozu.com/kintone-rest-api-client/1.12.1/KintoneRestAPIClient.min.js
- https://code.highcharts.com/gantt/highcharts-gantt.js
- sample.js
・sample.js
(function(){"use strict";kintone.events.on(['space.portal.show','mobile.space.portal.show',],function(event){varspaceId=\*\*\*\*;//ガントチャートを表示するスペースのIDif(Number(event.spaceId)!==spaceId){returnevent;}varappId=\*\*\*\*;//参照するアプリのIDvarprojectNameField='Project';vartaskTableField='Table';vartaskNameField='Task';varstartDateField='Start';varendDateField='End';varclient=newKintoneRestAPIClient();varganttChartContainer=document.createElement('div');client.record.getAllRecordsWithCursor({app:appId,query:'order by $id asc'}).then(function(records){Highcharts.ganttChart(ganttChartContainer,{series:records.map(function(record){return{name:record[projectNameField].value,data:[{id:record[projectNameField].value,name:record[projectNameField].value,}].concat(record[taskTableField].value.map(function(row){return{name:row.value[taskNameField].value,start:newDate(row.value[startDateField].value).getTime(),end:newDate(row.value[endDateField].value).getTime(),parent:record[projectNameField].value}}))}}),});});if(event.type==='space.portal.show'){kintone.space.portal.getContentSpaceElement().appendChild(ganttChartContainer);}else{kintone.mobile.space.portal.getContentSpaceElement().appendChild(ganttChartContainer);}returnevent;});})();