CookBook

IM-BloomMaker のアクション「複数選択組織検索ダイアログを表示する」の使い方

投稿日:2019-12-16 更新日:

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

完成イメージ

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

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

  1. 「組織選択」ボタンをクリックすると、複数選択組織検索ダイアログが開きます。

  2. 複数選択組織検索ダイアログからデータを選択すると、元の画面に選択したデータが表示されます。

完成サンプル

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

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

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

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

レシピ

このレシピでは、「複数選択組織検索ダイアログを表示する」アクションを使用する画面の作り方を紹介します。

  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_165710
    • カテゴリ名:im_cookbook_165710

デザイン編集を行う

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

変数の定義

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

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

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

  5. 以下のように設定します。
    • 値の型:日付・時刻
  6. 変数の「companyCdList」を選択し、「編集」アイコンをクリックします。
  7. 以下のように設定します。
    • 値の型:文字列
  8. 変数の「companyCdList」を選択し、「編集」アイコンをクリックします。
  9. 以下のように設定します。
    • 値の型:文字列
  10. 変数の「organizationSetCdList」を選択し、「編集」アイコンをクリックします。
  11. 以下のように設定します。
    • 値の型:文字列
  12. 変数の「organizationCdList」を選択し、「編集」アイコンをクリックします。
  13. 以下のように設定します。
    • 値の型:文字列
  14. 変数の「organizationNameList」を選択し、「編集」アイコンをクリックします。
  15. 以下のように設定します。
    • 値の型:文字列

アクションの作成

「複数選択組織検索ダイアログを表示する」アクションを作成します。

  1. 「アクション」タブをクリックします。
  2. 「新規作成」アイコンをクリックします。
  3. 「複数選択組織検索ダイアログを表示する」アクションをドラッグ&ドロップで配置します。
  4. 以下のように設定し、「決定」ボタンをクリックします。
    • 検索基準日:$variable.date
    • 会社コード:$variable.companyCdList
    • 組織セットコード:$variable.organizationSetCdList
    • 組織コード:$variable.organizationCdList
    • 組織名:$variable.organizationNameList
検索基準日の指定は任意です。
当該 CookBook 内で作成した変数 date の値は null ですが、検索基準日を指定したい場合は date 変数の値を指定して利用してください。

画面の作成

  1. エレメントパレットから、「フォーム部品」 - 「ボタン」をドラッグ&ドロップで配置します。
  2. 「プロパティ」タブをクリックします。
    • 「エレメント固有」プロパティを以下のように設定します。
      • value(固定値): 組織選択
    • 「イベント」プロパティを以下のように設定します。
      • クリック時: 先ほど作成したアクション
  3. エレメントパレットから、「レイアウト」 - 「見出しレベル3」をドラッグ&ドロップで配置します。
  4. 「プロパティ」タブをクリックします。
    • 「エレメント固有」プロパティを以下のように設定します。
      • textContent(固定値): 検索結果一覧
  5. エレメントパレットから、「繰り返し」 - 「テーブル(繰り返し)」をドラッグ&ドロップで配置します。
  6. 「プロパティ」タブをクリックします。
    • 「エレメント固有」プロパティを以下のように設定します。
      • columnCount: 4
      • list: $variable.companyCdList
  7. 「テーブル(繰り返し)」の一番上の見出しセル部分に「汎用」 - 「ラベル」をドラッグ&ドロップで配置します。
  8. 「プロパティ」タブをクリックします。
    • 「エレメント固有」プロパティを以下のように設定します。
      • textContent(固定値):会社コード
  9. 同様の手順で、他の見出しセル部分に「汎用」 - 「ラベル」をドラッグ&ドロップで配置しプロパティを設定します。
    • 「エレメント固有」プロパティを以下のように設定します。
      • textContent(固定値):組織セットコード
      • textContent(固定値):組織コード
      • textContent(固定値):組織名
  10. 「テーブル(繰り返し)」のデータ部分に「汎用」 - 「ラベル」をドラッグ&ドロップで配置します。
  11. 「プロパティ」タブをクリックします。
    • 「エレメント固有」プロパティを以下のように設定します。
      • textContent(変数値):$variable.companyCdList[$index]
  12. 同様の手順で、他のデータ部分に「汎用」 - 「ラベル」をドラッグ&ドロップで配置しプロパティを設定します。
    • 「エレメント固有」プロパティを以下のように設定します。
      • textContent(変数値):$variable.organizationSetCdList[$index]
      • textContent(変数値):$variable.organizationCdList[$index]
      • textContent(変数値):$variable.organizationNameList[$index]
  13. ツールバーから「上書き保存」アイコンをクリックし、デザインを保存します。

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

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

ルーティングを登録する

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

    • ルーティングID:im_cookbook_165710
    • コンテンツ:im_cookbook_165710
      検索ボタンをクリックして「im_cookbook_165710」を選択します。
    • URL:im_cookbook/165710
    • ルーティング名:im_cookbook_165710
  5. 登録完了後、「認可URI」の「歯車」アイコンをクリックします。

  6. 「認可設定」画面で必要な認可設定を行います。
    認可設定の詳細は以下のドキュメントをご参照ください。
    intra-mart Accel Platform テナント管理者操作ガイド - 認可を設定する

実行画面で確認する

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

    • ベースURLである以下の部分は環境に合わせて適宜変更してください。
      http://localhost:8080/imart
  2. 「組織選択」ボタンをクリックします。
    デザイン編集時に作成したアクションが実行され、組織検索ダイアログが表示されます。

    • データは文字列での絞り込みが可能です。
    • データを選択せずにダイアログを閉じた場合は、変数の代入がキャンセルされます。
  3. 組織データから以下のデータを選択します。
  4. 元の画面に選択したデータが表示されていることを確認します。

補足

「複数選択組織検索ダイアログを表示する」アクションに設定するパラメータについて補足します。

本CookBookではアクションに設定するパラメータを以下のように設定しました。

  • 検索基準日:$variable.date
  • 会社コード:$variable.companyCdList
  • 組織セットコード:$variable.organizationSetCdList
  • 組織コード:$variable.organizationCdList
  • 組織名:$variable.organizationNameList

上記パラメータで検索基準日は値が設定されていない場合、現在日時で有効な組織を対象として検索します。
会社コード、組織セットコード、組織コード、組織名のパラメータはダイアログで選択した値を格納する変数となります。
このように「複数選択組織検索ダイアログを表示する」アクションでは検索に必要となるパラメータ、選択結果を格納するパラメータがあります。

-CookBook
-

執筆者:


comment

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

関連記事

no image

intra-mart WebPlatform をサイレントインストールする方法

この CookBook では、intra-mart WebPlatform をサイレントインストールする方法について紹介しています。 インストーラのサイレント・モードについては以下のセットアップに記載 …

スプレッドシートにフロー毎の未処理件数を表示するポートレットの作成方法

このクックブックでは、スプレッドシートにフロー毎の未処理件数を表示するポートレットの作成方法をご紹介します。 ポートレットは、スプレッドシートとIM-Workflow REST APIを利用して作成し …

no image

ワークスペースカレンダーアイテムでスケジュール機能と連携したスケジュールを登録する方法

このCookBookでは、intra-mart Accel Collaboration ワークスペースのワークスペースカレンダーについて紹介しています。 intra-mart Accel Collab …

no image

Payara の Docker を作成する。

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

ワークフローの一覧を使い分けるには(スマートフォン版)

このCookbookでは、以前に公開した「ワークフローの一覧を使い分けるには(改訂版)」に関して、お問い合わせいただいた内容を追加してスマートフォン画面でワークフローの一覧の検索条件を付与する方法をご …

RSSRSSRSSRSS