カントチャートプラグインで同一名小項目検索で同一名小項目のみ表示させたい

koichiさん

いつもありがとうございます

まだ100時間ほどしか勉強していませんが、勉強した知識を生かしてこれからガントチャートプラグインをカスタマイズ反映させていこうと思っています

SAMPLE_gantt_plugin_v2.1_7_20201103.zipをベースに現在ガントチャートをカスタマイズしておこうと思っています。

カスタマイズする前に現在うまく動いていない部分があるのでどのように直せばいいのかご教示いただきたいのです。

ガントチャート表示のチャートバーをクリックすると日付編集画面が表示されます(2020/8/18の質問の画像のように)

koichiさんの対応でここに表示されている日付を編集するとガントチャートに編集結果が更新される仕組みなはずですが、編集後に「更新」ボタンを押すとエラーが出て更新できませんでした。その後のkoichiさんの対応で「更新」ボタンを押すとエラーは出なくなりましたが、編集して「更新」」ボタンを押しても(C)開始日フィールドと(D)終了日フィールドに編集結果が反映されなく空欄になってしまう状況になっていまい、せっかくの編集画面がうまく機能しない状態であります。まずここを何とか直したいのですが、どこのコードが足りないとか悪さをしてこのようになっているのかこころあたりありませんか?

ご教示いただきたくよろしくお願いします。

koichiさん

もう一つ質問です

2020/12/31にアドバイスいただいた検索BOXの複製をやってみました。

検索BOXは複製されましたが、肝心のチャート表が表示されない事態になっています

変更後のコードは↓です

data: [],
init: function() {
var self = this;
kintone.events.on(‘app.record.index.show’, function(event) {

var searchItem1 = ‘’;
if (sessionStorage.getItem(‘searchItem1’)) {
searchItem = sessionStorage.getItem(‘searchItem1’);
}

var searchItem2 = ‘’;
if (sessionStorage.getItem(‘searchItem2’)) {
searchItem = sessionStorage.getItem(‘searchItem2’);
}

var conf = kintone.plugin.app.getConfig(PLUGIN_ID);

if (conf.fieldNameColor.indexOf(‘[Table]’) === 0) {
if ($(‘#input-search-item1’)[0]) {
return;
}

var $myInput1 = $(‘<input>’, {
id: ‘input-search-item1’,
type: ‘text’,
placeholder: ‘工程名検索_半角カンマ(,)で複数抽出’
});

$myInput1.val(searchItem1);

var $myInput2 = $(‘<input>’, {
id: ‘input-search-item2’,
type: ‘text’,
placeholder: ‘担当名検索_半角カンマ(,)で複数抽出’
});

$myInput2.val(searchItem2);

var $myButton = $(‘<button>’, {
id: ‘button-search-item’,
text: ‘抽出’
}).click(function() {

sessionStorage.setItem(‘searchItem1’, $myInput1.val());
sessionStorage.setItem(‘searchItem2’, $myInput2.val());

if (!self.settings.config) {
return;
}
if (typeof self.settings.config.settingColors === ‘string’) {
self.initSetting();
}
var ganttBox = self.uiCreateGanttBox();
self.data = [];
self.getRecordsData(event.records, $myInput1.val(),$myInput2.val(), ganttBox, function() {
// Put to jquery gantt and render
self.gantt(ganttBox);
});
});
$(kintone.app.getHeaderSpaceElement()).append($myInput1);
$(kintone.app.getHeaderSpaceElement()).append($myInput2);
$(kintone.app.getHeaderSpaceElement()).append($myButton);
}

という風に変えました

ちょっとみていただいてもいいでしょうか?

Miyawakiさん

日付が空欄で入るということは、kintone.api(PUT処理)のパラメータで

日付の値が正しく指定されていないことが考えられます。

 

ブラウザの開発者ツールを使うことで、どこでエラーが出ているか、

あるいはエラーが無くても現在のパラメータがどのような状態かを確認できます。

開発者ツールの操作方法は以下参照ください。

https://developer.cybozu.io/hc/ja/articles/360038920252-kintone%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%AE%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%AE%E6%B5%81%E3%82%8C%E3%82%92%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%91%E3%82%88%E3%81%86

 

kintone.apiの処理の前にパラメータbodyを定義しています。

このdata.recordにマウスカーソルを当てると、現在の値を確認できます。

 

ガントチャートが出ないのは、どこかしらでエラーになり、チャートの描画処理まで到達していないからと考えられます。

同じく開発者ツールの「console」をご覧いただければ、エラーがある場合は赤文字で表示されます。

 

koichiさん

いつもお世話になっております。

日付欄の空欄の件は解決しました!サブテーブルの開始日・終了日フィールドが従来の日付形式のままで、日時フィールドではなかったためにうまく日付が入らないことがわかりました。ありがとうございました。

 

もう一つの複数検索ボックス表示の件ですが

kintone.events.on(‘app.record.index.show’, function(event) {

のところをkoichiさんからアドバイスいただいたseachItem1とseachItem2に複製してみて

コンソールを出してみたところ、以下のようなエラーが出ていました

おそらくseachItemとなっているところがエラーを起こしているというのがわかり、エディタで検索したところ

372行目にあることがわかりました。

現在大項目3つ、小項目2つある状態ですが

372行目の

self.getRecordsData(event.records, searchItem, ganttBox, function() {

のsearchItemはもともと小項目Aを取得していたと思われます。

小項目AはseachItem1、小項目BはseachItem2というようにレコードデータを取得する必要があると思いますが、

この372行目以下のところも複製する必要がありますか?

それとも

self.getRecordsData(event.records, searchItem1,searchItem2, ganttBox, function() {

というようにしたらいいでしょうか?

またアドバイスよろしくご教示願います

Miyawakiさん

最後に記載されている方法が良いと思います。

self.getRecordsData(event.records, searchItem1,searchItem2, ganttBox, function() {

このfunction内の処理でsearchItemに対して行っている処理を2つ(searchItem1とsearchItem2)記述する形に変更すると良いかと思います。

koichiさん

いつもお世話になっております

またガントチャートサンプルプラグインで聞きたいことあります

ガントチャートサンプルプラグインを使用していて、「ctrl」と「-」で画面表示倍率を100%未満表示にすると、チャート表の日付表示がバグって項目とチャート表が段違いズレ表示されるんですが、プラグイン内のどのファイルをどういじったらこのバグを解消できますでしょうか?

お手数をお掛けしますがよろしくお願いいたします

Miyawakiさん

manifest.jsonで定義したjQuery.GanttのURLが20140623と古いことが原因と思います。

以下サイトの「jquery.fn.gantt.min.js」「style.css」のURLを上書きしてください。

jQuery.Gantt

koichiさん

ご教示ありがとうございました!

症状が改善されました!

また何かありましたらよろしくお願いいたします!