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

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

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

IM-BloomMaker フォーム部品(Bulma)のフィールド、水平フィールドの利用方法

この CookBook では、intra-mart Accel Platform 2020 Summer から利用可能になった Bulma コンテンツのフォーム部品(Bulma)のフィールド、水平フィ …

no image

WebServer へのリクエスト情報から動的に BaseURL を決定する方法(IIS 編)

ここでは、WebServer(IIS)へのリクエスト情報から BaseURL を動的に決定する方法を BaseUrlProvider のサンプル実装、IIS との連携例と共に紹介します。 製品標準の設 …

no image

ワークスペースとToDo機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のToDo機 …

no image

ライブラリのバージョン監視に応用可能なロジックフローの作り方

このCookBookでは、IM-LogicDesignerを利用して、指定したURLのHTMLから正規表現を利用して任意の文字列を取得する方法を紹介します。 JavaScript定義とREST定義を作 …