CookBook

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

投稿日:2019-07-31 更新日:

この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

BloomMaker で3桁区切りの数値フォーマットを自動で行うテキストボックスを作成する方法

この CookBook では、IM-BloomMaker を使用して、3桁区切りの数値フォーマットを自動で行うテキストボックスを作成する方法を紹介します。 ※この CookBook は 2021 Su …

スプレッドシートにフロー毎の未処理件数を表示するポートレットの作成方法

このクックブックでは、スプレッドシートにフロー毎の未処理件数を表示するポートレットの作成方法をご紹介します。 ポートレットは、スプレッドシートとIM-Workflow REST APIを利用して作成し …

no image

IM-BloomMaker Bulma を使用した入力系画面の作成

intra-mart Accel Platform 2020 Summer から、コンテンツ種別「Bulma」が提供されました。 このCookBookでは、スクリプト開発モデルのサンプル登録画面をもと …

差戻し先ノードの処理対象者を再展開するフローを作成する方法

このCookBookでは、差戻し先ノードの処理対象者を再展開するフローを作成する方法について紹介しています。 IM-Workflowの仕様として、差戻し先ノードではそのノードを以前に処理した人のみが再 …

no image

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

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