CookBook

IM-BloomMaker 式表現で三項演算子が利用可能になりました。

投稿日:2020-12-01 更新日:

このCookBookでは、Accel Platform 2020 Winter から利用可能になった式表現の三項演算子について紹介しています。
式表現については、ユーザ操作ガイドを参照してください。
IM-BloomMaker for Accel Platform IM-BloomMaker ユーザ操作ガイド

式表現は、エレメントのプロパティや、一部のアクションアイテムで変数値を設定する際に利用できます。
2020 Summer 以前では、式表現では数値の計算や文字列の結合などが可能でしたが、条件分岐による設定値の切り替えができないため、アクションであらかじめ処理しておく必要がありました。
三項演算子を用いることで、単純な判定処理であればアクションを作らずにプロパティエディタ内で完結させることができます。

使用例

この章で紹介するサンプルのインポート資材です。BloomMaker のインポート画面からインポートしてください。
サンプル資材 : cookbook_189895_im_bloommaker.zip

テーブルの選択しているレコードを強調表示する

  1. コンテンツ一覧画面を開き、コンテンツツリーの「im_cookbook」カテゴリを開いてください。

  2. 「im_cookbook」カテゴリ内の「im_cookbook_189895_sample1」コンテンツを選択し、「デザイン編集」ボタンをクリックしてください。

  3. テーブルの2行目の任意の「テーブルセル」エレメントを選択してください。

  4. 右ペインのプロパティタブを開き、「CSS クラス」カテゴリの「クラス名」プロパティを表示してください。
    変数値で以下のように設定されています。
    =$variable.data[$index].selected ? "has-background-primary-light" : ""

  5. テーブルの2行目の任意のテーブルセル配下の「ラベル」エレメントを選択してください。

  6. 右ペインのプロパティタブを開き、「CSS クラス」カテゴリの「クラス名」プロパティを表示してください。
    変数値で以下のように設定されています。
    =$variable.data[$index].selected ? "has-text-danger" : ""

$variable.data[$index].selected はレコードの選択状態を格納している変数です。true の場合は選択、false の場合は未選択を表します。

"has-background-primary-light" は CSS フレームワーク「Bulma」が提供している背景色の CSS クラスです。このクラスを付与したエレメントは背景色が薄い水色になります。
"has-text-danger" は CSS フレームワーク「Bulma」が提供している文字色の CSS クラスです。この クラスを付与したエレメントは文字色が赤色になります。

  1. 「プレビュー」ボタンをクリックしてください。

  2. プレビュー画面でテーブルの任意のレコードのチェックボックスをクリックしてください。

  3. 選択したレコードの背景色と文字色が変わり、強調表示になります。

アクションアイテム「変数○に○を代入する」で代入する値を切り替える

  1. コンテンツ一覧画面を開き、コンテンツツリーの「im_cookbook」カテゴリを開いてください。

  2. 「im_cookbook」カテゴリ内の「im_cookbook_189895_sample2」コンテンツを選択し、「デザイン編集」ボタンをクリックしてください。

  3. 右ペインのアクションタブを開き、「Join the meeting」アクションの編集アイコンをクリックしてください。

  4. アクションエディタダイアログの一番上に配置されているアクションの代入元に、以下のように設定されています。
    =$variable.inputName != "" ? $variable.inputName : "Guest"

  5. ダイアログの右上の閉じるボタン、または、「取り消し」ボタンをクリックしてダイアログを閉じてください。

  6. 「プレビュー」アイコンをクリックしてください。

  7. プレビュー画面で、「Name」のテキストボックスに任意の文字列を入力して「Join the meeting」ボタンをクリックしてください。

  8. モーダルで表示されるウインドウの「Name」に、入力した文字列が表示されます。

  9. モーダルを閉じ、「Name」のテキストボックスをに空欄して「Join the meeting」ボタンをクリックしてください。
    モーダルで表示されるウインドウの「Name」に、「Guest」と表示されます。

-CookBook
-

執筆者:


comment

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

関連記事

no image

IM-BIS アクション設定の「条件」の書き方

このCookbookでは、アクション設定の条件式の書き方を説明します。 この方法により入力値に応じてアクション設定の外部連携や入力モード変換などのイベントの実行をコントロールすることができます。 完成 …

no image

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

このCookBookでは、IM-FormaDesignerで作成したフォーム画面の中で、アイテムからアイテムへ値を渡す方法について紹介します。 今回は例として、文字列と数値の値を同時にアイテムからアイ …

Formaでスクリプトアイテムを使い、ボタン・見出し等の色やサイズを変更する方法

このCookBookでは、Formaでスクリプトアイテムを使い、デザインを変更する方法をご紹介します。 サンプルでは、「ボタンアイテム」の背景色の変更・「見出し」の背景色の変更・「ラジオボタン」のボタ …

no image

ラジオボタンの値やフォーカスによってアイテムの色を変更するには

このCookbookでは、カスタムスクリプトによるフィールドスタイルの変更方法を説明します。 アクション設定とカスタムスクリプトの組み合わせにより、入力値やフォーカスイベントに合わせてアイテムのスタイ …

no image

Payara の Docker を作成する。

この CookBook では、Payara の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 Payara の Docker イメージを作成します 実行します 1. …

RSSRSSRSSRSS