IM-BloomMaker リッチテーブルのセルを編集した時にアクションを実行する方法

このCookBookでは、「リッチテーブル」エレメントのセルを編集した時にアクションを実行する方法について、サンプルコンテンツを使って説明しています。

intra-mart Accel Platform 2025 Spring でリッチテーブルエレメントに追加された tableDataChangeEvent プロパティを利用すると、セルの値を変更した時にアクションを実行できます。
今回は tableDataChangeEvent プロパティを利用してセルの編集時にアクションを実行するサンプルを紹介します。
intra-mart Accel Platform 2025 Spring より前のバージョンでは、セルの編集時にアクションの実行はできないので注意してください。

画面サンプル

この CookBook で紹介するサンプルコンテンツの実際の画面です。
「品名」「数量」「金額」が編集可能で、セルが編集されると「数量」と「金額」の値から合計を算出して「合計」のセルに反映します。

サンプルコンテンツのインポートファイル

この CookBook で使用するサンプルコンテンツのインポートファイルです。
IM-BloomMaker のインポート画面からインポートしてください。
intra-mart Accel Platform 2025 Spring 以降のバージョンで利用できます。

cookbook257935_im_bloommaker-data.zip

手順

1. リッチテーブルのセルを編集した時に実行するアクションを作成する
2. リッチテーブルのプロパティを設定する
3. 動作確認

1. リッチテーブルのセルを編集した時に実行するアクションを作成する

• 上記の「サンプルコンテンツのインポートファイル」のcookbook257935_im_bloommaker-data.zipをダウンロードし、IM-BloomMaker のインポート画面からインポートしてください。
  インポートの方法は以下のドキュメントを参照してください。
  IM-BloomMaker for Accel Platform IM-BloomMaker ユーザ操作ガイド
• コンテンツ一覧画面を表示してください。
• コンテンツツリーから「intra-mart CookBook」＞「im_cookbook_257935」＞「im_cookbook_257935」のコンテンツを選択し、「デザイン編集」ボタンをクリックしてください。
  
• 右ペインの「アクション」タブを表示し、「Calculate Total」アクションの「編集」アイコンをクリックしてください。
  
• 「カスタムスクリプトを実行する」アクションアイテムの「詳細を表示」アイコンをクリックしてください。
  
• 以下のカスタムスクリプトが表示されます。

  const index = $variable.changedCell.index;
  const itemQuantity = $variable.dataSource[index].itemQuantity;
  const itemAmount = $variable.dataSource[index].itemAmount;
  
  if (typeof itemQuantity === 'number' && typeof itemAmount === 'number') {
    $variable.dataSource[index].itemTotal = itemQuantity * itemAmount;
  } else {
    $variable.dataSource[index].itemTotal = null;
  }
  

  編集されたセルの情報を「$variable.changedCell」から取得し、「$variable.dataSource」の配下の「itemQuantity」と「itemAmount」を掛けた値を「itemTotal」に格納します。
  「itemQuantity」と「itemAmount」が未入力の場合や数値以外の値が入力された場合は「itemTotal」に null を代入します。

• なお、他のアクションの処理内容は以下の通りです。

  No	アクション	説明
  1	Add Row	リッチテーブルに行を追加するアクションです。
  2	Delete Row	リッチテーブルの行を削除するアクションです。
  3	Delete selected rows	リッチテーブルで選択されている行をまとめて削除するアクションです。

• 「キャンセル」ボタンをクリックしてダイアログを閉じてください。

2. リッチテーブルのプロパティを設定する

• ページに配置されている「リッチテーブル」エレメントを選択し、右ペインの「プロパティ」タブを表示してください。
  
• リッチテーブルのプロパティが以下の通りに設定されていることを確認してください。
  

  No	プロパティ	設定値	説明
  1	allowEditing	$variable.allowEditing	セルの編集を行うには「allowEditing」プロパティを設定する必要があります。 このサンプルでは「itemName」「itemQuantity」「itemAmount」の列を編集できるように指定しています。
  2	tableDataChangeEvent	Calculate Total	冒頭で説明した通り、「tableDataChangeEvent」プロパティにアクションを設定すると、セルを編集した時にアクションを実行できます。
  3	changedCell	$variable.changedCell	セルを編集した時に編集したセルの情報が「changedCell」プロパティで指定した変数に格納されます。 「Calculate Total」アクションの中で、編集された行を判定するために利用しています。

3. 動作確認

• ヘッダの「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。
• 以下のような画面が表示されます。
  
• 任意の行の「数量」または「金額」のセルをクリックし、値を変更してください。
  
• Enter キーを押下すると、セルに入力した値に応じて「合計」セルの値が更新されます。