CookBook

IM-BloomMaker コンボボックスエレメントのサジェストにサーバから取得した値を表示する

投稿日:2020-03-24 更新日:

このCookBookでは、intra-mart Accel Platform 2020 Spring から利用可能になったコンボボックスエレメントのサジェストにサーバから取得した値を表示する方法について紹介します。
コンボボックスエレメントはサジェストを設定できるテキスト入力エレメントです。
実際にサンプル画面を作成しながらサーバから取得した値でサジェストを設定する方法を説明していきます。

完成イメージ

このCookBookで作成するサンプル画面です。
以下から動作確認ができます。

  1. コンボボックスエレメントをクリックすると、サーバから取得したユーザコードの一覧がサジェストとして表示されます。
  2. コンボボックスエレメントに直接文字を入力すると、完全・部分一致でデータが絞り込まれます。
  3. コンボボックスエレメントにユーザコードが入力された状態で「プラス」アイコンをクリックすると、入力したユーザコードに一致するユーザのユーザコードとユーザ名がテーブルに表示されます。

完成サンプル

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

IM-BloomMakerインポートファイル : im_bloommaker-data-179735
IM-BloomMaker のインポート画面からインポートしてください。
なお、インポート後にはIM-BloomMaker ルーティング定義の認可設定が必要ですのでご注意ください。

IM-LogicDesignerインポートファイル : im_logicdesigner-data-179735
IM-LogicDesigner のインポート画面からインポートしてください。
なお、インポート後にはIM-LogicDesigner ルーティング定義の認可設定が必要ですのでご注意ください。

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/im_cookbook/179735
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

サンプル画面の作成手順を以下に示します。

  1. IM-LogicDesignerインポートファイルをインポートする
  2. コンテンツカテゴリを登録する
  3. コンテンツを登録する
  4. デザイン編集を行う
  5. ルーティングカテゴリを登録する
  6. ルーティング設定を行う

1. IM-LogicDesignerインポートファイルをインポートする

完成サンプルからIM-LogicDesignerインポートファイルをダウンロードし、IM-LogicDesigner のインポート画面からインポートしてください。

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

  1. 「サイトマップ」から、「BloomMaker」 - 「コンテンツ一覧」をクリックしてください。
  2. 「カテゴリ新規作成」をクリックしてください。

  3. 以下のように設定し、「登録」ボタンをクリックしてください。

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

3. コンテンツを登録する

  1. 前項で登録したカテゴリを選択してください。
  2. 「コンテンツ新規作成」をクリックしてください。

  3. 以下のように設定し、「登録」ボタンをクリックしてください。

    • コンテンツID:im_cookbook_179735
    • コンテンツ名:im_cookbook_179735_suggest

4. デザイン編集を行う

  1. 前項で登録したコンテンツを選択してください。
  2. 「デザイン編集」ボタンをクリックしてください。
変数の定義

一覧データの変数と、選択したデータを代入する変数を定義してください。

  1. 「変数」タブをクリックしてください。

  2. プルダウンの「変数」が選択されていることを確認し、「JSON」アイコンをクリックしてください。

  3. 「JSONエディタ」に以下のJSONを貼り付け、「決定」ボタンをクリックしてください。

  4. 変数「selectedUsers」の配下にある「userCd」の編集アイコンをクリックし、以下のように設定してください。

    • 値の型:文字列
  5. 変数「selectedUsers」の配下にある「userName」の編集アイコンをクリックし、以下のように設定してください。
    • 値の型:文字列
  6. 変数「records」の配下にある「user_cd」の編集アイコンをクリックし、以下のように設定してください。
    • 値の型:文字列
  7. 変数「records」の配下にある「user_name」の編集アイコンをクリックし、以下のように設定してください。
    • 値の型:文字列
  8. 変数「combobox」の配下にある「values」の編集アイコンをクリックし、以下のように設定してください。
    • 値の型:文字列
  9. 変数「combobox」の配下にある「value」の編集アイコンをクリックし、以下のように設定してください。
    • 値の型:文字列

  10. プルダウンの「定数」を選択し、「JSON」アイコンをクリックしてください。

  11. 「JSONエディタ」に以下のJSONを貼り付け、「決定」ボタンをクリックしてください。

アクションの作成

「search」アクションを作成してください。
サーバからデータを取得し、その中からユーザコードを検索するアクションです。

  1. 「アクション」タブをクリックしてください。

  2. 「新規作成」アイコンをクリックしてください。

  3. 「URLにリクエストを送信する」アクション、その下に「カスタムスクリプトを実行する」アクションをドラッグ&ドロップで配置してください。

  4. 以下のように設定し、「決定」ボタンをクリックしてください。

    • アクション名:search

    • URLにリクエストを送信する

      パラメータ ステータス
      URL $constant.URL
      メソッド GET
      リクエストパラメータ 設定なし
      リクエストヘッダ 設定なし
      リクエストデータ 設定なし
      ステータスコード 設定なし
      レスポンスデータ $variable.apiResponse
      セキュアトークン 設定なし

    • カスタムスクリプトを実行する

「append」アクションを作成してください。
コンボボックスエレメントに入力したユーザコードに該当するユーザのユーザコードとユーザ名を画面のテーブルに追加するアクションです。

  1. 「アクション」タブをクリックしてください。
  2. 「新規作成」アイコンをクリックしてください。

  3. 「カスタムスクリプトを実行する」アクションをドラッグ&ドロップで配置してください。

  4. 以下のように設定し、「決定」ボタンをクリックしてください。

    • アクション名:append

    • カスタムスクリプトを実行する

画面の作成
  1. 画面上部にある「コンテナを選択」アイコンをクリックしてください。
  2. 「コンテナ」の「プロパティ」タブを選択してください。

    • 「イベント」プロパティを以下のように設定してください。
      • ページ読み込み時:search

  3. エレメントパレットから、「レイアウト」 - 「ボックス」をドラッグ&ドロップで配置してください。

  4. エレメントパレットから、「フォーム部品」 - 「コンボボックス」を「ボックス」の内側にドラッグ&ドロップで配置してください。

  5. 「コンボボックス」の「プロパティ」タブを選択してください。

    • 「エレメント固有」プロパティを以下のように設定してください。
      • values(変数値):$variable.combobox.values
      • value(変数値):$variable.combobox.value

    • 「幅・高さ」プロパティを以下のように設定してください。
      • 横幅(固定値):300px

  6. エレメントパレットから、「パーツ(imui)」 - 「アイコン」を「ボックス」の内側、「コンボボックス」の右側にドラッグ&ドロップで配置してください。

  7. 「アイコン」の「プロパティ」タブを選択してください。

    • 「エレメント固有」プロパティを以下のように設定してください。
      • iconClass(固定値):im-ui-icon-common-16-plus
    • 「イベント」プロパティを以下のように設定してください。
      • クリック時:append

  8. エレメントパレットから、「繰り返し」 - 「テーブル(繰り返し)」を「ボックス」の下にドラッグ&ドロップで配置してください。

  9. 「テーブル(繰り返し)」の「プロパティ」タブを選択してください。

    • 「エレメント固有」プロパティを以下のように設定してください。
      • columnCount:2
      • list:$variable.selectedUsers

    • 「幅・高さ」プロパティを以下のように設定してください。
      • 横幅(固定値):300px

  10. エレメントパレットから、「汎用」 - 「ラベル」を「テーブル(繰り返し)」の中にある全ての「テーブルヘッダセル」・「テーブルセル」の内側に1つずつドラッグ&ドロップで配置してください。

  11. 左側の「テーブルヘッダセル」内に設置した「ラベル」の「プロパティ」タブを選択してください。

    • 「エレメント固有」プロパティを以下のように設定してください。
      • textContent(固定値):User Cd

  12. 右側の「テーブルヘッダセル」内に設置した「ラベル」の「プロパティ」タブを選択してください。

    • 「エレメント固有」プロパティを以下のように設定してください。
      • textContent(固定値):User Name

  13. 左側の「テーブルセル」内に設置した「ラベル」の「プロパティ」タブを選択してください。

    • 「エレメント固有」プロパティを以下のように設定してください。
      • textContent(変数値):$variable.selectedUsers[$index].userCd

  14. 右側の「テーブルセル」内に設置した「ラベル」の「プロパティ」タブを選択してください。

    • 「エレメント固有」プロパティを以下のように設定してください。
      • textContent(変数値):$variable.selectedUsers[$index].userName

  15. ツールバーから「上書き保存」アイコンをクリックし、デザインを保存してください。

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

  1. 「サイトマップ」から、「BloomMaker」 - 「ルーティング定義一覧」をクリックしてください。
  2. 「カテゴリ新規作成」をクリックしてください。

  3. 以下のように設定し、「登録」ボタンをクリックしてください。

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

6. ルーティング設定を行う

  1. 前項で作成したルーティングカテゴリを選択してください。
  2. 「ルーティング新規作成」をクリックしてください。

  3. 以下のように設定し、「登録」ボタンをクリックしてください。

    • ルーティングID:im_cookbook_179735
    • コンテンツ:im_cookbook_179735_suggest
      検索ボタンをクリックして「im_cookbook_179735_suggest」を選択してください。
    • URL:im_cookbook/179735
    • ルーティング名:im_cookbook_179735_suggest

  4. 登録完了後、「認可URI」の「歯車」アイコンをクリックしてください。

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

動作確認

作成した画面の動作確認を行います。
ルーティング定義一覧画面でルーティング定義「im_cookbook_179735_suggest」を表示し、「URLのコピー」アイコンをクリックしてください。
コピーした URL をブラウザのアドレスバーに貼り付け、作成した画面に移動してください。

以下のように動作することを確認してください。
うまく動作しない場合は、レシピの手順を確認してください。

  • コンボボックスエレメントをクリックして、サーバから取得したユーザコードの一覧がサジェストとして表示されること。
  • コンボボックスエレメントに文字を入力して、完全一致でユーザコードが絞り込めること。
  • コンボボックスエレメントに文字を入力して、部分一致でユーザコードが絞り込めること。
  • サジェストを選択して、コンボボックスエレメントに選択したユーザコードが入力されること。
  • コンボボックスエレメントにユーザコードが入力された状態で「プラス」アイコンをクリックして、テーブルにユーザコードとユーザ名が表示されること。

-CookBook
-

執筆者:


comment

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

関連記事

no image

IM-LogicDesignerで、Redmineカスタムクエリのチケット一覧を取得する方法

このCookBookでは、IM-LogicDesignerを使用してRedmineのチケット (issues) 一覧を取得する方法を紹介します。 Redmineは、外部からチケット一覧を取得するための …

案件一覧「My検索条件」の活用例

このCookbookでは、intra-mart Accel Platform 2019 Springから利用可能な、案件一覧画面にある「My検索条件」機能を活用し、任意の条件別にブックマークを作成する …

no image

IM-BISで複数のセレクトボックスを連動させて利用する方法

このCookBookでは、セレクトボックスの選択結果によって、他のセレクトボックスの選択肢を絞り込む方法を説明します。 この方法は、IM-BIS導入環境で利用することができます。IM-FormaDes …

IM-LogicDesignerを利用して、IM-Workflow完了案件の確認対象者を削除する

このCookBookでは、IM-LogicDesignerを利用して、IM-Workflow完了案件の確認対象者を削除する方法について紹介しています。 完了案件でも、確認対象者が確認することはできます …

スプレッドシートでSpreadJSライブラリを利用してFormaの画面に対して入力チェックを実行する方法

このCookBookでは、スプレッドシートでSpreadJSライブラリを利用して入力チェックを実行する方法について紹介しています。 SpreadJSライブラリはクライアントサイドで動作するため、サーバ …

RSSRSSRSSRSS