To Do をガントチャートで表示する
https://cybozudev.zendesk.com/hc/ja/articles/201304344
上記については、同様の物の作成はできたのですが、同一フォームの中に設定した“関連レコード一覧”の情報を基にしたチャートをサブチャートとして並べて表示させたいのですが、どのようにしたら良いのでしょうか。
イメージ的には、こんなイメージです。
メインチャート ：----------------
サブチャート1 ：----
サブチャート2 ： ------
サブチャート3 ： ------
何卒、ご教示いただけますと幸いです。
主となる工程表とその中のステップをサブとして管理するアプリがそれぞれあるような内容と推察されますが、サブチャートに対応するアプリをサブToDoのように表現したとします。
いずれのアプリもサンプルのToDoアプリをベースに作ったものとします。そして、主従関係を仮に「To_Do_Code」というフィールドコード（もとのサンプルにはありませんので追加ください）で関連づけたとします。また、関連レコードのフィールドコードを「related」としておきます。
関連レコードを引っ張ってくるにはAPIでサブToDoのレコードを引っ張ってくる方法が考えられます。関連レコードの参照先のアプリIDを引いてくるのにkintone.app.getRelatedRecordsTargetAppId()関数を利用します。
元のサンプルを書き換えると次のようになるかと思います。
(function () {
“use strict”;
function loadCSS(href) {
document.write(‘<link rel=“stylesheet” type=“text/css” href="’ + href + ‘" />’);
}
function loadJS(src) {
document.write(‘<script type=“text/javascript” src="’ + src + ‘"></script>’);
}
function convertDateTime(str) {
return ‘/Date(’ + (new Date(str)).getTime() + ‘)/’;
}
// レコード一覧表示時のイベント処理
kintone.events.on(‘app.record.index.show’, function(event){
// レコード一覧のメニューの下側の空白部分の要素を取得する
var elSpace = kintone.app.getHeaderSpaceElement();
// スタイルを調整する
elSpace.style.marginRight = '26px';
elSpace.style.border = 'solid 1px #ccc';
// ガントチャートのエレメントを検索する
var elGantt = document.getElementById ('gantt')
// エレメントがない場合、ガントチャートのエレメントを作成する
if (elGantt === null) {
elGantt = document.createElement('div');
elGantt.id = 'gantt';
elSpace.appendChild(elGantt);
}
var records = event.records;
var source = [];
for (var i = 0; i < records.length; i++) {
var r = records[i];
var obj = {
name: r['To_Do']['value'],
desc: '',
values: [{
from: convertDateTime(r['From']['value']),
to: convertDateTime(r['To']['value']),
label: r['To_Do']['value'],
customClass: 'gantt' + r['Color']['value']
}]
};
source.push(obj);
// 関連するサブToDoを取ってきて、オブジェクトに入れる
var query = 'To_Do_Code=' + r['To_Do_Code']['value'];
var appUrl = kintone.api.url('/k/v1/records') + '?app='+ kintone.app.getRelatedRecordsTargetAppId('related') + '&query=' + encodeURIComponent(query);
var xmlHttp;
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", appUrl, false);
xmlHttp.setRequestHeader('X-Requested-With','XMLHttpRequest');
xmlHttp.send(null);
var related = JSON.parse(xmlHttp.responseText);
for(var j=0; j<related['records'].length; j++){
var obj1 = {
name: '',
desc: related['records'][j]['To_Do']['value'],
values:[{
from: convertDateTime(related['records'][j]['From']['value']),
to: convertDateTime(related['records'][j]['To']['value']),
label: related['records'][j]['To_Do']['value'],
customClass: 'gantt' + related['records'][j]['Color']['value']
}]
};
source.push(obj1);
} // for j
} // for i
$(elGantt).gantt({
source: source,
navigate: "scroll",
scale: "days",
maxScale: "months",
minScale: "days",
left: "70px",
itemsPerPage: 20
});
});
// jQuery.Gantt の CSS ファイル
loadCSS(“https://rawgit.com/taitems/jQuery.Gantt/master/css/style.css”);
// jQuery の JavaScript ファイル
loadJS(“https://rawgit.com/taitems/jQuery.Gantt/master/js/jquery.min.js”);
// jQuery.Gantt の JavaScript ファイル
loadJS(“https://rawgit.com/taitems/jQuery.Gantt/master/js/jquery.fn.gantt.min.js”);
})();
ライブラリの読み込みにはRawGit経由でGitHubをCDN代わりにしていますので、ご注意ください。また、APIで関連レコードを引いてきていますので、このサンプルでは関連レコードは100件までしか引けないことにもご注意頂ければと思います。
説明足らずの部分もあろうかと思いますので、ご不明な点があれば再度お問い合わせ頂ければと思います。
山下様
大変丁寧にご説明いただき誠にありがとうございます。
まだ試せてはおりませんが、取り急ぎ御礼申し上げます。
また何か不明点があれば質問させていただきたいと思います。
その際には、お手数ですが何卒宜しくお願い致します。
Fujimotoさん
ご丁寧にありがとうございます。まずはお試し頂いて、
必要の際にはまたお気軽に書き込み頂ければと思います。
よろしくお願いします。
山下様
こちらを参考に同様のチャートを作成しており、大変助かっております。
質問なのですが、アプリの「主従関係」はどちらで設定すればよろしいでしょうか？
どうしても設定できる項目を発見できない次第です。
ご教示いただけると幸いです。
よろしくお願いいたします。
主従（親子）関係というのは表現だけで、どこかで設定しないといけないというようなものではありません。
オリジナルの「To Do」アプリを元にして
To Do（親）に
・フィールドコード「To_Do_Code」の文字列（1行）フィールド
・フィールドコード「related」の関連レコードフィールド
To Do（子）に
・フィールドコード「To_Do_Code」の文字列（1行）フィールド
をフィールドをそれぞれ追加して、To_Do_Codeが同じもの同士が親子関係を持てるという仕組みにしています（関連付けについては他にも方法はあると思いますが）。
なかなか文章だけではお伝えしにくいところもありますが、またご不明な点はお尋ね頂ければと思います。
ちなみに、サンプルのJSは親の方に入れます（子の方はフィールドの追加のみです）。
山下様
とても分かりやすい説明をありがとうございます。
日本語のTo_Do_Codeを格納する場合はクエリの定義を
var query = ‘To_Do_Code="’ + r[‘To_Do_Code’][‘value’] +‘"’;
として、文字をダブルクオテーションで囲わないとうまくいきませんでしたが、それ以外は全く問題ありませんでした。
ありがとうございました。
文字をダブルクオテーションで囲わないとうまくいきません
でしたが、それ以外は全く問題ありませんでした。
そうですね。失礼しました。常に着けておいた方が無難ですね(^^;
あとは画面遷移等を考慮して作り込めば運用に耐えられるかと思います。