CookBook

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

投稿日:2016-08-29 更新日:

このCookbookでは、セレクトボックスの選択結果によって、他のセレクトボックスの選択肢を絞り込む方法を説明します。

この方法は、IM-FormaDesignerのみ導入環境での方法です。
IM-BISを導入している環境の場合は、こちらを参照してください。

完成イメージ


サンプルでは、明細テーブルにカテゴリで選択した値に基づいた製品が表示されます。
カテゴリの選択値を変更する度に製品に表示される値が変わります。

完成サンプル

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

上記のサンプルの利用条件は以下の通りです。

  • intra-mart Accel Platform(Advanced) 2016 Summer(8.0.14), IM-FormaDesigner 2016 Summer(8.0.13)以降のバージョンであること
  • サンプルデータのインポートが行われていること

サンプルは、intra-mart Accel Platform(Advanced) 2016 Summer(8.0.14), IM-FormaDesigner 2016 Summer(8.0.13)で動作確認を行っています。

レシピ

  1. クエリの抽出条件を設定する。
  2. アプリケーションのパラメータにセレクトボックスの値を設定する。
  3. 登録画面でセレクトボックスの動作を確認する。

1. クエリの抽出条件を設定する。

他のセレクトボックスに連動して値の絞り込みを行うためにテナントDBクエリに抽出条件(WHERE句)を設定してください。

サンプルの製品のテナントDBクエリは以下の通りです。

カテゴリに選択した値を抽出条件にセットするためにWHERE句にcategory_idの条件を記述してください。
WHERE句のlocale_idの条件によりユーザのロケールに合わせて製品のセレクトボックスの表示内容を変えることができます。

詳しくは以下のドキュメントをご覧ください。

2. アプリケーションのパラメータにセレクトボックスの値を設定する。

次に、テナントDBクエリの抽出条件にカテゴリのセレクトボックスを設定します。

  1. フォーム・デザイナで明細テーブルのプロパティ画面を表示してください。
  2. 明細テーブルの列「カテゴリ」の列プロパティからフィールド識別IDの値を確認してください。
    im_cookbook_113705_1
  3. 明細テーブルの列「製品」のプロパティで値の取得元を「データソース定義」としてください。データソース定義には「製品クエリ」を設定してください。
    im_cookbook_113705_2
  4. パラメータ設定で以下の通りに設定してください。
    im_cookbook_113705_3
  • カテゴリID
    • 上記の手順で確認した「カテゴリ」列のフィールド識別ID
  • ロケール
    • 関数「locale()」

上記の設定により製品のセレクトボックスにはカテゴリとユーザのロケールの条件に合致した値のみが表示されます。

詳しくは以下のドキュメントをご覧ください。

3. 登録画面でセレクトボックスの動作を確認する。

  1. アプリケーションを実行するにはアプリケーションの一覧画面をメニューに登録してください。一旦ログアウトした後再度ログインします。
    im_cookbook_113705_4
  2. 「サイトマップ」-「Formaアプリ」-「cb113705_一覧」をクリックしてください。
  3. 「登録」をクリックしてください。
    im_cookbook_113705_5
  4. 「カテゴリ」で任意の値(例:アウター)を選択してください。
    im_cookbook_113705_6
  5. 「製品」にはcb_113705_productテーブルのcategory_idが一致する値だけが表示されます。
    im_cookbook_113705_7
  6. 「カテゴリ」を変更すると「製品」の値も連動して変わることが確認できます。
    im_cookbook_113705_8

-CookBook
-

執筆者:


comment

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

関連記事

no image

画面UI部品(imuiValidate)のバリデーションメッセージを任意の場所に表示する方法

このCookBookでは、画面UI部品のバリデーションメッセージを任意の場所に表示する方法について紹介しています。 intra-mart Accel Platform では、画面上に配置したUI部品の …

no image

IM-FormaDesignerで作成したフォーム内でIME入力モードを制御する方法【IE・EDGE】

このCookbookでは、IM-FormaDesignerで作成したフォーム内の 画面アイテム「文字列」と画面アイテム「グリッドテーブル」のIME入力モードを制御する方法を紹介します。 入力モードを制 …

no image

ウォッチ機能のご紹介

このCookBookでは「intra-mart Accel Collaboration」に備わっているウォッチ機能のご紹介です。 各会社様でグループで仕事をする機会が多いと思います。 仕事を行う上で、 …

no image

ジョブを作成して定期実行する

このCookBookでは、以下の開発モデルでジョブを作成する方法と、作成したジョブを指定した時刻に定期実行する方法を紹介します。 ・スクリプト開発モデル ・JavaEE開発モデル いずれのモデルでもジ …

no image

intra-martのアプリケーションをセットアップする

このCookBookでは、intra-mart Accel Collaborationをセットアップしてアプリケーションを使える状態にする方法を紹介します。レシピの最後では、実際にintra-mart …

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

RSSRSSRSSRSS