この記事でできること
この記事では、Power Appsのギャラリーに、以下の機能を実装した方法を説明します。
- 期間フィルター（今日／7日間／30日間／全期間）：ドロップダウンで切り替え
- 種目フィルター：「全種目」を先頭に追加し、残りはSharePointリストから取得
- ソート切り替え：アイコンタップで昇順・降順を入れ替え
- 件数表示：現在の絞り込み結果を「◯件」で表示
ギャラリーの絞り込みで詰まった方の参考になれば嬉しいです。
完成イメージ
実装の全体像
H3: 使うコントロールの一覧
| コントロール（目的） | 役割 |
|---|---|
| ドロップダウン（期間） | 今日・7日間・30日間・全期間を切り替え |
| ドロップダウン（種目） | ExerciseMaster(SharePointリスト)の種目一覧 +全種目 |
| アイコン（ソート） | ギャラリーで表示するレコードの期間を 昇順・降順を切り替え |
| ラベル（件数） | 絞り込み後の件数を表示 |
完成コード（ギャラリーのItemsプロパティ）
最初に、完成コードを確認しておきます。次の実装手順を順に行うとこの関数をWorkoutLogGalleryの Items プロパティに入れることになります。
SortByColumns(
Filter(
//期間フィルター
Switch(
PeriodFilterDropdown.Selected.Value,
"今日", Filter(WorkoutLog, WorkoutDate = Today()),
"7日間", Filter(WorkoutLog, WorkoutDate >= DateAdd(Today(), -6, TimeUnit.Days)),
"30日間", Filter(WorkoutLog, WorkoutDate >= DateAdd(Today(), -29, TimeUnit.Days)),
Filter(WorkoutLog, true)
),
//種目フィルター
ExerciseFilterDropdown.Selected.タイトル = "全種目" || ExerciseName = ExerciseFilterDropdown.Selected.タイトル
),
//並び替え
"RecordedAt",
If(gSortDescending, SortOrder.Descending, SortOrder.Ascending)
)各部分の役割
| 部分 | 役割 |
|---|---|
SortByColumns(...) | 外側でソートをかける |
Switch(...) | 期間ドロップダウンの値に応じて条件を切り替える |
Filter(WorkoutLog, ...) | 期間・種目の条件で絞り込む |
"全種目" || ... | 全種目選択時はスキップ、それ以外は種目名で絞る |
gSortDescending | trueなら降順、falseなら昇順 |
⚠️ コントロール名（PeriodFilterDropdown, ExerciseFilterDropdown）は実際のアプリに合わせて読み替えてください。
実装手順
Step1｜App.OnStartでコレクションを作る
種目ドロップダウンの選択肢を取得するため、アプリ起動時にコレクションを作成します。
App の OnStart プロパティに以下を設定します。
//コレクション
ClearCollect(
colExerciseFilter,
{Title: "全種目"},
ExerciseMaster
);
Set(gSortDescending, true);ポイントは2つです。
- 「全種目」を先頭に追加してからExerciseMasterを追加している
gSortDescendingの初期値をここでtrue（降順）にセットしている
Step2｜ドロップダウンを2つ配置する
期間ドロップダウンの Items プロパティに選択肢を設定します。
["今日", "7日間", "30日間", "全期間"]種目ドロップダウンの Items プロパティには、Step1で作ったコレクションを設定します。
colExercises
Step3｜ソートアイコンを配置する
アイコンコントロールを配置し、以下を設定します。
Icon プロパティ：
If(gSortDescending, Icon.ArrowDown, Icon.ArrowUp)OnSelect プロパティ：
Set(gSortDescending, !gSortDescending)タップするたびに OnSelect で gSortDescendingの true / false が切り替わり、アイコンの向きも連動して変わります。
Step4｜ギャラリーのItemsに完成コードを貼る
ギャラリーのItems プロパティに、最初の完成コードを貼り付けます。
Step5｜件数表示ラベルを追加する
ラベルコントロールを配置し、Text プロパティに以下を設定します。
CountRows(WorkoutLogGallery.AllItems) & "件"WorkoutLogGallery.AllItems は先ほどのギャラリーItemsプロパティで絞り込んだ後の全件数を返します。ページングがある場合でも正確な件数が取れます。
Step6｜右寄せレイアウトをスペーサーコンテナで作る
Power Appsで右寄せを実現したいときは、よく水平コンテナーをスペーサーとして挟みます。
スペーサー用コンテナーの 幅（伸縮可能）をオンにすると余白をすべて吸収し、右側のコントロール（ここでは、昇順降順切り替えアイコンと件数）が右端に寄ります。
まとめ
今回実装したのは以下の5つです。
- Switch ＋ Filter で期間フィルターを実装した
- ClearCollect で「全種目」付きの動的ドロップダウンを作った
- gSortDescending 変数のトグルでソート切り替えを実装した
- CountRows(WorkoutLogGallery.AllItems) で絞り込み後の件数を表示した
- スペーサーコンテナー（幅(伸縮可能)オン）で右寄せレイアウトを実現した
Power Appsでギャラリーを実装するときによく使っている組み合わせです。ぜひ手を動かして試してみてください。
Power Platformを触り始めたばかりの方に向けて、これから記事を投稿していく予定です。よかったらブログをブックマークして、またのぞきに来てください。
あわせて読みたい
この記事の前に読むとスムーズです。シングルスクリーンの作り方はこちら。
次のステップはこちら。SubmitFormとPatchの使い分けです。
コメント