CookBook

IM-BloomMaker 繰り返しエレメントでの変数の使い方

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


このCookBookでは、IM-BloomMakerの繰り返しエレメントと変数の使い方について紹介しています。
サンプルでは、1・2・3次元配列の変数を使用して繰り返しエレメントを表示します。

完成イメージ

完成サンプル

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

im_cookbook_163289.zip


IM-BloomMakerのインポート機能からインポートしてください。
IM-BloomMaker for Accel Platform ユーザ操作ガイド - 定義ファイルをインポートする

レシピ

このレシピでは、「繰り返し」エレメントにおける変数の使い方を紹介します。

  1. エレメントを配置する
  2. 変数を作成する
  3. エレメントのプロパティに変数を設定する

1.エレメントを配置する

  • 1次元配列
  1. エレメントパレットの「レイアウト」からコンテナに「見出しレベル1」を配置してください。「見出しレベル1」のエレメント固有「textContent」に「ボックス(繰り返し)1次元配列」を入力してください。
  2. エレメントパレットの「繰り返し」からコンテナに「ボックス(繰り返し)」を配置してください。
  3. エレメントパレットの「フォーム」から「ボックス(繰り返し)」に「テキスト入力を配置」してください。このエレメントは変数の値を表示するために使用します。
  • 2次元配列
  1. エレメントパレットの「レイアウト」からコンテナに「見出しレベル1」を配置してください。「見出しレベル1」のエレメント固有「textContent」に「テーブル(繰り返し)2次元配列」を入力してください。
  2. エレメントパレットの「繰り返し」からコンテナに「テーブル(繰り返し)」を配置してください。
  3. 「 テーブル(繰り返し)」のエレメント固有を設定します。今回は3列のヘッダ無しの「テーブル(繰り返し)」を表示するのでエレメント固有の「showHeader」チェックボックスのチェックを外し、「columnCount」に「3」を入力してください。
  4. エレメントパレットの「フォーム」から「テーブル(繰り返し)」の3セル全ての中に「テキスト入力」を配置してください。このエレメントは変数の値を表示するために使用します。
  • 3次元配列
  1. エレメントパレットの「レイアウト」からコンテナに「見出しレベル1」を配置してください。「見出しレベル1」のエレメント固有「textContent」に「ボックス(繰り返し)3次元配列」を入力してください。
  2. エレメントパレットの「繰り返し」からコンテナに「ボックス(繰り返し)」を配置してください。
  3. 先に配置した「ボックス(繰り返し)」の中に「ボックス(繰り返し)」を入れ子になるように2つ配置してください。
  4. エレメントパレットの「フォーム」から入れ子の「ボックス(繰り返し)」の中に「テキスト入力」を配置してください。このエレメントは変数の値を表示するために使用します。

2. 変数を作成する

変数エディタで1・2・3次元配列の変数を作成してください。

変数エディタの詳細は以下のドキュメントをご参照ください。
IM-BloomMaker for Accel Platform ユーザ操作ガイド - 変数の設定方法

JSONエディタに下記のコードを入力することで変数を作成することができます。

JSONエディタから変数を設定する方法は以下のドキュメントをご参照ください。
IM-BloomMaker for Accel Platform ユーザ操作ガイド - JSON形式を用いた代入値の設定

3. エレメントのプロパティに変数を設定する

手順2で作成した変数をエレメントのプロパティに設定します。
繰り返しエレメントにはエレメント固有の「list」に「$variable.変数名」を設定します。
変数表示用の「テキスト入力」にはエレメント固有の「value」に「$variable.変数名[添え字]」を設定します。

  • 「ボックス(繰り返し)」に1次元配列を設定します
  1. 「ボックス(繰り返し)」を選択します。
  2. エレメント固有の「list」に「$variable.1dim」を入力します。
  3. 「ボックス(繰り返し)」に配置した「テキスト入力」を選択します。
  4. エレメント固有の「value」を変数値にして「$variable.1dim[$index]」を入力します。
  • 「テーブル(繰り返し)」に2次元配列を設定します
  1. 「テーブル(繰り返し)」を選択します。
  2. エレメント固有の「list」に「$variable.2dim」を入力します。
  3. 「テーブル(繰り返し)」に配置した1列目の「テキスト入力」を選択します。
  4. エレメント固有の「value」を変数値にして「$variable.2dim[$index][0]を入力します。
  5. 同様に他の「テキスト入力」の「value」を入力します。入力値は「$variable.2dim[$index][列番号]」です。例えば、3列目の入力値は「$variable.2dim[$index][2]」です。
  • 「ボックス(繰り返し)」に3次元配列を設定します
  1. 一番外側の「ボックス(繰り返し)」を選択します。
  2. エレメント固有の「list」に「$variable.3dim」を入力します。
  3. 入れ子の「ボックス(繰り返し)」を選択します。
  4. エレメント固有の「list」に$variable.3dim[$index]を入力します。
  5. 同様にもう一つの入れ子も選択し、エレメント固有の「list」に$variable.3dim[$index]を入力します。
  6. 「ボックス(繰り返し)」に配置した「テキスト入力」を選択します。
  7. エレメント固有の「value」を変数値にして$variable.3dim[$index.2][$index.1][$index]を入力します。

プロパティの詳細と設定は以下のドキュメントをご参照ください。
IM-BloomMaker for Accel Platform ユーザ操作ガイド - プロパティの詳細と設定

$index,$index.1,$index.2は配列の添え字を表す変数です。
サンプルの表示値は配列の添え字と等しいものになっていますので$indexがどのように展開されるのかを確認することができます。

2次元配列の例では「テーブル(繰り返し)」を使用しました。「テーブル(繰り返し)」では$indexは行の添え字です。列の添え字は数値で指定します。

3次元配列の例では「ボックス(繰り返し)」エレメントを入れ子にしました。

入れ子にした繰り返しエレメントに設定した配列の添え字は、入れ子にしたループのように処理されます。

動作確認

  1. デザイナ画面のヘッダから「プレビュー」アイコンをクリックします。
  2. プレビュー画面に変数が展開された「ボックス(繰り返し)」と「テーブル(繰り返し)」が表示されます。

-CookBook
-

執筆者:


  1. […] ※繰り返し系エレメント内での $index の使い方は、こちらの CookBook IM-BloomMaker 繰り返しエレメントでの変数の使い方 を参考にしてください。 […]

  2. […] $index を使用します。 $index についてはこちらの cookbook IM-BloomMaker 繰り返しエレメントでの変数の使い方 […]

  3. […] ので、その配下に配置するエレメントは $index を取得することができます($index の詳細は別のレシピを参照してください)。ユーザ一覧に配置されたラベルの textContent で、変数を参照する […]

  4. […] IM-BloomMaker 繰り返しエレメントでの変数の使い方 […]

comment

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

関連記事

ファイルアップロード登録LDタスクの使い方

このCookBookでは、IM-LogicDesigner でのIM-BISのファイルアップロード登録LDタスクの使い方について紹介しています。 このタスクは、以下の使い方をすることができます。 単独 …

IM-BloomMaker 「ファイルアップロード」エレメントの利用方法

このCookBookでは、 2020 Spring でリリースした「ファイルアップロード」エレメントの利用方法について説明していきます。 登録画面でアップロードしたファイルを別画面でダウンロードするこ …

no image

IM-BloomMaker でページ切り替え時にアニメーションを付加する方法

このCookBookではエレメントの固有IDとCSSエディタを組み合わせ、「ページを開く」アクションでページ切り替え時に、横方向にスクロールするようなアニメーションが行われる画面を作成していきます。 …

no image

外部連携の後処理で任意のエラーメッセージを表示する

このCookbookでは、外部連携の後処理で任意のエラーメッセージを表示する方法を紹介します。 この方法を活用することにより、外部連携の後処理ででエラーが発生した場合、利用者に内容を通知することができ …

no image

IMBox に投稿種別を追加する方法(textile)

このCookBookでは、IMBoxに投稿種別を追加する方法について紹介しています。 以下のドキュメントを参照することで、IMBox に投稿種別を追加することができます。 IMBox プログラミングガ …