複数選択チェックボックスを実装したら、次は選択した件数が 0 のときはアクションエリアを隠し、1件以上になったら表示するUIを作りましょう。コンテナを使えば X・Y・Height の手動計算なしにレスポンシブな表示切り替えが実現できます。
Gallery.AllItems を使った複数選択の基本については複数選択チェックボックスの実装記事で解説しています。この記事はその続きとして、選択数に応じたUIの表示切り替えに特化した内容です。
VerticalContainer にギャラリーを収める
まず画面レイアウトの土台として VerticalContainer（縦方向コンテナ）を使います。ギャラリーをコンテナに入れることで、アクションエリアが展開・折りたたまれても、ギャラリーの幅が自動的にコンテナに追従します。昔は X・Y・Width を手動で計算して配置していましたが、コンテナを使えばその手間が完全になくなります。
- Insert → Layout → Vertical Container を追加する
- VerticalContainer の中にギャラリーを配置する
- アクションエリア用の HorizontalContainer をギャラリーの上か下に追加する
VerticalContainer の Fill を設定して背景色を付けておくと、レイアウトの境界が見えて開発中の確認がしやすくなります。
アクションエリアの表示条件を設定する
アクションエリア（HorizontalContainer）の Visible プロパティに次の式を設定します。
Not(IsEmpty(Filter(GalleryTasks.AllItems, Checkbox1.Value)))Filter(GalleryTasks.AllItems, Checkbox1.Value) でチェックが入った行のテーブルを取り出します。IsEmpty はそのテーブルが空かどうかを判定します。Not でその逆にすることで、1件以上選択されているときだけ true になります。
式を分解して読むと IsEmpty が空なら true を返すので、Not(IsEmpty(...)) は空でないとき（つまり1件以上選択中）に true になる、という意味です。慣れるまで少し読みにくいですが、パターンとして覚えてしまうと応用が利きます。
コンテナの Flexible height でアニメーションなしに消す
Visible を false にすると要素が消えますが、コンテナの場合は Visible が false になってもスペースが残ることがあります。完全に消して下のコンテンツが詰まるようにするには、コンテナの Flexible height 設定を活用します。
アクションエリアコンテナの Height プロパティに次の式を使うと、Visible が false のときに高さが 0 になります。
If(Not(IsEmpty(Filter(GalleryTasks.AllItems, Checkbox1.Value))), 60, 0)選択中は高さ 60（ボタンが収まるサイズ）、非選択中は高さ 0 にすることで、アクションエリアが完全に消えてギャラリーが上に詰まります。Visible と Height の両方を制御するのが確実です。
アクションエリアの中身を設計する
アクションエリアには選択件数の表示と操作ボタンを配置します。HorizontalContainer を使うと横並びレイアウトが簡単に作れます。
- HorizontalContainer 内にラベルを追加して選択件数を表示する
- 削除ボタン・承認ボタンなど操作ボタンを右側に配置する
- コンテナの LayoutJustifyContent を SpaceBetween にしてラベルと右側ボタンを両端に揃える
ラベルの Text プロパティには次の式を使います。
CountRows(Filter(GalleryTasks.AllItems, Checkbox1.Value)) & " 件選択中"
コンテナを使う以前との比較
コンテナが登場する前は、アクションエリアの Y 座標をギャラリーの Y + Height で計算していました。アクションエリアの高さが変わるたびにギャラリーの Y を手動で調整する必要があり、画面のレイアウト変更が非常に大変でした。
| 方法 | Y・高さの管理 | レイアウト変更 |
|---|---|---|
| コンテナなし（旧来） | X・Y・Height を手動計算 | 変更のたびに全座標を修正 |
| VerticalContainer | コンテナが自動追従 | コンテナの順序を変えるだけ |
コンテナを使うと、アクションエリアを上に出すか下に出すかも、コンテナ内の順序を入れ替えるだけで変更できます。昔と比べて格段に楽になったと感じます。Power Apps のバージョンが上がるごとにこういう地味ながら実用的な改善が積み重なっているので、最新の使い方を追うのは損ではありません。
まとめ
複数選択UIのアクションエリアは、Not(IsEmpty(Filter(Gallery.AllItems, Checkbox.Value))) を Visible の条件にするだけで動きます。コンテナの Height も 0 に制御することで完全に消えて、ギャラリーが詰まるレイアウトが実現できます。
VerticalContainer と HorizontalContainer を組み合わせたレイアウト設計に慣れると、あらゆる画面デザインがすっきりまとまるようになります。X・Y の手動計算から卒業して、コンテナベースの設計に移行していきましょう。
ギャラリーの使い方を一覧でまとめた記事はこちらからご覧ください。
