CookBook

IM-BloomMaker で作成した画面で、入力項目の値によってエレメントの表示・非表示を切り替える方法

投稿日:

このCookBookでは、IM-BloomMakerで入力系エレメントの入力値によってエレメントの表示/非表示を切り替える方法について紹介しています。
実際にサンプル画面を作成しながら解説を行います。

完成イメージ

このCookBookで作成するサンプル画面です。

動作内容は以下の通りです。

  1. チェックボックスをオンにするとチェックボックスの下にテキストボックスが表示されます。
  2. チェックボックスをオフにするとチェックボックスの下のテキストボックスが非表示になります。
  3. 「Yes」のラジオボタンを押下するとラジオボタンの下にテキストエリアが表示されます。
  4. 「No」のラジオボタンを押下するとラジオボタンの下のテキストエリアが非表示になります。

完成サンプル

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

画面サンプルインポートファイル : cookbook_163621.zip
IM-BloomMakerのインポート画面からインポートしてください。

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

レシピ

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

  1. 処理に必要な変数を宣言する
  2. エレメントをページに配置し、変数を紐づける
  3. アクションを作成する

1. 処理に必要な変数を宣言する

  • 変数タブのプルダウンで「変数」が選択されていることを確認し、JSONエディタに以下のJSONを貼り付けて変数を作成してください。

2. エレメントをページに配置し、変数を紐づける

  • エレメントパレットの「レイアウト」から「ボックス」をページに配置してください。
    今後このエレメントは「ボックス1」と呼びます。

  • エレメントパレットの「フォーム部品」から「チェックボックス」を先ほど配置した「ボックス1」の中に配置してください。

  • 配置した「チェックボックス」を選択し、プロパティタブで以下の通り入力してください。

カテゴリ プロパティ名 ラジオボタン 設定値
エレメント固有 textContent 変数値 $variable.message.textBoxDisplay
エレメント固有 value(※1) 固定値 0
エレメント固有 checked 変数値 $variable.dispEnterTextFlg

※1 設定値は任意です。設定しなくても問題ありません。

  • エレメントパレットの「レイアウト」から「ボックス」をページに配置してください。
    今後このエレメントは「ボックス2」と呼びます。

  • 配置した「ボックス2」を選択し、プロパティタブで以下の通り入力してください。

カテゴリ プロパティ名 ラジオボタン 設定値
共通 表示/非表示 変数値 $variable.dispEnterTextFlg

  • エレメントパレットの「汎用」から「ラベル」を先ほど配置した「ボックス2」の中に配置してください。
    配置後、プロパティタブの「textContent」プロパティに「name」を入力してください。

  • エレメントパレットの「フォーム部品」から「テキスト入力」を先ほど配置した「ボックス2」の中に配置してください。

ここまでの手順で、簡単なエレメント表示/非表示を行うための設定は完了です。

プロパティタブの「共通」→「表示/非表示」プロパティでエレメントの表示/非表示を切り替えることができます。
例えば、チェックボックスの状態によって表示/非表示を切り替えたい場合は、チェックボックスの「checked」プロパティと、表示/非表示を切り替えたいエレメントの「表示/非表示」プロパティに同じ変数を設定することで実現できます。

チェックボックス


表示/非表示を切り替えたいエレメント

  • エレメントパレットの「レイアウト」から「ボックス」をページに配置してください。
    今後このエレメントは「ボックス3」と呼びます。

  • エレメントパレットの「汎用」から「ラベル」を先ほど配置した「ボックス3」の中に配置してください。

  • 配置した「ラベル」を選択し、プロパティタブで以下の通り入力してください。

カテゴリ プロパティ名 ラジオボタン 設定値
エレメント固有 textContent 変数値 $variable.message.textAreaDisplay

  • エレメントパレットの「レイアウト」から「ボックス」をページに配置してください。
    今後このエレメントは「ボックス4」と呼びます。

  • エレメントパレットの「フォーム部品」から「ラジオボタン」を先ほど配置した「ボックス4」の中に配置してください。

  • 配置した「ラジオボタン」を選択し、プロパティタブで以下の通り入力してください。

カテゴリ プロパティ名 ラジオボタン 設定値
エレメント固有 textContent 固定値 Yes
エレメント固有 value 固定値 0
エレメント固有 selected 変数値 $variable.radioBtnStatus

  • エレメントパレットの「フォーム部品」から「ラジオボタン」を先ほど配置した「ボックス4」の中に配置してください。

  • 配置した「ラジオボタン」を選択し、プロパティタブで以下の通り入力してください。

カテゴリ プロパティ名 ラジオボタン 設定値
エレメント固有 textContent 固定値 No
エレメント固有 value 固定値 1
エレメント固有 selected 変数値 $variable.radioBtnStatus

  • エレメントパレットの「レイアウト」から「ボックス」をページに配置してください。
    今後このエレメントは「ボックス5」と呼びます。

  • 配置した「ボックス5」を選択し、プロパティタブで以下の通り入力してください。

カテゴリ プロパティ名 ラジオボタン 設定値
共通 表示/非表示 変数値 $variable.dispTextAreaFlg

  • エレメントパレットの「レイアウト」から「ボックス」を先ほど配置した「ボックス5」の中に配置してください。
    今後このエレメントは「ボックス6」と呼びます。

  • エレメントパレットの「汎用」から「ラベル」を先ほど配置した「ボックス6」の中に配置してください。

  • 配置した「ラベル」を選択し、プロパティタブで以下の通り入力してください。

カテゴリ プロパティ名 ラジオボタン 設定値
エレメント固有 textContent 変数値 $variable.message.textAreaCaption

  • エレメントパレットの「レイアウト」から「ボックス」を先ほど配置した「ボックス5」の中に配置してください。
    今後このエレメントは「ボックス7」と呼びます。

  • エレメントパレットの「フォーム部品」から「テキストエリア」を先ほど配置した「ボックス7」の中に配置してください。

3. アクションを作成する

  • アクションタブの「新規作成」ボタンを押下してアクションエディタを開き、アクション名に「textAreaShowHide」を入力してください。

  • 左ペインの「アクション」→「標準」から「カスタムスクリプトを実行する」を右ペインにドラッグ&ドロップし、以下のコードを入力してください。

ラジオボタンやテキスト入力などの入力系エレメントの入力値によって表示/非表示を切り替える場合はカスタムスクリプトを使います。

以下のような処理手順になります。
1. 入力系エレメントに紐づけた変数の値の判定を行う
2. 表示/非表示を切り替えたいエレメントの「表示/非表示」プロパティに紐づけた変数に true(表示) または false(非表示) を代入する

  • OKを押下してアクションエディタを閉じます。

  • 最後に、ページに配置した「ラジオボタン(Yes)」を押下し、プロパティタブの「イベント」→「入力値変更時」に「textAreaShowHide」アクションを設定してください。
    「ラジオボタン(No)」にも同様の作業を行ってください。

以上で入力系エレメントの入力値によってエレメントの表示/非表示を切り替えるサンプル画面の作成は完了です。

動作確認

作成したサンプル画面が正しく動作するか確認します。
ツールバーの「プレビュー」アイコンを押下することで動作確認を行えます。

以下のように動作していれば問題ありません。

  1. チェックボックスにチェックを入れると、チェックボックスの下にテキストボックスが表示されること
  2. チェックボックスのチェックを外すと、チェックボックスの下のテキストボックスが非表示になること
  3. 「Yes」のラジオボタンを選択すると、ラジオボタンの下にテキストエリアが表示されること
  4. 「No」のラジオボタンを選択すると、ラジオボタンの下のテキストエリアが非表示になること

-CookBook
-

執筆者:


comment

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

関連記事

no image

スクリプト開発で利用できる close 関数のご紹介

この CookBook では、スクリプト開発で利用できる close 関数について紹介します。 スクリプト開発では作成した js ファイルの中に init と言う名前の関数を定義すると思いますが、この …

no image

Forma標準アプリとIM-LogicDesignerを利用してBISワークフローを一括申請する方法

このCookBookでは、Forma標準アプリとLogicDesignerを利用して、BISワークフローを一括申請する方法を説明します。 完成イメージ ① グリッドテーブルの各行を、それぞれ案件として …

no image

テナント環境セットアップでテナント固有の属性を登録する。

この CookBook では以下の方法を紹介します。 テナント環境セットアップでテナント固有の属性を登録する方法。 システム管理者のテナント管理画面で、テナント固有の属性を編集する方法。 今回は「外部 …

no image

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

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

no image

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

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

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

RSSRSSRSSRSS