前提
- intra-mart Accel Platform
- IM-BIS導入環境
- IM-BIS / IM-FormaDesiner
参考資料
- IM-BISで複数のセレクトボックスを連動させて利用する方法
- 上記を参考にドリルダウン処理を実装した
やりたいこと
- 会社 ＞ 組織1階層目 ＞ 組織2階層目 組織階層で絞り込むUI
- こんな具合の動作にしたい
- 組織を選択しない、組織未所属もありうるので空白行も選びたい
サンプルファイル
- サンプルファイルをアップロードしたので参考にどうぞ
Forma アプリケーション定義 データソース定義のエクスポートファイル - intra-martのサンプルがインストールされている環境だとキレイに出るはず
- 2018summerで作ったのでそれより前のバージョンだとインポートエラーになるかも
ポイント
初期表示イベント設定。各セレクトボックスに外部連携設定
登録データ編集時、参照時の初期表示時に登録データが表示されるようにするために設定している。
-
アイテムイベント設定。会社セレクトボックスと組織階層１セレクトボックス入力イベント設定
入力イベントで下位組織セレクトボックスをクリアしてから外部連携でセレクトボックスを設定する。
下位組織セレクトボックスをクリアするスクリプトは下記のとおり
組織階層1セレクトボックス入力_カスタムスクリプト.js
// 組織階層1セレクトボックス入力 カスタムスクリプト
// フィールド識別IDを指定
var input_id = "dep2_selectbox";
var args = {};
// Option項目設定
args.master = {};
args.master[input_id] = [];
// 空行設定
var emprow = {};
emprow["value_" + input_id] = "";
emprow["key_" + input_id] = "";
args.master[input_id].push(emprow);
// master変更時の初期値クリア
$('[name="escape_'+ input_id + '"]').val("");
// 選択値設定
args.data = {};
args.data[input_id] = "";
formaItems.product_80_selectbox.setItemData[input_id](args);
試行錯誤の経緯
- セレクトボックス先頭に空白行を挿入したところ問題発生
- 空白行選択時に下位組織セレクトボックス内容がそのままになる
- 回避方法検討 変更時に下位のセレクトボックス内容をすべてクリアすることで対応できるはず
- カスタムスクリプトでセレクトボックスクリア処理をやろうとするが分からない
クリア処理調査＆実装する
調査した結果が下記の記事になる
IM-FormaDesigner / IM-BIS セレクトボックス Option値をAPIで設定する -
軽く動作させると謎の動きをするので直す
- 再現手順を下記に示す
- 登録ボタン後、修正時発生
- 階層1を空白にすると階層2も空白になる
- 階層1を元の値にすると階層2も元の値になる 階層2は空白であってほしい
- 修正方法の検討
- 元の値をどこかに保持しているっぽいのでhtmlを捜索
- escape_%フィールド識別ID% というnameのhidden発見
- こいつをクリアすると元に戻らないことを確認したので、適時クリアする
- formaのソースを確認すると初期表示時に選択値に設定するためのもので、これが暴発しているよう 初期表示以外には使わないのでクリアして問題なしと判断
- 再現手順を下記に示す
上記調査結果を組み合わせてintra-martサンプル導入環境で動作するサンプル作成
愚痴
簡単かと思ったら妙に大変。なぜ空白行選択時に外部連携データが更新されないのだ。。。
やはり下記の記事のとおりの大変さである
IM-FormaDesigner／IM-BISでのアプリケーション作成工数は限定条件下でしか低コストにならない
本当はグリッドテーブルでドリルダウンサンプルを作る記事を書きたくて、その前段階としてこの記事のサンプルを用意したのだけど、思った以上の面倒くささだった。。。
グリッドテーブルはもっと酷くなる。ツライ