このCookBookでは、「複数選択組織検索ダイアログを表示する」アクションの使用方法について紹介します。
「複数選択組織検索ダイアログを表示する」アクションは、共通マスタから取得した組織情報をダイアログの画面に表示し、ダイアログから選択したデータを任意の変数に代入することができます。
実際にサンプル画面を作成しながら「複数選択組織検索ダイアログを表示する」アクションについて解説を行います。
完成イメージ
このCookBookで作成するサンプル画面です。
動作内容は以下のとおりです。
- 「組織選択」ボタンをクリックすると、複数選択組織検索ダイアログが開きます。
-
複数選択組織検索ダイアログからデータを選択すると、元の画面に選択したデータが表示されます。
完成サンプル
以下の完成サンプルをダウンロードしてご活用ください。
- コンテンツ / ルーティング定義 : im_cookbook_165710_bloommaker.zip
IM-BloomMaker のインポート機能からインポートしてください。
インポート機能の詳細は以下のドキュメントをご参照ください。
サンプルに含まれる定義情報は以下のとおりです。
| 種類 | 定義名 | 補足説明 |
|---|---|---|
| コンテンツ | im_cookbook_165710 | アプリケーション画面を管理するための定義情報です。 |
| ルーティング定義 | im_cookbook_165710 | アプリケーション画面へアクセスするときに利用する定義情報です。 |
レシピ
このレシピでは、「複数選択組織検索ダイアログを表示する」アクションを使用する画面の作り方を紹介します。
- コンテンツカテゴリを登録する
- コンテンツを登録する
- デザイン編集を行う
- ルーティングカテゴリを登録する
- ルーティングを登録する
- 実行画面で確認する
コンテンツカテゴリを登録する
- 「サイトマップ」から、「BloomMaker」 - 「コンテンツ一覧」をクリックします。
- 「カテゴリ新規作成」をクリックします。
- 以下のように設定し、「登録」ボタンをクリックします。
- カテゴリID：
im_cookbook - カテゴリ名：
im_cookbook
- カテゴリID：
コンテンツを登録する
- 「サイトマップ」から、「BloomMaker」 - 「コンテンツ一覧」をクリックします。
- コンテンツツリーから「im_cookbook」カテゴリを選択します。
- 「コンテンツ新規作成」をクリックします。
- 以下のように設定し、「登録」ボタンをクリックします。
- カテゴリID：
im_cookbook_165710 - カテゴリ名：
im_cookbook_165710
- カテゴリID：
デザイン編集を行う
- 前項で登録したコンテンツを選択します。
- 「デザイン編集」ボタンをクリックします。
変数の定義
一覧データの変数と、選択したデータを代入する変数を定義します。
- 「変数」タブをクリックします。
- プルダウンの「変数」が選択されていることを確認し、「JSON」アイコンをクリックします。
- 「JSONエディタ」に以下のJSONを貼り付け、「決定」ボタンをクリックします。
1234567{"date": null,"companyCdList": [],"organizationSetCdList": [],"organizationCdList": [],"organizationNameList": []}
- 変数の「date」を選択し、「編集」アイコンをクリックします。
- 以下のように設定します。
- 値の型：
日付・時刻
- 値の型：
- 変数の「companyCdList」を選択し、「編集」アイコンをクリックします。
- 以下のように設定します。
- 値の型：
文字列
- 値の型：
- 変数の「companyCdList」を選択し、「編集」アイコンをクリックします。
- 以下のように設定します。
- 値の型：
文字列
- 値の型：
- 変数の「organizationSetCdList」を選択し、「編集」アイコンをクリックします。
- 以下のように設定します。
- 値の型：
文字列
- 値の型：
- 変数の「organizationCdList」を選択し、「編集」アイコンをクリックします。
- 以下のように設定します。
- 値の型：
文字列
- 値の型：
- 変数の「organizationNameList」を選択し、「編集」アイコンをクリックします。
- 以下のように設定します。
- 値の型：
文字列
- 値の型：
アクションの作成
「複数選択組織検索ダイアログを表示する」アクションを作成します。
- 「アクション」タブをクリックします。
- 「新規作成」アイコンをクリックします。
- 「複数選択組織検索ダイアログを表示する」アクションをドラッグ＆ドロップで配置します。
- 以下のように設定し、「決定」ボタンをクリックします。
- 検索基準日：
$variable.date - 会社コード：
$variable.companyCdList - 組織セットコード：
$variable.organizationSetCdList - 組織コード：
$variable.organizationCdList - 組織名：
$variable.organizationNameList
- 検索基準日：
当該 CookBook 内で作成した変数
date の値は null ですが、検索基準日を指定したい場合は date 変数の値を指定して利用してください。
画面の作成
- エレメントパレットから、「フォーム部品」 - 「ボタン」をドラッグ＆ドロップで配置します。
- 「プロパティ」タブをクリックします。
- 「エレメント固有」プロパティを以下のように設定します。
- value（固定値）：
組織選択
- value（固定値）：
- 「イベント」プロパティを以下のように設定します。
- クリック時： 先ほど作成したアクション
- 「エレメント固有」プロパティを以下のように設定します。
- エレメントパレットから、「レイアウト」 - 「見出しレベル3」をドラッグ＆ドロップで配置します。
- 「プロパティ」タブをクリックします。
- 「エレメント固有」プロパティを以下のように設定します。
- textContent（固定値）：
検索結果一覧
- textContent（固定値）：
- 「エレメント固有」プロパティを以下のように設定します。
- エレメントパレットから、「繰り返し」 - 「テーブル（繰り返し）」をドラッグ＆ドロップで配置します。
- 「プロパティ」タブをクリックします。
- 「エレメント固有」プロパティを以下のように設定します。
- columnCount：
4 - list：
$variable.companyCdList
- columnCount：
- 「エレメント固有」プロパティを以下のように設定します。
- 「テーブル（繰り返し）」の一番上の見出しセル部分に「汎用」 - 「ラベル」をドラッグ＆ドロップで配置します。
- 「プロパティ」タブをクリックします。
- 「エレメント固有」プロパティを以下のように設定します。
- textContent（固定値）：
会社コード
- textContent（固定値）：
- 「エレメント固有」プロパティを以下のように設定します。
- 同様の手順で、他の見出しセル部分に「汎用」 - 「ラベル」をドラッグ＆ドロップで配置しプロパティを設定します。
- 「エレメント固有」プロパティを以下のように設定します。
- textContent（固定値）：
組織セットコード - textContent（固定値）：
組織コード - textContent（固定値）：
組織名
- textContent（固定値）：
- 「エレメント固有」プロパティを以下のように設定します。
- 「テーブル（繰り返し）」のデータ部分に「汎用」 - 「ラベル」をドラッグ＆ドロップで配置します。
- 「プロパティ」タブをクリックします。
- 「エレメント固有」プロパティを以下のように設定します。
- textContent（変数値）：
$variable.companyCdList[$index]
- textContent（変数値）：
- 「エレメント固有」プロパティを以下のように設定します。
- 同様の手順で、他のデータ部分に「汎用」 - 「ラベル」をドラッグ＆ドロップで配置しプロパティを設定します。
- 「エレメント固有」プロパティを以下のように設定します。
- textContent（変数値）：
$variable.organizationSetCdList[$index] - textContent（変数値）：
$variable.organizationCdList[$index] - textContent（変数値）：
$variable.organizationNameList[$index]
- textContent（変数値）：
- 「エレメント固有」プロパティを以下のように設定します。
- ツールバーから「上書き保存」アイコンをクリックし、デザインを保存します。
ルーティングカテゴリを登録する
- 「サイトマップ」から、「BloomMaker」 - 「ルーティング定義一覧」をクリックします。
- 「カテゴリ新規作成」をクリックします。
- 以下のように設定し、「登録」ボタンをクリックします。
- カテゴリID：
im_cookbook - カテゴリ名：
im_cookbook
- カテゴリID：
ルーティングを登録する
- 「サイトマップ」から、「BloomMaker」 - 「ルーティング定義一覧」をクリックします。
- ルーティングツリーから「im_cookbook」カテゴリを選択します。
- 「ルーティング定義一覧」画面の「ルーティング新規作成」をクリックします。
-
以下のように設定し、「登録」ボタンをクリックします。
- ルーティングID：
im_cookbook_165710 - コンテンツ：
im_cookbook_165710
検索ボタンをクリックして「im_cookbook_165710」を選択します。 - URL：
im_cookbook/165710 - ルーティング名：
im_cookbook_165710
- ルーティングID：
- 登録完了後、「認可URI」の「歯車」アイコンをクリックします。
-
「認可設定」画面で必要な認可設定を行います。
認可設定の詳細は以下のドキュメントをご参照ください。
intra-mart Accel Platform テナント管理者操作ガイド - 認可を設定する
実行画面で確認する
-
デザイン編集を行った画面を表示します。
「http://localhost:8080/imart/im_cookbook/165710」にアクセスし、画面が表示されることを確認します。- ベースURLである以下の部分は環境に合わせて適宜変更してください。
http://localhost:8080/imart
- ベースURLである以下の部分は環境に合わせて適宜変更してください。
- 「組織選択」ボタンをクリックします。
デザイン編集時に作成したアクションが実行され、組織検索ダイアログが表示されます。- データは文字列での絞り込みが可能です。
- データを選択せずにダイアログを閉じた場合は、変数の代入がキャンセルされます。
- 組織データから以下のデータを選択します。
- 元の画面に選択したデータが表示されていることを確認します。
補足
「複数選択組織検索ダイアログを表示する」アクションに設定するパラメータについて補足します。
本CookBookではアクションに設定するパラメータを以下のように設定しました。
- 検索基準日：
$variable.date - 会社コード：
$variable.companyCdList - 組織セットコード：
$variable.organizationSetCdList - 組織コード：
$variable.organizationCdList - 組織名：
$variable.organizationNameList
上記パラメータで検索基準日は値が設定されていない場合、現在日時で有効な組織を対象として検索します。
会社コード、組織セットコード、組織コード、組織名のパラメータはダイアログで選択した値を格納する変数となります。
このように「複数選択組織検索ダイアログを表示する」アクションでは検索に必要となるパラメータ、選択結果を格納するパラメータがあります。
