今回確認してみるフローのDatatable(データテーブル)コンポーネントはWinter’23で初登場ですが目玉の1つになりそうです。
既に使ったことがある人は応用編も是非見てみてください。
Datatableコンポーネントとは
プログラムカスタマイズ画面作成できるLWCやLightningコンポーネントを触ったことがある方にはおなじみのDatatableですが、今回ついに画面フローで使用できるようになりました。
もちろんプログラム時より出来ることは少ないですが、普段使用する上では十分という印象です。後述しますがDatatableでチェックを付けた複数レコードをフロー内で処理できることは革命的な進化という印象です。
Datatableは簡単に言いますと、リストビューのようにヘッダーとデータで構成されチェックを付けることで行選択も出来ます。商談をDatatableで表現した場合は下記イメージになります。
Datatableコンポーネントの各項目設定
まずはDatatableに表示したいデータを事前に取得します。今回は組織にある成約済み商談を「レコードを取得」要素で取得しておきます。保存するレコード数は「すべてのレコード」にしておくことでコレクション変数にしておきます。
次に画面フロー要素でコンポーネント「Datatable」が新設されているため、画面に配置します。
配置したDatatableコンポーネントの各プロパティ設定していきます。
| 設定名 | 説明 | |
| Source Collection | Datatableに表示するデータ元を指定します。今回は先ほど作成した「getWonOpps」という商談コレクション変数を使用します。 | |
| Row Selection Mode | Datatableの一番左の列に表示されるチェックボックスでの選択モードを指定します。Multipleは複数選択、Singleは単一選択、View onlyは選択不可とします。 チェックを付けた各レコードはフロー内の後続処理で使用できます。 | |
| Min Row Selection | ”Row Selection Mode”でMultipleとした場合、同時チェックできる最小数を指定します。 | |
| Max Row Selection | Row Selection ModeでMultipleとした場合、同時チェックできる最大数を指定します。 | |
| Default Selection | Datatableが表示されたタイミングで最初からチェックを付けたい場合、ここでコレクション変数を指定しておきます。 ”Source Collection”と同じでもいいですし、別のコレクション変数でもいいようです。 | |
| Configure Columns | Datatableの列にどの項目を表示するか指定します。1項目ずつしか追加できないようで、項目毎に下記のSource Field、Column Options、Default Text Overflow Modeを指定します。 | |
| Source Field | 追加する項目を選びます。 | |
| Column Options | チェックなしはオブジェクトマネージャでの項目通り、チェックありはDatatableだけの項目表示名が指定できます。 | |
| Default Text Overflow Mode ※1 | 通常のリストビューでも値の文字数が多い場合に折り返すか指定できますが同じものです。デフォルトの設定が指定できます。Wrap Textはテキストを折り返し、Clip Textはテキストを切り詰めに該当するようです。 |
※1 Default Text Overflow Modeは項目毎に「テキストを折り返し」「テキストを切り詰め」を指定できる下記箇所のデフォルト値を設定します。
Datatableで取得したレコードをフロー内で使用
フロー作成後にLightningページ配置すると、Datatableはリストビューのように各レコードでチェックを付けることできます。
Datatableを含む画面要素の後続処理では、チェックを付けた各レコードを使用することが出来るので一括更新や削除など多くの可能性を秘めています。今回はチェックをつけたレコードを一括削除してみます。
ちなみに標準機能にてチェックを付けた複数レコードをフロー内で処理できることは革命的なことで、今まではリストビューでチェックを付けてフロー内の「ids」テキスト変数で受け取るという非公式な方法のみでした。
先ほど作成した画面要素内のDatatableコンポーネントには「datatable」というAPI参照名をつけました。これを利用して「レコードの削除」要素で下記のように設定してみます。
今回は一括削除するので上記の”削除するレコードを選択”ではDatatable内のSelected Rowsを指定しますが、他にfirstSelected Rowsもありました。コレクション変数内の最初のレコードのみ指定するというものでしょうか。
結果的に下記のようなフローになりました。
ホーム画面に配置して試してみます。下記のように2レコードにチェックを付けて「次へ」ボタンを押すと2レコード一括削除に成功します。
コメント