このCookBookでは、「変数に一覧データから選択したものを代入する」アクションの使用方法について紹介します。 「変数に一覧データから選択したものを代入する」アクションは、一覧データをダイアログの画面に表示し、一覧から選択したデータを任意の変数に代入することができます。 実際にサンプル画面を作成しながら「変数に一覧データから選択したものを代入する」アクションについて解説を行います。
完成イメージ
このCookBookで作成するサンプル画面です。 
動作内容は以下のとおりです。
- 「Open Dialog」ボタンをクリックすると、一覧データを表示しているダイアログが開きます。
- 一覧からデータを選択すると、元の画面に選択したデータが表示されます。
完成サンプル
以下の完成サンプルをダウンロードしてご活用ください。
- コンテンツ / ルーティング定義 :im_cookbook_163551_bloommaker.zip
IM-BloomMaker のインポート機能からインポートしてください。 インポート機能の詳細は以下のドキュメントをご参照ください。
サンプルに含まれる定義情報は以下のとおりです。
| 種類 | 定義名 | 補足説明 |
|---|---|---|
| コンテンツ | im_cookbook_163551 | アプリケーション画面を管理するための定義情報です。 |
| ルーティング定義 | im_cookbook_163551 | アプリケーション画面へアクセスするときに利用する定義情報です。 |
レシピ
このレシピでは、「変数に一覧データから選択したものを代入する」アクションを使用する画面の作り方を紹介します。
- コンテンツカテゴリを登録する
- コンテンツを登録する
- デザイン編集を行う
- ルーティングカテゴリを登録する
- ルーティングを登録する
- 実行画面で確認する
コンテンツカテゴリを登録する
-
「サイトマップ」から、「BloomMaker」 - 「コンテンツ一覧」をクリックします。
-
「カテゴリ新規作成」をクリックします。
-
以下のように設定し、「登録」ボタンをクリックします。
- カテゴリID：
im_cookbook - カテゴリ名：
im_cookbook
- カテゴリID：
コンテンツを登録する
-
「サイトマップ」から、「BloomMaker」 - 「コンテンツ一覧」をクリックします。
-
コンテンツツリーから「im_cookbook」カテゴリを選択します。
-
「コンテンツ新規作成」をクリックします。
-
以下のように設定し、「登録」ボタンをクリックします。
- コンテンツID：
im_cookbook_163551 - コンテンツ名：
im_cookbook_163551
- コンテンツID：
デザイン編集を行う
- 前項で登録したコンテンツを選択します。
- 「デザイン編集」ボタンをクリックします。
変数の定義
一覧データの変数と、選択したデータを代入する変数を定義します。
-
「変数」タブをクリックします。
-
プルダウンの「変数」が選択されていることを確認し、「JSON」アイコンをクリックします。
-
「JSONエディタ」に以下のJSONを貼り付け、「決定」ボタンをクリックします。
{ "resultData": { "string": "value", "number": 0, "date": null, "boolean": true }, "listData": [ { "string": "value", "number": 0, "date": null, "boolean": true } ] }
-
変数「resultData」の「date」を選択し、「編集」アイコンをクリックします。
-
以下のように設定します。
- 値の型：
日付・時刻
- 値の型：
-
変数「listData」の「date」を選択し、「編集」アイコンをクリックします。
-
以下のように設定します。
- 値の型：
日付・時刻
- 値の型：
-
「$variable」を選択し、「JSON」アイコンをクリックします。
-
「JSONエディタ」に以下のJSONを貼り付け、「決定」ボタンをクリックします。
{ "resultData": { "string": null, "number": null, "date": null, "boolean": null }, "listData": [ { "string": "value1", "number": 100, "date": "2019-01-01T00:00:00.000Z", "boolean": true }, { "string": "value2", "number": 200, "date": "2019-02-02T00:00:00.000Z", "boolean": false }, { "string": "value3", "number": 300, "date": "2019-03-03T00:00:00.000Z", "boolean": true }, { "string": "value4", "number": 400, "date": "2019-04-04T00:00:00.000Z", "boolean": false }, { "string": "value5", "number": 500, "date": "2019-05-05T00:00:00.000Z", "boolean": true }, { "string": "value6", "number": 600, "date": "2019-06-06T00:00:00.000Z", "boolean": false }, { "string": "value7", "number": 700, "date": "2019-07-07T00:00:00.000Z", "boolean": true }, { "string": "value8", "number": 800, "date": "2019-08-08T00:00:00.000Z", "boolean": false }, { "string": "value9", "number": 900, "date": "2019-09-09T00:00:00.000Z", "boolean": true }, { "string": "value10", "number": 1000, "date": "2019-10-10T00:00:00.000Z", "boolean": false }, { "string": "value11", "number": 1100, "date": "2019-11-11T00:00:00.000Z", "boolean": true }, { "string": "value12", "number": 1200, "date": "2019-12-12T00:00:00.000Z", "boolean": false } ] }
アクションの作成
「変数に一覧データから選択したものを代入する」アクションを作成します。
-
「アクション」タブをクリックします。
-
「作成」アイコンをクリックします。
-
「変数に一覧データから選択したものを代入する」アクションをドラッグ＆ドロップで配置します。
-
以下のように設定し、「決定」ボタンをクリックします。
-
アクション名：
item_select_action -
変数：
$variable.resultData -
一覧データ：
$variable.listData -
カラム：
カラムのキー カラムの表示文字列 string StringColumn number NumberColumn date DateColumn boolean BooleanColumn
-
画面の作成
-
エレメントパレットから、「レイアウト（imui）」 - 「フォームコンテナ」をドラッグ＆ドロップで配置します。
-
「フォームコンテナ」の内側にある「見出しレベル2」を選択します。
-
「プロパティ」タブをクリックします。
- 「エレメント固有」プロパティを以下のように設定します。
- textContent（固定値）：
Item Select
- textContent（固定値）：
- 「エレメント固有」プロパティを以下のように設定します。
-
「フォームコンテナ」の内側にある「入力フォーム用テーブル」を選択します。
-
「プロパティ」タブをクリックします。
- 「エレメント固有」プロパティを以下のように設定します。
- rowCount（固定値）：
4
- rowCount（固定値）：
- 「エレメント固有」プロパティを以下のように設定します。
-
「入力フォーム用テーブル」の一番上の見出しセル部分を選択します。
-
プロパティを設定します。
- 「エレメント固有」プロパティを以下のように設定します。
- align：
left - textContent（固定値）：
string
- align：
- 「エレメント固有」プロパティを以下のように設定します。
-
同様の手順で、他の見出しセル部分のプロパティを設定します。
- 「エレメント固有」プロパティを以下のように設定します。
- align：
left - textContent（固定値）：
number - textContent（固定値）：
date - textContent（固定値）：
boolean
- align：
- 「エレメント固有」プロパティを以下のように設定します。
-
エレメントパレットから、「汎用」 - 「ラベル」を「入力フォーム用テーブル」の各データセル部分にドラッグ＆ドロップで配置します。
-
配置した一番上のラベルを選択します。
-
プロパティを設定します。
- 「エレメント固有」プロパティを以下のように設定します。
- textContent（変数値）：
$variable.result.string
- textContent（変数値）：
- 「エレメント固有」プロパティを以下のように設定します。
-
同様の手順で、他のラベルのプロパティを設定します。
- 「エレメント固有」プロパティを、以下のように設定します。
- textContent（変数値）：
$variable.result.number - textContent（変数値）：
$variable.result.date - textContent（変数値）：
$variable.result.boolean
- textContent（変数値）：
- 「エレメント固有」プロパティを、以下のように設定します。
-
エレメントパレットから、「レイアウト」 - 「ボックス」を「フォームコンテナ」の内側、「見出しレベル2」の下にドラッグ＆ドロップで配置します。
-
「プロパティ」タブをクリックします。
- 「テキストスタイル」プロパティを以下のように設定します。
- 横揃え：
center
- 横揃え：
- 「余白」プロパティを以下のように設定します。
- 外余白（下）：
50px
- 外余白（下）：
- 「テキストスタイル」プロパティを以下のように設定します。
-
エレメントパレットから、「フォーム部品（imui）」 - 「ボタン」を「ボックス」の内側にドラッグ＆ドロップで配置します。
-
「プロパティ」タブをクリックします。
- 「エレメント固有」プロパティを以下のように設定します。
- value（固定値）：
Open Dialog
- value（固定値）：
- 「イベント」プロパティを以下のように設定します。
- クリック時：
item_select_action
- クリック時：
- 「エレメント固有」プロパティを以下のように設定します。
-
ツールバーから「上書き保存」アイコンをクリックし、デザインを保存します。
ルーティングカテゴリを登録する
-
「サイトマップ」から、「BloomMaker」 - 「ルーティング定義一覧」をクリックします。
-
「カテゴリ新規作成」をクリックします。
-
以下のように設定し、「登録」ボタンをクリックします。
- カテゴリID：
im_cookbook - カテゴリ名：
im_cookbook
- カテゴリID：
ルーティングを登録する
-
「サイトマップ」から、「BloomMaker」 - 「ルーティング定義一覧」をクリックします。
-
ルーティングツリーから「im_cookbook」カテゴリを選択します。
-
「ルーティング定義一覧」画面の「ルーティング新規作成」をクリックします。
-
以下のように設定し、「登録」ボタンをクリックします。
- ルーティングID：
im_cookbook_163551 - コンテンツ：
im_cookbook_163551検索ボタンをクリックして「im_cookbook_163551」を選択します。 - URL：
im_cookbook/163551 - ルーティング名：
im_cookbook_163551
- ルーティングID：
-
登録完了後、「認可URI」の「歯車」アイコンをクリックします。
-
「認可設定」画面で必要な認可設定を行います。 認可設定の詳細は以下のドキュメントをご参照ください。 intra-mart Accel Platform テナント管理者操作ガイド - 認可を設定する
実行画面で確認する
-
デザイン編集を行った画面を表示します。 「http://localhost:8080/imart/im\_cookbook/163551」にアクセスし、画面が表示されることを確認します。
- ベースURLである以下の部分は環境に合わせて適宜変更してください。
http://localhost:8080/imart
- ベースURLである以下の部分は環境に合わせて適宜変更してください。
-
「Open Dialog」ボタンをクリックします。 デザイン編集時に作成したアクション「item_select_action」が実行され、ダイアログが表示されます。
-
一覧データから以下のデータを選択します。
StringColumn NumberColumn DateColumn BooleanColumn value7 700 2019/07/07 true - 一覧データは文字列、数値、日付での絞り込みが可能です。
- 一覧選択画面のデータを選択せずにダイアログを閉じた場合は、変数の代入がキャンセルされます。
-
元の画面に選択したデータが表示されていることを確認します。
