【Power Apps】SaaSによくある複数選択可能なテーブルの作り方

2024.12.25

Power Appsではギャラリーやテーブルなど一覧表示を行うコントロールが用意されていますが、表示されているものを複数選択する機能を持つコントロールはありません。
(コンボボックスやモダンテーブルで複数選択は可能ですが、ユーザーライクではない)

この機能を実装することで、オブジェクト指向UIデザインに沿った一覧表示UIを作ることができるようになります。

オブジェクト指向ＵＩデザイン使いやすいソフトウェアの原理/技術評論社/ソシオメディア

posted with カエレバ

楽天市場

Amazon

ギャラリーの設定
チェックボックスの追加
全選択・全非選択の実装
ヘッダーの設定など
選択されたデータの確認
選択されたデータに対して操作を行う
アップデート例
1. 横スクロール可能にする

ギャラリーの設定

キャンバスアプリ内にギャラリーコントロールを追加します。
ギャラリーのデータソースには、SharePointリストやDataverseなど、操作を行う対象のデータソースを指定してください。

チェックボックスの追加

ギャラリー内にチェックボックスを追加します。

以下のテキストをコピーしたうえで、右クリック→貼り付け→Paste codeでコントロールを貼り付けられます。

- CheckboxCanvas1:
    Control: CheckBox
    Properties:
      OnCheck: =Collect(ColCheck, ThisItem)
      OnSelect: =
      OnUncheck: =RemoveIf(ColCheck, ID = ThisItem.ID)
      Checked: =ThisItem.ID in ColCheck.ID
      Label: =""
      Height: =30
      Width: =38

OnCheckとOnUnCheckでそれぞれコレクションにThisItemを追加/削除しています。

また後述する全選択/全選択解除に対応できるように、Checked(デフォルトの選択状態)をコレクションに選択された値が含まれているかどうかに設定しています。
SharePointリスト以外のテーブル値の場合は、一意になるような列をinで比較してください。

全選択・全非選択の実装

全選択・全非選択の機能を実装します。ギャラリー上部に以下のチェックボックスを設置してください。

- CheckboxCanvas1_1:
    Control: CheckBox
    Properties:
      OnCheck: =ClearCollect(ColCheck, Gallery1.AllItems)
      OnSelect: =
      OnUncheck: =RemoveIf(ColCheck, ID in Gallery1.AllItems.ID)
      Checked: =IsEmpty(ColCheck)
      Label: =""
      Height: =30
      Width: =38
      X: =30
      Y: =55

OnCheckではギャラリーに表示されているすべてのデータが選択され、OnUnCheckではその逆の操作が実行されます。

注意点としてこの数式のままだとギャラリーに表示されているデータ(既定で100件)しか操作されないので、すべてのデータを捜査対象とする場合は名前付き計算式を活用するなどの対応が必要になります。