Power Apps ギャラリーで選択行をハイライトする｜TemplateFillの設定方法

ギャラリーの選択行をハイライトするには TemplateFill プロパティを使います。まず IsSelected で動かしてみて、その問題点を理解した上で変数（varRecord）管理に切り替えるのが正しい順番です。

TemplateFill とは何か・どこで設定するか

TemplateFill はギャラリーの各行（テンプレート）の背景色を設定するプロパティです。通常は Transparent（透明）が設定されていて、どの行も同じ背景のフラットな表示になっています。ここに条件付きの色を設定することで、選択行だけを目立たせられます。

テンプレート領域を選択する方法

TemplateFill を設定するには、ギャラリーのテンプレート領域（行の背景部分）を選択する必要があります。ギャラリーをクリックするとギャラリー全体が選択されますが、そこからもう一度クリックするとテンプレート内に入ります。慣れないうちはツリービューからギャラリー配下の Template を直接選ぶのが確実です。

テンプレートを選択できたら、数式バー左側のプロパティドロップダウンから TemplateFill を選んで数式を入力します。右ペインのプロパティタブから探すより、数式バーのドロップダウンを使う方がすぐ見つかります。ギャラリーコントロールの基本的な構造についてはギャラリーコントロールの基礎記事も参考にしてください。

IsSelected を使ったシンプルなハイライト

まずは IsSelected を使った最もシンプルな実装から試しましょう。完成形に向けていきなり変数を使うのではなく、まず動く状態を作って挙動を確認するのが Power Apps 開発の進め方です。

TemplateFill に If 条件を書く

TemplateFill に次の数式を入力します。

If(ThisItem.IsSelected, ColorFade(Color.Blue, 0.7), Transparent)

これだけで、クリックした行が青色でハイライトされます。IsSelected は Power Apps がギャラリーの各行に自動で付与するプロパティで、その行が選択状態のとき true を返します。

ColorFade で色を薄める

ColorFade(Color.Blue, 0.7) は Blue を 70% 薄くした色を返す関数です。第2引数の値は 0〜1 の範囲で指定します。0 に近いほど元の色に近く、1 に近いほど白に近くなります。

完全に元の色を使うと背景が濃すぎて、ギャラリー内のテキストが読みにくくなります。個人的には 0.6〜0.8 で調整することが多く、デザインのテーマカラーに合わせて選ぶときれいにまとまります。Power Apps のUI設計全般については見た目と使いやすさへのこだわりも参照してみてください。

IsSelected の問題点

IsSelected で動くことを確認したら、次にその限界を把握しておきます。フォームと連動させるアプリを作ると、IsSelected では対処できない問題が必ず出てきます。

新規レコード保存後にハイライトがリセットされる

新しいレコードをフォームで追加して保存した後、ギャラリーがデータを再取得するタイミングで IsSelected がリセットされます。具体的には次の流れで問題が起きます。

ギャラリーから既存レコードを選択する
新規追加ボタンでフォームを NewMode にする
フォームを入力・保存する
ギャラリーがデータを再取得する
直前まで選択していたレコードのハイライトが消え、フォームが前の選択を表示したまま残る

IsSelected がギャラリーの表示状態に依存していて、データ再取得のタイミングでリセットされてしまうのが原因です。これはバグではなく Power Apps の仕様ですが、実用上は大きな問題になります。私が最初に作ったアプリでもこの問題にぶつかり、保存のたびにハイライトが飛ぶ挙動をユーザーに不思議がられました。

フォームの Item プロパティとの連動も不安定になる

フォームの Item プロパティに Gallery.Selected を指定している場合、IsSelected がリセットされると同時にフォームの参照先も失われます。保存直後にフォームが空になったり、前に選んでいたレコードを表示し続けたりする現象が起きます。この問題の根本的な解決策が、次の varRecord への切り替えです。

varRecord への切り替え

IsSelected の問題を解消するには、選択レコードを変数（varRecord）に保存して、TemplateFill の判定もその変数を参照するよう変更します。コンテキスト変数の使い方についてはグローバル変数とコンテキスト変数の違いと使い分けを参考にしてください。

OnSelect で varRecord に保存する

ギャラリーの OnSelect プロパティに次の数式を書きます。

UpdateContext({varRecord: ThisItem})

行をクリックするたびに varRecord にそのレコードが保存されます。UpdateContext はコンテキスト変数（画面スコープ）を更新する関数です。varRecord というのは変数名なので、任意の名前に変えて構いません。ただし、プロジェクト内で統一した命名規則を使うとコードの読みやすさが上がります。

TemplateFill を varRecord で判定する

TemplateFill の数式を次のように変更します。

If(ThisItem.ID = varRecord.ID, ColorFade(Color.Blue, 0.7), Transparent)

IsSelected の代わりに、現在の行の ID が varRecord に保存されたレコードの ID と一致するかで判定しています。varRecord の中身は、データが再取得されても変わりません。ゆえに保存後もハイライトが保持されます。SharePoint を使っている場合は ID（数値型）、Dataverse を使っている場合は GUID で比較します。

新規ボタンでハイライトを解除する

新規追加ボタンを押したとき、varRecord を空にしてハイライトをすべて解除するのが自然な挙動です。新規ボタンの OnSelect に次を追加します。

UpdateContext({varRecord: Blank()})

varRecord を Blank() にすると、ThisItem.ID = varRecord.ID がどの行でも false になるため、全行のハイライトが消えます。この制御は IsSelected ではできません。新規モードに入ったことをユーザーが視覚的に理解できる、という点でも重要な実装です。

フォームの Item も varRecord に変更する

フォームの Item プロパティを Gallery.Selected から varRecord に変更するのも忘れずに行います。

varRecord

これでフォームの参照先も varRecord になるため、データ再取得後もフォームが正しいレコードを表示し続けます。ギャラリーとフォームを変数でつなぐ全体設計については、後続の記事で詳しく解説する予定です。

IsSelected vs varRecord の比較

比較項目	IsSelected	varRecord
実装の手軽さ	数式1行のみ	OnSelect の追加が必要
データ再取得後のハイライト	リセットされる	保持される
フォームとの連動	不安定	安定
新規モードの制御	できない	Blank() で解除できる
用途	プロトタイプ・確認用	実用アプリ

現場で作るアプリのほとんどはフォームと連動するため、最初から varRecord を使うのをおすすめします。IsSelected はプロトタイプや動作確認のような限定的な場面だけで使う、と割り切るのがよいです。

まとめ

TemplateFill による行ハイライトは、IsSelected で動作を確認してから varRecord に切り替えることで実用的なアプリになります。変数の管理が一つ増えますが、フォームとの連動が安定するメリットは大きいです。

varRecord の仕組みを理解すると、ハイライト以外にもフォームの制御や新規モードの切り替えなど、さまざまな場面で応用できます。ギャラリー表示の基本についてはギャラリーのレイアウト設定もあわせて参照してみてください。地道に積み重ねていきましょう。

ギャラリーの使い方を一覧でまとめた記事はこちらからご覧ください。