新規投稿
フォローする

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

ガントチャートプラグインサンプル「SAMPLE_gantt_plugin_v2.1」を使用して工程管理ガントチャートを

作成してみました。

大項目:注文番号

小項目:工程名 

まだ、はじめたばかりで全然知識がないのですが、

ガントチャートプラグインサンプルで大項目と小項目が表示されている表示形式で、小項目の同一名のみ表示させたいときに、大項目が一致していればそれに付随する小項目まで一緒に表示されてしまいます

この表では小項目「データ」だけ検索したつもりが、検索結果でまた上の画像のように、工程名「データ」のみ表示させようと検索しても、「データ」を含む大項目を検索してしまうので他の小項目も表示されてしまいます

 

これを

↑こんなふうに小項目検索工程名「データ」のみ検索して表示させたいです。

(完成想像図です。実際の検索結果ではこのように表示させることができません)

どのようにカスタマイズしたらこのように表示させることができるか、ご教示いただきたくお願いします。

0

42件のコメント

Avatar
koichi

Miyawakiさん

こんにちは。まだ解決されていなければ、下記ご確認ください。

 

レコード一覧画面の絞り込み条件(漏斗アイコン)にて、下記のように設定するといかがでしょうか。

工程名が文字列1行でしたら、「=(等しい)」でも良いです。

 

または、JavaScriptで一覧画面を更新するなどのカスタマイズをされてますでしょうか?

1
Avatar
Miyawaki

koichiさん

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

koichiさんの言われる通り下記のように検索しても表示される結果がかわりませんでした

 

おそらく小分類 の「データ」を検索しても大分類の「ctrlNO」が同一であれば他の「製作期間」「加工1」「加工3(仕上)」も一緒に表示されてしまうのではないか?と思っています。

これを何とか小分類の検索で【「データ」と検索したら「データ」だけ表示】【「加工1」と検索したら「加工1」だけ表示】という風に何とか表示できないかと苦慮しています

 

↑現在のフィールド入力画面はこのようになっています。

「JavaScriptで一覧画面を更新するなどのカスタマイズをされてますでしょうか?」

koichiさんの↑のこともどのようにカスタマイズしたらいいのかというのもわかっておりません。

まだ始めたばかりで勉強不足なところがありますが、以上のことを誠に恐縮ではございますがご教示いただきたくお願いいたします。

 

 

0
Avatar
koichi

Miyawakiさん

ガントチャートプラグインの各設定項目でテーブルのフィールドを使う場合は、

上記のように絞り込みをしても、全ての項目が表示されてしまうようです。

ご希望の表示にするには、プラグインの設定項目で、テーブルではないフィールドを指定するしかないようです。

ただ、その場合には、レコードを1件1件に分けて登録する必要があります。

 

現在:ctrlNOに対し、1レコード内にテーブルで製作工程(製作期間、データ、加工1、加工3)を入力

代替:ctrlNOに対し、製作工程を1レコードずつに分けて入力

   レコード1:製作期間

   レコード2:データ

   レコード3:加工1

   レコード4:加工3

1
Avatar
Miyawaki

koichiさん

更なるご教示ありがとうございます。

やはりそうでしたか・・・

こちらの条件としてはctrlNOは絶対に重複させたくないフィールドなので、代替案で表示させられたとして本末転倒なところでございます。

何か別の方法はありますでしょうかね?

お手数ですがよろしくお願いします

0
Avatar
Miyawaki

koichiさんのコメントの通り

「ガントチャートプラグインの各設定項目でテーブルのフィールドを使う場合は、
上記のように絞り込みをしても、全ての項目が表示されてしまうようです。」

で返事いただいた部分を、スクリプトなどを使用して

「すべてが表示されないように、検索条件だけ表示する」

に、なんとか持っていきたいところです。

現在弊社ではすでに代替案の方法と同様なやり方で「エクセル」で工程管理しています

CTRLNOは重複させることによって情報が重複してしまうところに問題が生じています

エクセルをkintoneにして改善した意味がなくなってしまいます

こちらとしてもこういった専門知識がないため他人頼みで恐縮なところがありますが、

cybozu developer network で解決したいと思っています

0
Avatar
koichi

Miyawakiさん

ガントチャートプラグインのスクリプトを修正するのが一番早そうです。

こちらでも見てみますので、またご連絡しますね。

0
Avatar
koichi

Miyawakiさん

プラグインを少し拡張してみました。

下記URLからダウンロードできます。(ファイル名:SAMPLE_gantt_plugin_v2.1._1_20200808.zip)

https://drive.google.com/file/d/1iMreHXG1BdRWRqe7OcuY_Av3RVQaex1E/view?usp=sharing

※現在適用中のプラグインを外して、再度設定していただく必要があります。

※サンプルのため、プラグインの動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。

 

<変更点>

ガントチャート上部に検索ボックスが表示されます。

抽出ボタンを押すと、検索キーワードに完全一致した小項目だけをテーブルから抽出し、ガントチャートを再描画します。

カンマ(,)で区切ると、複数キーワードを抽出できます。

 

例)「データ」と「加工1」を抽出する場合

 

レコード一覧の絞り込み条件を使って抽出することも検討したのですが、あらゆる条件指定を考慮する必要があるため断念しました。

1
Avatar
Miyawaki

koichiさん

プラグイン拡張ありがとうございました!

こちらが求めている通りの表示をさせることができて大変喜ばしい限りです

重ねてお礼申し上げます。

 

追加で可能であれば下図の3つの項目をクリアにしたいです

①と②は特にクリアにしたいところです

③は可能であれば大丈夫です。難しそうですし・・・

 

お手数ですがぜひよろしくお願いいたします。

0
Avatar
koichi

Miyawakiさん

ご確認いただきありがとうございます。

追加の要件について、検証は行ってみますが、ご回答に日数を要することと、現時点でクリアできるかご回答できかねることをご了承ください。

追ってご連絡します。

0
Avatar
koichi

Miyawakiさん

左側の項目名パネルの横幅は広げることができました。

しかし、プラグインで使用するjQuery.Ganttライブラリの仕様上、項目の列数を増やすことが難しいため、

タイトルに各項目を結合した文字列を格納して表示するしかなさそうです。

 

プラグインは、下記URLからダウンロードできます。(ファイル名:SAMPLE_gantt_plugin_v2.1_2_20200813.zip)

https://drive.google.com/file/d/1Mtq46K8HXjvBtNqxsVYKf_qjQbU455pC/view?usp=sharing

※現在適用中のプラグインを外して、再度設定していただく必要があります。

※サンプルのため、プラグインの動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。

 

注文番号、製品名、受注担当者を結合する「タイトル」(文字列1行)を設置します。

 

文字列の結合は、フィールドの自動計算を使います。

 

プラグインのタイトルフィールドに「タイトル」を指定します。

 

下図のようなレイアウトになります。

 

1
Avatar
Miyawaki

koichiさん

対応ありがとうございます。

自分でそういう知識があればいいのですが、koichiさんに世話になって大変助かっております。

表示数が増えたのはすばらしいです。

とりあえず「SAMPLE_gantt_plugin_v2.1_2_20200813.zip」

で対応してみます。

その他の①~③の依頼案件も可能性があるならば時間がかかっても全然大丈夫です。

やりたいことははっきりしているんですが、プログラムを開発したりするのは専門外のことなので考えていただけるだけで助かります。

よろしくお願いいたします。

0
Avatar
Miyawaki

koichiさん

また一つご教示いただきたいです

ガントチャート表の日付バーをクリックすると、日付を編集できる画面が表示されますが、日付を変えても編集できなくてはじかれます。

直接編集できるようにするにはどうしたらいいでしょうか?

よろしくお願いいたします

0
Avatar
koichi

Miyawakiさん

プラグインの拡張については、改めて対応可否をご連絡いたします。

 

先に日付の件ですが、確認させてください。

①お使いのブラウザは何でしょうか?(IE11、Edge、Chrome、Firefox、Safariなど)

②「編集できなくてはじかれる」というのは、どのような状態(表示)になるでしょうか。

 ・日付欄を編集できない(キーボード入力できない、カレンダーが表示されない)

 ・更新ボタンを押しても反応がない。

 ・更新ボタンを押した際にエラー「**エラー内容の詳細**」が表示される。

 ・更新ボタンを押して、画面が切り替わるが、レコードの値が更新されていない。 など

 

ちなみに、正常な動きとしては下記のようになります。

 

<変更前>

赤枠の「データ」の日付を変更します。

 

<日付選択>

キーボード入力でもカレンダーでも日付指定が可能です。

 

<変更後>

画面が更新され、赤枠の「データ」の日付が変更されています。

 

1
Avatar
Miyawaki

koichiさん

ありがとうございます。

お答えいたします

①は「Edge」または「IE11」を使用しています

②は日付を変更して「更新」ボタンを押すと

ダイアログメッセージが出て

「レコードを更新できませんでした。編集権限があるかご確認ください。」

でOKボタンをおすと、編集が反映されずはじかれます

よろしくお願いいたします

0
Avatar
koichi

Miyawakiさん
ご回答ありがとうございます。
その内容ですと、権限がないことがまず考えられます。
同ユーザーで、対象のレコードの詳細画面を開き、通常のレコード編集・保存は可能でしょうか?

1
Avatar
Miyawaki

koichiさん

ありがとうございます。

同ユーザーで、対象のレコードの「詳細画面」に入って通常のレコード編集・保存は可能です。

ですが、ガントチャート表示画面で日付を直して「更新」を押すと

「レコードを更新できませんでした。編集権限があるかご確認ください。」

とメッセージが出て編集が反映されません

よろしくお願いいたします

0
Avatar
koichi

Miyawakiさん

先に10桁表示の件、修正したプラグインを載せます。

プラグインは、下記URLからダウンロードできます。(ファイル名:SAMPLE_gantt_plugin_v2.1_3_20200822.zip)

https://drive.google.com/file/d/1xY4S4sy9TIO2ncWymJIzus1mAeouu7AK/view?usp=sharing

※現在適用中のプラグインを外して、再度設定していただく必要があります。

※サンプルのため、プラグインの動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。

 

プラグインの設定にて、注文番号とは他に2つ追加で選択できるようにしています。

下画像のように表示されるかと思います。

文字数は全角で最大10文字分の幅を確保していますが、文字数制限はできないため、

必要に応じて、アプリの設定より文字列フィールドの文字数制限をしてください。

 

曜日の色付けについては、元のライブラリを変更できないため、仕様上対応できませんでした。ご了承ください。

 

最後に、エラーの件、

今回のプラグインを適用すると、他のエラーを出すようにしましたので、そのメッセージをご返信ください。

0
Avatar
Miyawaki

koichiさん

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

早速使ってみました

ものすごくいい感じになってきております

そこでもう少しお願いしたいことあります

 

①製品名のところを10桁→20桁に桁数を増やしたいです

 

②エラーの件ですが

まだ、うまくいっていないようです。

koichiさんの「水曜日11:17」のコメントにある画像のもの、こちらのものの表示に差異があります

・koichiさんの表示「10000製品A田中太郎 データ」

・私の表示「データ」

わからないにですが、おそらくここに何か問題が潜んでいるような感じします

全然急いでないです。

可能であれば①と②の改善作業お願いしたいです

毎度毎度お手数をおかけしますがよろしくお願いいたします

0
Avatar
koichi

Miyawakiさん

ご確認ありがとうございます。

先に②のエラーから回答します。

「CTRLNO」の指定にルックアップフィールドを使われているかと思いますが、

その参照元となるアプリのフィールドで、「値の重複を禁止する」になっている必要があります。

参照元のアプリの設定より、フィールドの設定情報をご確認ください。

 

なお、水曜日11:17にコメントした画像から、今回のプラグインで表示内容を変更しましたので、

差異がある点については、無視していただいて問題ございません。

koichiにより編集されました
1
Avatar
koichi

Miyawakiさん

上記コメントですが、誤っているかもしれませんので、一旦無視してください。もう少し調べてみます。

また、差し支えなければ、現在のアプリの編集画面のキャプチャいただけないでしょうか?

大項目・小項目のフィールドの部分だけでも問題ございません。

1
Avatar
koichi

Miyawakiさん

二転三転して申し訳ありません。恐らく原因がわかりました。

テーブルで「工程名」をルックアップしていると思いますが、

この参照元のアプリのフィールドが「値の重複を禁止する」に設定されている必要があるようです。

参照元のアプリをご確認ください。

1
Avatar
Miyawaki

koichiさん

毎度のお引き立てならびにご対応いただき本当にありがとうございます。

「値の重複を禁止する」の件ですがやってみたのですが、うまく改善されないようです。

ここでこれまでの状況とならびに要望点を記した画像を下記に添付いたします。

要望点①と②は 昨日(8/25)8:31に問い合わせした要望点です。

要望点③と④に関しては新たに追加したものです。

画像と同等のものを作製検証していただければ、起こっている問題点が解明されるのではないかと思われます

時間は急ぎませんので、可能であれば何卒宜しくご対応お願い致します。

 

0
Avatar
koichi

Miyawakiさん

値の重複に関して、

画像を拝見したところ、テーブル内の「担当者」フィールドもルックアップですので、

その参照元のアプリのフィールドも「値の重複を禁止する」必要があります。

まとめますと、下記2つの設定により、更新ができるようになると思います。

(1)「工程名」ルックアップの参照元アプリのフィールドの「値の重複を禁止する」

(2)「担当者」ルックアップの参照元アプリのフィールドの「値の重複を禁止する」

ご確認お願いいたします。

1
Avatar
Miyawaki

koichiさん

値の重複に関して、「担当者」アプリの「値の重複を禁止する」にチェックを入れますとエラーが解決しました!

だんだん社内で使用しているエクセルのチャート表より便利なものになってきました

koichiさんの対応のおかげです!ありがとうございます

引き続きよろしくお願いいたします。

0
Avatar
koichi

Miyawakiさん

解決されたとのことで安心しました。下記についても反映できました。

①製品名(大項目の2番目)を20文字幅

③日付を日時に変更

④午前(0)をA、午後(12)をPに変更

 

プラグインは、下記URLからダウンロードできます。(ファイル名:SAMPLE_gantt_plugin_v2.1_4_20200829.zip)

https://drive.google.com/file/d/14FqieZMUk_Fx5NpAEcgSmtIIauCmjNM7/view?usp=sharing 

※サンプルのため、プラグインの動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。

 

④A/P表示ですが、0/12の時は問題ありませんが、さらに+を押した際、0/9/18や0/6/12/18の表示時も変更されます。

 こちらは制御できないため、ご了承ください。

koichiにより編集されました
1
Avatar
Miyawaki

koichiさん

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

という名目で本当に細かいところまで対応していただき、毎度のお引き立てならびにご対応いただき本当にありがとうございます。

 

あともう一つ。五月雨式で申し訳ありませんが、

チャート表示上の「工程名」の右隣に小項目をもう一項目「担当者」という項目で追加したいと考えております。

(8月26日水曜日11:40 の投稿にあるテーブル中の「担当者」という項目です)

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

それでお願いのお願いになるのですが、それを実現させた場合

どのスクリプトファイルをどのように変えたかというのがわかればご教授いただきたいです。

(例:どのファイルのスクリプトの何行目にどのようなプログラムをいれたとか・・・)

私は知識がないので、それをみてどうこうするまでには至りませんが

微力ではありまが、自分でも少し学習したいと考えております。

 

上記の要望に関しましては時間を要しても大丈夫です。

ひとまず現在のものでこれで一段落ということで運用試験に移っていきたいと思います。

 

よろしくお願いいたします

0
Avatar
Miyawaki

koichiさん

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

またお伺いしたいことがあります。

作成したガントチャートをスマホなどでモバイル表示を通してみようしたらみられないのですが、何か設定しなければいけませんでしょうか?

ご教示いただきたいです

よろしくお願いいたします

0
Avatar
koichi

Miyawakiさん

小項目の追加については、検討してみます。

 

モバイルでは、プラグインが対応していないため、ガントチャートを表示できません。

只、モバイルでも、PC版表示に切り替えると表示されるかと思います。

0
Avatar
koichi

Miyawakiさん

小項目を2つに増やしました。

プラグインの設定から、小項目の2つ目をドロップダウンで選択してください。

 

プラグインは、下記URLからダウンロードできます。(ファイル名:SAMPLE_gantt_plugin_v2.1_5_20200904.zip)

https://drive.google.com/file/d/1H-f3J61uF-HY9n7SEmZwcRpjJde7zR7x/view?usp=sharing 

※サンプルのため、プラグインの動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。

 

変更箇所を全て上げると長くなりますので、主要な部分だけ記載します。

プラグインzipを解凍すると、「desktop-ganttchart.js」というファイルがあります。

これが、ガントチャートを生成するメインのスクリプトです。

 

下記、nameとdescの指定部分が今回の大きなポイントです。

HTMLのdiv要素を使い、「大項目(name)」と「小項目(desc)」の領域をそれぞれ3分割、2分割にすることで、

見た目上、項目が5項目あるように見せるようにしました。

var ganttRecordData = {
 id: self.escapeHtml(records[i2]['$id'].value),
 // name: firstFlg ? self.escapeHtml(records[i2][GANTT_NAME].value) : '',
 name: firstFlg ? '<div class="div-gantt-name">' + self.escapeHtml(records[i2][GANTT_NAME].value) + '</div><div class="div-gantt-name2">' + self.escapeHtml(records[i2][GANTT_NAME2].value) + '</div><div class="div-gantt-name">' + self.escapeHtml(records[i2][GANTT_NAME3].value) + '</div>' : '',
 // desc: subTable[j].value[GANTT_DESC] ? self.escapeHtml(subTable[j].value[GANTT_DESC].value) : '',
 desc: subTable[j].value[GANTT_DESC] ? '<div class="div-gantt-desc">' + self.escapeHtml(subTable[j].value[GANTT_DESC].value) + '</div><div class="div-gantt-desc2">' + self.escapeHtml(subTable[j].value[GANTT_DESC2].value) + '</div>' : '',
 values: [{
  from: self.convertDateTime(subTable[j].value[GANTT_FROM].value),
  to: self.convertDateTime(subTable[j].value[GANTT_TO].value),
  desc: descGantt,
  label: descFlg ? self.escapeHtml(subTable[j].value[GANTT_DESC].value) : self.escapeHtml(records[i2][GANTT_NAME].value),
  customClass: self.escapeHtml(colorGantt),
  dataObj: {
   'url': '/k/' + kintone.app.getId() + '/show#record=' + records[i2]['$id']['value'],
   'name': records[i2][GANTT_NAME].value,
   'desc': descFlg ? self.escapeHtml(subTable[j].value[GANTT_DESC].value) : '',
   'start': subTable[j].value[GANTT_FROM].value,
   'end': subTable[j].value[GANTT_TO].value,
   'recId': records[i2]['$id'].value,
   'tableId': subTable[j].id,
   'record': records[i2],
   'GANTT_FROM': GANTT_FROM,
   'GANTT_TO': GANTT_TO,
   'lang': self.lang[self.settings.i18n]
  }
 }]
};


項目の横幅については、「addin-style.css」というファイルで設定しています。

それぞれの領域幅を割合%で設定しました。

.fn-gantt .leftPanel {
 width: 64%;
}

.fn-gantt .rightPanel {
 width: 35%;
}

.fn-gantt .leftPanel .name {
 width: 75%;
}

.fn-gantt .leftPanel .desc {
 width: 25%;
}

.fn-gantt .leftPanel .fn-label {
 width: 100%;
}

.div-gantt-name {
 display:inline-block;
 width: 25%;
}

.div-gantt-name2 {
 display:inline-block;
 width: 50%;
}

.div-gantt-name3 {
 display:inline-block;
 width: 25%;
}

.div-gantt-desc {
 display:inline-block;
 width: 50%;
}

.div-gantt-desc2 {
 display:inline-block;
 width: 50%;
}
koichiにより編集されました
0
Avatar
Miyawaki

koichiさん

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

返事遅れました。ご対応ありがとうございました。

とっても助かっております。

そしてまた運用中に要望点が出てきました。

 

koichiさんに作製していただいた「検索ボックス」である条件を表示したとき、

チャート表から日付をダイレクト編集を完了すると、日付編集は反映されているのですが、

「検索ボックス」で検索した結果がクリアされて、また始めからすべての表示に戻ります。

「検索ボックス」で検索結果を表示したまま、次の日付を編集したいのですが、そういうことは可能でしょうか?

(例:「データ」と検索して「データ」だけの表示にしたまま複数レコードの日付を順に編集していこうとするとわかるかと思われます)

 

koichiさんにはいつもお手数をおかけしますが、またご対応お願いしたいと思います。

よろしくお願いいたします。

0
サインインしてコメントを残してください。