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

IM-FormaDesignerで作成したフォーム内で、外部連携を利用して最も簡単に値を渡す方法(テーブルアイテム編)

このCookBookでは、IM-FormaDesignerで作成したフォーム画面の中で、テーブルアイテムからテーブルアイテムへ値を渡す方法について紹介します。 今回は例として、グリッドテーブルを利用し …

no image

申請時の注意事項を添付ファイルとして配置する方法

このCookBookでは、申請時の注意事項を記載したファイルを、申請画面の添付ファイルとして配置する方法について紹介しています。 FormaDesignerの前処理プログラムで任意の添付ファイルを設定 …

no image

IMBox の「Like!」を別のキャプションにする方法

この Cookbook では、IMBox の「Like!」を別のキャプションにする方法を紹介します。 具体的には、「Like!」を「確認」に変更する方法を紹介します。 この Cookbook では、日 …

no image

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

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

no image

imuiTreeでドラッグ&ドロップのバリデーションを実装する方法

このCookBookでは、imuiTree (ツリービュー) のドラッグ&ドロップバリデーションについて紹介しています。 intra-mart Accel Platform では、画面上にツリーを表示 …

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

RSSRSSRSSRSS