Power Apps ギャラリーでレコードのステータスを一覧表示するレイアウト｜ボタンで状態を色分けする実装

Power Apps のギャラリーでレコードのステータスを色分けして一覧表示したい、というニーズは現場でよく出てきます。AddColumns で計算列を追加し、If 式で色を切り替えるパターンを覚えておけば、たいていの一覧表示要件に対応できます。

AddColumns でギャラリーに計算列を追加する

ギャラリーの Items に AddColumns を使うと、データソースを変更せずに表示専用の列を動的に追加できます。例えば最終更新日や件数をギャラリーの各行に持たせたい場合、AddColumns で LookUp や CountRows の計算結果を列として付与します。

// ギャラリーの Items 式
AddColumns(
    colResentVessel,
    "LastSubmittedDate",
    LookUp(colSubmitLog, VesselID = ThisRecord.ID, SubmittedDate),
    "SubmitCount",
    CountRows(Filter(colSubmitLog, VesselID = ThisRecord.ID))
)

colResentVessel が船舶リストのコレクション、colSubmitLog が提出ログのコレクションです。AddColumns の第2引数以降に列名と計算式のペアを並べます。ここでは LastSubmittedDate（最終提出日）と SubmitCount（提出件数）の2列を追加しています。

このパターンの利点はデータソース（SharePointリストなど）を直接変更しないことです。表示のためだけの計算列をデータソースに追加してしまうと、Power Automate や他のアプリとのデータ連携が複雑になります。AddColumns であれば Power Apps のメモリ上だけで計算が完結します。

ギャラリー内のレイアウト設計の基礎はPower Apps コンテナ完全ガイドで触れています。AddColumns と組み合わせてより実践的なギャラリーを構築する方法がこの記事の主題です。

テンプレートサイズの均等計算

ギャラリーの各行（テンプレート）の高さを均等にするには、ギャラリー全体の高さから行間のパディングを引いて行数で割る式を使います。例えば9行表示する場合の式はこうです。

// TemplateSize プロパティ
(Self.Height - Self.TemplatePadding * 10) / 9

TemplatePadding * 10 は上端・各行間・下端のパディングが合計10か所あるためです（9行の間には10か所の境界がある）。この式でギャラリーの高さが変わっても自動的に9行がぴったり収まります。ギャラリーをスクロールさせずに全件表示したい一覧系の画面でよく使うパターンです。

行レイアウトの構成

横並び要素の配置

1行の中に船舶名・最終更新日・件数・ステータスボタンを横並びで表示します。各要素の幅を固定値で決めて、X 座標を前の要素の X + Width で連結していくと位置が確実に決まります。

// 各要素の X 座標と幅
lblVesselName:   X = 0,   Width = 160
lblLastDate:     X = 160, Width = 120
lblSubmitCount:  X = 280, Width = 80
btnStatus:       X = 360, Width = 100

X を前の要素の X+Width で連結することで、1要素の幅を変えても後続のずれが発生しません。コンテナの Auto Layout を使う方法もありますが、ギャラリーテンプレート内では絶対座標で管理した方がシンプルなケースも多いです。テンプレート内コンテナのレイアウト設計についてはギャラリー内にコンテナを使ったレイアウト設計の記事で詳しく解説しています。

条件付きボタンで状態を色分けする

ステータスボタンは件数が0かどうかで Color・Fill・Text を切り替えます。AddColumns で付与した SubmitCount を使います。

// ステータスボタンの Text
If(ThisItem.SubmitCount > 0, "提出済", "未提出")

// ステータスボタンの Fill
If(ThisItem.SubmitCount > 0, RGBA(46,139,87,1), RGBA(210,100,50,1))

提出済みは緑（SeaGreen相当）、未提出はオレンジ（DarkOrange相当）にしています。私のアプリでは1日の船舶作業提出状況をこのギャラリーで管理しています。朝9時の時点でオレンジが多いと現場に声をかけるきっかけになります。色で状態がわかるというのは、文字で読むより判断が速いので現場に好評です。

ColorFade で背景色とテキスト色を自動対応させる

ボタンの背景色と文字色を手動でそれぞれ設定すると、色を変更するたびに2か所修正が必要になります。ColorFade を使うと、背景色から自動で対応する薄い色を生成できます。

// ボタンの文字色（Color）はFillを70%淡くした色
ColorFade(Self.Fill, 0.7)

ColorFade(Self.Fill, 0.7) は Fill の色を70%薄くした色を返します。背景が緑なら文字は薄い緑、背景がオレンジなら文字は薄いオレンジになります。色の組み合わせを考える手間がなくなる上に、どの色でも一貫した見た目になります。これは体感的にかなり便利で、色の組み合わせを試行錯誤していた時間が大幅に減りました。

DisplayMode.View でステータスボタンをクリック不可にする

ステータスボタンは状態を表示するためのものなので、クリックさせる必要はありません。DisplayMode を View に設定するとクリックイベントが発生しなくなります。

// ステータスボタンの DisplayMode
DisplayMode.View

DisplayMode.View にすると見た目はボタンのままでクリックできない状態になります。Edit にするとクリックでき、Disabled にするとグレーアウトします。ステータスの色分けは表示専用なので View が適切です。Navigate や詳細画面への遷移を担うボタンは別に用意して、役割をはっきり分けておくとコードが読みやすくなります。

区切り線を追加する

ギャラリー行間に区切り線を入れるには、Rectangle を Y=0・Height=1 で配置します。

// セパレーター Rectangle の設定
Y: 0
Height: 1
Width: Parent.TemplateWidth
Fill: RGBA(220, 220, 220, 1)
BorderStyle: BorderStyle.Dashed

BorderStyle.Dashed にすると点線になります。実線にしたい場合は BorderStyle.Solid を使います。行数が多いギャラリーでは区切り線があるだけで視認性がかなり上がります。1行ずつの境界がはっきりすることで、横並びのデータを目で追いやすくなります。

まとめ

AddColumns で計算列を追加し、If で色を切り替え、ColorFade で色を自動対応させる。この3つのパターンを組み合わせれば、データソースを変更することなくリッチなステータス一覧が作れます。DisplayMode.View で表示専用ボタンを作る考え方も、アプリ設計をすっきりさせる上で重要です。市民開発はこういった小さな積み重ねで、現場で本当に使われるアプリに育っていきます。