ガンチャートのカレンダー部に作業者を表示させたい

「To Do をガントチャートで表示する」

のガントチャートのカレンダー部に作業者を表示させたいと思い、記事のフィードパック欄に質問し、cybozu Development team様に回答頂きました。

https://developer.cybozu.io/hc/ja/articles/202640940?page=1#comment_360003869711 

作業者フィールドのフィールドコードが

https://developer.cybozu.io/hc/ja/articles/202166330 

上記リンクの冒頭に『作業者』とあったため、escapeHtml(records[i][‘To_Do’][‘value’]) の『To_Do』を『作業者』に変更したところ、ガンチャートが消えてしまいました。

フィールドコードの設定が間違っているとは思うのですが、どなたかご教授頂けませんでしょうか。宜しくお願い致します。

sunshine さん

こんにちは。ひよこです。

作業者のフィールドコードはフォームの設定にないので、kintone が決めています。
なので、records[i][‘作業者’][‘value’]で合っています。

ただ、value は配列型です(作業者は複数人指定できるためです)
文字列(1行)の形式と作業者の形式を見比べると、value: 後の形が違い、オブジェクトの配列になっています。

文字列(1行)の形式

"<フィールドコード>": {
    "type": "SINGLE_LINE_TEXT",
    "value": "テストです。"
}

作業者の形式

"作業者": {
    "type": "STATUS_ASSIGNEE",
    "value": [
        {
            "code": "sato",
            "name": "Noboru Sato"
        }
    ]
}

なので、作業者フィールドは、オブジェクトの配列を文字列にするという処理が必要です。

// 作業者名だけの配列に変換する
//[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global\_Objects/Array/map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
// 例: [{"code": "yamada", "name:"山田太郎"},{"code": "suzuki", "name": "鈴木一郎"}] を["山田太郎", "鈴木一郎"] にする
var assignees = records[i]['作業者'].value.map(function(assignee) {
return assignee.name;
});

// 作業者名を「,」区切りにする
//[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global\_Objects/Array/join](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
// 例: ["山田太郎", "鈴木一郎"] を "山田太郎, 鈴木一郎" にする
var names = assignees.join(',');

この names をescapeHtml(records[i][‘To_Do’][‘value’])  の代わりに指定すれば、作業者が表示されると思います。

ひよこ さん

コメントバックありがとうございます。

ご教授頂いた内容で設定してみます。

 

また、当初はカレンダー部分に作業者を表示させたかったのですが、

社内で打ち合わせを行いまして、左端の太文字に作業者を表示させたいとなりました。

また、ガントチャートの並びも作業者順にしたいです。

 

そのようなことは可能でしょうか。

 

度々で申し訳ございません。ご教授お願い致します。

sunshine さん

こんにちは。ひよこです。

ガントチャートを表示するライブラリであるjQuery.Gantt のドキュメント http://taitems.github.io/jQuery.Gantt/ に、
どの設定値をいじればよいか書いてあるので、読んでみてください。

> ガントチャートの並びも作業者順にしたい
jQuery.Gantt の機能ではできないようです。

このカスタマイズだと、レコード一覧画面の表示イベントで取得できる event.records が表示対象なので
event.records の値(正確には、var records = event.records; に格納されているので、records ですね)
を並び替える処理をすればいいと思います。

レコード一覧で「作業者」で並び替えられればよかったんですけど、ソート順に「作業者」は指定できないみたいですねー(配列だからでしょうけど)

 

> 左端の太文字に作業者を表示させたいとなりました。
116行目の name に指定する値が左側の太文字部分に反映されます。
なので、ここに最初のコメントに書いた 作業者名を結合したときの値(names)を設定すればいいと思います。

おはようございます。

ひよこさん 度々のご教授ありがとうございます。

http://taitems.github.io/jQuery.Gantt/ の存在は知りませんでしたので勉強してみます。