intra-mart Accel Platform IM-共通マスタ 検索画面仕様書 第9版 2021-04-01

7.4.7.2. 作成したテンプレート定義を IM-BloomMaker で使用する

作成したテンプレート定義を IM-共通マスタ 検索(オートコンプリート型)の起動引数にした画面を作成する例を紹介します。
../../_images/bm_autocomplete.png

【図:完成イメージ - ユーザ検索オートコンプリート】

7.4.7.2.1. テンプレート定義の作成

  1. テンプレート定義を作成します
    以下の完成サンプルをダウンロードしてご活用ください。

  2. 「サイトマップ」→「共通マスタ」→「マスタ検索ルール」から、「インポート」画面を表示します。

  3. インポート種別「更新」で、ファイル選択からダウンロードしたim_master_search_template_sample_template.zipを選択し、「インポート実行」をクリックします。

    ../../_images/template_import.png
  4. 「サイトマップ」→「共通マスタ」→「マスタ検索ルール」から、「検索テンプレート(オートコンプリート型)」画面を表示します。

  5. ツリーのカテゴリ「sample category (issue-32625)」内のテンプレート「imm_t_issue_32625」をクリックして、以下の内容が登録されているか確認します。

    項目
    テンプレートID imm_t_issue_32625
    検索タイプ ユーザ検索
    備考 sample template (issue-32625)
    有効/無効 有効
    検索項目 ユーザコード、ユーザ名、ユーザ検索名、メールアドレス1
    結果項目 ユーザコード、ユーザ名、メールアドレス1
    表示項目 ユーザ名、メールアドレス1
    ソート項目 ソートキー 昇順 第1ソート、ユーザコード 昇順 第2ソート
    暗黙条件 なし

7.4.7.2.2. 画面の作成

  1. 続けて IM-BloomMaker で画面を作成します。
    以下の完成サンプルをダウンロードしてご活用ください。

    コラム

    本作成例では、IM-BloomMakerによる画面の作成手順については説明しません。
  2. 「サイトマップ」→「BloomMaker」→「インポート」画面から、IM-BloomMakerのインポート機能を利用して完成サンプルをインポートします。

    コラム

    インポート手順については、 IM-BloomMaker for Accel Platform ユーザ操作ガイド 」の「 定義ファイルをインポートする 」を参照してください。
  3. 「サイトマップ」→「BloomMaker」→ 「ルーティング定義一覧」画面から、完成サンプルに含まれる以下のルーティング定義に対して、「認証済みユーザ」の「認可」を設定します。
    • ルーティングID : routing_issue_32625
    • ルーティング名 : sample routing(issue-32625)

    コラム

    ルーティング定義の認可設定については、「 IM-BloomMaker for Accel Platform チュートリアルガイド 」の「 ルーティングの認可を設定する 」を参照してください。

    注意

    以下のIM-Master REST APIとルーティング定義の認可対象を揃えてください。
    認可にずれがある場合、ユーザによっては検索エラーが発生する可能性があります。
    リソースの種類 : IM-Master REST API
    リソース : 共通マスタ REST API - 共通マスタ検索 - IM共通マスタ検索(キーワード)
    リソース : 共通マスタ REST API - 共通マスタ検索 - IM共通マスタ検索(コード)
    リソース : 共通マスタ REST API - プロファイル画像(NoImage含む) - プロファイル画像の取得(Stream形式)
  4. 認証済みユーザで「 http://<HOST>:<PORT>/<CONTEXT_PATH>/immaster/search/template/sample/issue_32625 」にアクセスし、本作成例のアプリケーション画面が表示されることを確認します。

7.4.7.2.3. 共通マスタエレメント

7.4.7.2.3.1. 単一選択と複数選択

共通マスタエレメントにはそれぞれ単一選択と複数選択が用意されています。
単一選択は一つのコンポーネント内で一つのデータを選択する場合、複数選択は一つのコンポーネント内で複数のデータを選択する場合に使用してください。

7.4.7.2.3.2. 指定できるテンプレートID

テンプレート定義で設定した検索タイプと、それぞれのエレメントが対応しているため、エレメントによっては使用できないテンプレートIDが存在します。
対応していないテンプレートIDを templateId に指定した場合、予期しない動作を引き起こす可能性があります。
また、テンプレートIDが無効な場合や、削除済みの場合はそのテンプレートIDを使用した検索ができません。
エラーの場合は下記対応表や「テンプレート定義編集」画面でテンプレート定義の検索タイプ、有効/無効を確認してください。
【表:エレメント対応表】
エレメント 検索タイプ
単一選択ユーザ検索 ユーザ検索
複数選択ユーザ検索 ユーザ検索
所属組織による単一選択ユーザ検索 ユーザ(所属組織)検索
所属組織による複数選択ユーザ検索 ユーザ(所属組織)検索
単一選択会社検索 会社検索
複数選択会社検索 会社検索
単一選択組織検索 組織検索
複数選択組織検索 組織検索

7.4.7.2.3.3. 固有プロパティ selected

selected は必須プロパティです。オートコンプリートで選択したキーデータはこの変数に格納されます。
../../_images/bm_properties_selected.png

【図:固有プロパティ selected

7.4.7.2.3.3.1. selected で選択済みデータを表示する

selected の変数にキーコードを定義しておくことで、初期表示時に選択済みデータを表示できます。
完成サンプルでは初期表示時点で選択状態のデータはないため、以下のように変数を定義しています。
../../_images/bm_selected_empty.png

【図: selected プロパティ変数「defaultUsers」】

{
  "defaultUsers": [
    {
      "userCd": ""
    }
  ]
}

selected プロパティ変数「defaultUsers」 JSON形式】

../../_images/bm_selected_empty_preview.png

【図:プレビュー初期表示 - 選択ユーザなし】


キーコードを指定すると以下のように初期表示されます。

../../_images/bm_selected_users.png

【図: selected プロパティ変数「defaultUsers」】

{
  "defaultUsers": [
    {
      "userCd": "aoyagi"
    },
    {
      "userCd": "ueda"
    }
  ]
}

selected プロパティ変数「defaultUsers」 JSON形式】

../../_images/bm_selected_users_preview.png

【図:プレビュー初期表示 - 選択ユーザあり】

7.4.7.2.3.3.2. エレメント毎の変数定義

selected 変数の型に誤りがある場合、選択済みデータを初期表示できず、オートコンプリートで選択したキーデータは変数に格納できません。
各エレメントに設定する変数の定義は下記の表を参考に作成してください。
  • 単一選択ユーザ検索
{
  "selectedUser": {
    "userCd": ""
  }
}
変数名 配列 代入値  
(任意)   マップ ×  
userCd 文字列 × 固定文字列 ユーザコード
  • 複数選択ユーザ検索
{
  "selectedUsers": [
    {
      "userCd": ""
    }
  ]
}
変数名 配列 代入値  
(任意)   マップ 1次元配列  
userCd 文字列 × 固定文字列 ユーザコード
  • 所属組織による単一選択ユーザ検索
{
  "selectedDeptAttachUser": {
    "userCd": ""
  }
}
変数名 配列 代入値  
(任意)   マップ ×  
userCd 文字列 × 固定文字列 ユーザコード
  • 所属組織による複数選択ユーザ検索
{
  "selectedDeptAttachUser": [
    {
      "userCd": ""
    }
  ]
}
変数名 配列 代入値  
(任意)   マップ 1次元配列  
userCd 文字列 × 固定文字列 ユーザコード
  • 単一選択会社検索
{
  "selectedCompany": {
    "companyCd": ""
  }
}
変数名 配列 代入値  
(任意)   マップ ×  
companyCd 文字列 × 固定文字列 会社コード
  • 複数選択会社検索
{
  "selectedCompanies": [
    {
      "companyCd": ""
    }
  ]
}
変数名 配列 代入値  
(任意)   マップ 1次元配列  
companyCd 文字列 × 固定文字列 会社コード
  • 単一選択組織検索
{
  "selectedDepartment": {
    "companyCd": "",
    "departmentSetCd": "",
    "departmentCd": ""
  }
}
変数名 配列 代入値  
(任意)   マップ ×  
companyCd 文字列 × 固定文字列 会社コード
departmentSetCd 文字列 × 固定文字列 組織セットコード
departmentCd 文字列 × 固定文字列 組織コード
  • 複数選択組織検索
{
  "selectedDepartments": [
    {
      "companyCd": "",
      "departmentSetCd": "",
      "departmentCd": ""
    }
  ]
}
変数名 配列 代入値  
(任意)   マップ 1次元配列  
companyCd 文字列 × 固定文字列 会社コード
departmentSetCd 文字列 × 固定文字列 組織セットコード
departmentCd 文字列 × 固定文字列 組織コード

7.4.7.2.3.4. 選択済みデータを取得する方法

選択済みデータは selected プロパティで指定した変数から取得します。
サンプル内のコンテンツ content_issue_32625 のアクションを参考にしてください。
アクションで実行している処理は以下の通りです。
  1. selected プロパティの変数「defaultUsers」からユーザコードを取得し、REST APIパラメータを作成
  2. REST API実行(テンプレート定義を使ったユーザ情報取得)
  3. REST API結果からメッセージを作成
  4. アラートメッセージを表示