ギャラリーの複数行にチェックを入れて一括操作するUIは、Power Apps でよく求められる機能のひとつです。Gallery.AllItems プロパティを使えば、選択中のアイテムをまとめて取得できます。チェックボックスの配置から全選択・全解除まで、実装の流れを一通り解説します。
ギャラリー内にチェックボックスを配置する
まずギャラリーテンプレート内に Checkbox コントロールを追加します。配置自体はドラッグ＆ドロップで完了しますが、Default プロパティの設定が重要です。
Checkbox の Default に固定値 false を入れると、ギャラリーが再読み込みされるたびにすべてのチェックがリセットされます。これはフィルターをかけてギャラリーの表示内容が変わったときも同様です。初期状態では全行チェックなし、という挙動でよければ Default は false のままで問題ありません。
- ギャラリーを選択してテンプレート編集モードに入る
- Insert → Input → Checkbox を追加する
- Checkbox の Default プロパティを false に設定する
- Checkbox をギャラリーテンプレートの左端に配置する
Gallery.AllItems で選択済みアイテムを取得する
Gallery.AllItems は、ギャラリーに現在表示されているすべてのアイテムをテーブルとして返すプロパティです。このテーブルにはギャラリーテンプレート内の各コントロールの値も含まれます。つまり Checkbox.Value も行ごとに取得できます。
選択済みの行だけを取り出すには Filter を使います。
Filter(GalleryTasks.AllItems, Checkbox1.Value)Checkbox1.Value が true の行だけが返ってきます。これが選択済みアイテムのテーブルです。この式をボタンの OnSelect やラベルの Text など、好きな場所で使えます。
CountRows で選択数を表示する
何件選択されているかをラベルに表示するには CountRows を組み合わせます。
CountRows(Filter(GalleryTasks.AllItems, Checkbox1.Value)) & " 件選択中"選択数がリアルタイムで変わるので、ユーザーが今何件選んでいるかをその場で確認できます。0件のときは表示しない、という制御は後述のアクションエリアUI記事で解説します。
選択済みテーブルを別ギャラリーの Items に使う
選択済みアイテムを確認用に別のギャラリーに表示したい場合も、同じ Filter 式をそのまま Items に渡せます。
Filter(GalleryTasks.AllItems, Checkbox1.Value)選択するたびにリアルタイムで確認ギャラリーが更新されます。承認フローや一括削除の確認画面などで重宝します。
Select All ボタンの実装
全件選択ボタンは変数を使います。Checkbox の Default に変数を設定することで、変数を true にした瞬間すべての行がチェック状態になります。
- Select All ボタンの OnSelect：UpdateContext({varSelectAll: true})
- Checkbox1 の Default プロパティ：varSelectAll
ただしこのままだと、ユーザーが個別のチェックボックスを操作しても varSelectAll が true のままなので、再クリックしても変化しなくなります。Select All ボタンを押した後は個別のチェック操作も有効にしたいため、Checkbox の OnCheck / OnUncheck で varSelectAll をリセットする処理を入れるか、全選択後は変数でなく Checkbox の自然な状態に委ねる設計にします。
個人的には Select All の後は変数をすぐ false に戻す方法が扱いやすいです。
// Select All ボタンの OnSelect
UpdateContext({varSelectAll: true});
UpdateContext({varSelectAll: false})true にして即 false に戻すことで、チェックボックスの Default が一瞬 true になり全選択状態になります。その後は各チェックボックスが独立して動くようになります。
Deselect All（全解除）の実装
全チェック解除には Reset 関数を使いたくなりますが、ギャラリー内のチェックボックスに Reset 関数を直接使っても動作しません。これは Power Apps の制約です。
代わりに使うのがリセット用変数のトグルパターンです。
- Deselect All ボタンの OnSelect：UpdateContext({varReset: !varReset})
- Checkbox1 の Default プロパティ：If(varReset, false, false)
varReset が変化するたびに Checkbox の Default が再評価されます。結果は常に false ですが、式が再評価されることでチェックボックスがリセットされます。一見無意味に見える仕組みですが、これが Power Apps でギャラリー内チェックボックスを一括リセットする定番パターンです。そういうものだと割り切ってしまいましょう。
まとめ
Gallery.AllItems を使った複数選択の基本パターンをまとめます。
| やりたいこと | 実装 |
|---|---|
| 選択済みアイテムを取得 | Filter(Gallery.AllItems, Checkbox.Value) |
| 選択件数を表示 | CountRows(Filter(...)) |
| 全選択 | varSelectAll を true→false にトグル |
| 全解除 | varReset をトグルして Default を再評価 |
複数選択が動いたら、次は選択中のときだけアクションエリアを表示するUIを作りましょう。コンテナを使った表示切り替えの実装パターンは複数選択時のアクションエリアをコンテナで作る記事で解説します。地道な積み重ねですが、使い勝手のいいUIができあがっていきます。
ギャラリーの使い方を一覧でまとめた記事はこちらからご覧ください。
