CookBook

IM-BloomMaker のアクション「変数に一覧データから選択したものを代入する」の使い方

投稿日:

このCookBookでは、「変数に一覧データから選択したものを代入する」アクションの使用方法について紹介します。
「変数に一覧データから選択したものを代入する」アクションは、一覧データをダイアログの画面に表示し、一覧から選択したデータを任意の変数に代入することができます。
実際にサンプル画面を作成しながら「変数に一覧データから選択したものを代入する」アクションについて解説を行います。

完成イメージ

このCookBookで作成するサンプル画面です。

動作内容は以下のとおりです。

  1. 「Open Dialog」ボタンをクリックすると、一覧データを表示しているダイアログが開きます。
  2. 一覧からデータを選択すると、元の画面に選択したデータが表示されます。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

IM-BloomMaker のインポート機能からインポートしてください。
インポート機能の詳細は以下のドキュメントをご参照ください。

サンプルに含まれる定義情報は以下のとおりです。

種類 定義名 補足説明
コンテンツ im_cookbook_163551 アプリケーション画面を管理するための定義情報です。
ルーティング定義 im_cookbook_163551 アプリケーション画面へアクセスするときに利用する定義情報です。

レシピ

このレシピでは、「変数に一覧データから選択したものを代入する」アクションを使用する画面の作り方を紹介します。

  1. コンテンツカテゴリを登録する
  2. コンテンツを登録する
  3. デザイン編集を行う
  4. ルーティングカテゴリを登録する
  5. ルーティングを登録する
  6. 実行画面で確認する

コンテンツカテゴリを登録する

  1. 「サイトマップ」から、「BloomMaker」 - 「コンテンツ一覧」をクリックします。
  2. 「カテゴリ新規作成」をクリックします。
  3. 以下のように設定し、「登録」ボタンをクリックします。
    • カテゴリID:im_cookbook
    • カテゴリ名:im_cookbook

コンテンツを登録する

  1. 「サイトマップ」から、「BloomMaker」 - 「コンテンツ一覧」をクリックします。
  2. コンテンツツリーから「im_cookbook」カテゴリを選択します。
  3. 「コンテンツ新規作成」をクリックします。
  4. 以下のように設定し、「登録」ボタンをクリックします。

    • カテゴリID:im_cookbook_163551
    • カテゴリ名:im_cookbook_163551

デザイン編集を行う

  1. 前項で登録したコンテンツを選択します。
  2. 「デザイン編集」ボタンをクリックします。

変数の定義

一覧データの変数と、選択したデータを代入する変数を定義します。

  1. 「変数」タブをクリックします。
  2. プルダウンの「変数」が選択されていることを確認し、「JSON」アイコンをクリックします。
  3. 「JSONエディタ」に以下のJSONを貼り付け、「決定」ボタンをクリックします。

  4. 変数「resultData」の「date」を選択し、「編集」アイコンをクリックします。

  5. 以下のように設定します。
    • 値の型:日付・時刻
  6. 変数「listData」の「date」を選択し、「編集」アイコンをクリックします。
  7. 以下のように設定します。
    • 値の型:日付・時刻
  8. 「$variable」を選択し、「JSON」アイコンをクリックします。
  9. 「JSONエディタ」に以下のJSONを貼り付け、「決定」ボタンをクリックします。

アクションの作成

「変数に一覧データから選択したものを代入する」アクションを作成します。

  1. 「アクション」タブをクリックします。
  2. 「作成」アイコンをクリックします。
  3. 「変数に一覧データから選択したものを代入する」アクションをドラッグ&ドロップで配置します。
  4. 以下のように設定し、「決定」ボタンをクリックします。
    • アクション名:item_select_action
    • 変数:$variable.resultData
    • 一覧データ:$variable.listData
    • カラム:
      カラムのキー カラムの表示文字列
      string StringColumn
      number NumberColumn
      date DateColumn
      boolean BooleanColumn

画面の作成

  1. エレメントパレットから、「レイアウト(imui)」 - 「フォームコンテナ」をドラッグ&ドロップで配置します。
  2. 「フォームコンテナ」の内側にある「見出しレベル2」を選択します。
  3. 「プロパティ」タブをクリックします。
    • 「エレメント固有」プロパティを以下のように設定します。
      • textContent(固定値):Item Select
  4. 「フォームコンテナ」の内側にある「入力フォーム用テーブル」を選択します。
  5. 「プロパティ」タブをクリックします。
    • 「エレメント固有」プロパティを以下のように設定します。
      • rowCount(固定値):4
  6. 「入力フォーム用テーブル」の一番上の見出しセル部分を選択します。
  7. プロパティを設定します。
    • 「エレメント固有」プロパティを以下のように設定します。
      • align:left
      • textContent(固定値):string
  8. 同様の手順で、他の見出しセル部分のプロパティを設定します。
    • 「エレメント固有」プロパティを以下のように設定します。
      • align:left
      • textContent(固定値):number
      • textContent(固定値):date
      • textContent(固定値):boolean
  9. エレメントパレットから、「汎用」 - 「ラベル」を「入力フォーム用テーブル」の各データセル部分にドラッグ&ドロップで配置します。
  10. 配置した一番上のラベルを選択します。
  11. プロパティを設定します。
    • 「エレメント固有」プロパティを以下のように設定します。
      • textContent(変数値):$variable.result.string
  12. 同様の手順で、他のラベルのプロパティを設定します。
    • 「エレメント固有」プロパティを、以下のように設定します。
      • textContent(変数値):$variable.result.number
      • textContent(変数値):$variable.result.date
      • textContent(変数値):$variable.result.boolean
  13. エレメントパレットから、「レイアウト」 - 「ボックス」を「フォームコンテナ」の内側、「見出しレベル2」の下にドラッグ&ドロップで配置します。
  14. 「プロパティ」タブをクリックします。

    • 「テキストスタイル」プロパティを以下のように設定します。
      • 横揃え:center
    • 「余白」プロパティを以下のように設定します。
      • 外余白(下):50px

  15. エレメントパレットから、「フォーム部品(imui)」 - 「ボタン」を「ボックス」の内側にドラッグ&ドロップで配置します。
  16. 「プロパティ」タブをクリックします。

    • 「エレメント固有」プロパティを以下のように設定します。
      • value(固定値):Open Dialog
    • 「イベント」プロパティを以下のように設定します。
      • クリック時:item_select_action

  17. ツールバーから「上書き保存」アイコンをクリックし、デザインを保存します。

ルーティングカテゴリを登録する

  1. 「サイトマップ」から、「BloomMaker」 - 「ルーティング定義一覧」をクリックします。
  2. 「カテゴリ新規作成」をクリックします。
  3. 以下のように設定し、「登録」ボタンをクリックします。

    • カテゴリID:im_cookbook
    • カテゴリ名:im_cookbook

ルーティングを登録する

  1. 「サイトマップ」から、「BloomMaker」 - 「ルーティング定義一覧」をクリックします。
  2. ルーティングツリーから「im_cookbook」カテゴリを選択します。
  3. 「ルーティング定義一覧」画面の「ルーティング新規作成」をクリックします。
  4. 以下のように設定し、「登録」ボタンをクリックします。

    • ルーティングID:im_cookbook_163551
    • コンテンツ:im_cookbook_163551
      検索ボタンをクリックして「im_cookbook_163551」を選択します。
    • URL:im_cookbook/163551
    • ルーティング名:im_cookbook_163551

  5. 登録完了後、「認可URI」の「歯車」アイコンをクリックします。
  6. 「認可設定」画面で必要な認可設定を行います。
    認可設定の詳細は以下のドキュメントをご参照ください。
    intra-mart Accel Platform テナント管理者操作ガイド - 認可を設定する

実行画面で確認する

  1. デザイン編集を行った画面を表示します。
    「http://localhost:8080/imart/im_cookbook/163551」にアクセスし、画面が表示されることを確認します。

    • ベースURLである以下の部分は環境に合わせて適宜変更してください。
      http://localhost:8080/imart

  2. 「Open Dialog」ボタンをクリックします。
    デザイン編集時に作成したアクション「item_select_action」が実行され、ダイアログが表示されます。
  3. 一覧データから以下のデータを選択します。

    StringColumn NumberColumn DateColumn BooleanColumn
    value7 700 2019/07/07 true
    • 一覧データは文字列、数値、日付での絞り込みが可能です。
    • 一覧選択画面のデータを選択せずにダイアログを閉じた場合は、変数の代入がキャンセルされます。

  4. 元の画面に選択したデータが表示されていることを確認します。

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

祝日や会社の予定を設定したカレンダーを作成する

このCookbookでは、祝日や独自の予定を設定したカレンダーを活用する方法について紹介します。テナント管理者はカレンダーの作成、メンテナンスを行えます。また、テナントのデフォルトカレンダーを設定でき …

no image

Cassandra の Docker を作成する。

この CookBook では、Cassandra の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 Cassandra の Docker イメージを作成します 実行し …

no image

【ViewCreator】検索にヒットした件数を取得する関数の作り方。

このCookBookでは、ViewCreatorで検索にヒットした件数を取得する関数の作り方についてご紹介します。 ユーザ定義関数についての詳細は下記のドキュメントを参照してください。 ViewCre …

no image

ViewCreatorの計算式で日付データを操作する例

ViewCreatorを利用するとデータベース等に格納されているデータを簡単に画面に表示することが出来ます。 ViewCreatorについて – intra-mart Accel Platform V …

no image

未完了案件・完了案件を全て削除する方法

このCookBookでは、LogicDesignerを利用してワークフローの未完了案件・完了案件を一括削除する方法を紹介します。 開発環境のお掃除に役立つTipsです。 削除した案件は復元することがで …

まだデータがありません。

RSSRSSRSSRSS