Power Appsでギャラリーを使った一覧画面を作成していて、検索機能で表示を減らすことはできるけど、逆に表示を目立たせたいことはないでしょうか？今回は、検索にヒットした行を視覚的にハイライト表示する方法をご紹介します。

事前準備とデータ設定

まず、データは事前に用意してギャラリーコントロールに設定しておきましょう。今回の実装では、既存のギャラリーに検索機能を追加していく形で進めていきます。以下のコレクションを利用しています。

ClearCollect(
    colSearchDemo,
    { Id: 1, Title: "Power AppsでPower Fxを学ぶ", Body: "Power FxはPower Appsの数式言語です。" },
    { Id: 2, Title: "見積の確認と見積書の作成", Body: "見積を再確認して見積書を修正します。" },
    { Id: 3, Title: "appのテストとAppの改善", Body: "appを複数回テストし、Appの品質を向上。" },
    { Id: 4, Title: "請求処理と請求書の発行", Body: "請求データを確認し、請求書を送付します。" },
    { Id: 5, Title: "Power BIとPower Automate", Body: "Power BIとPower Automateを連携します。" }
);

ハイライト用の図形を配置

検索結果をハイライト表示するために、ギャラリーコントロールの行ごとの背景色として使用する四角の図形をギャラリー内に配置します。

この図形が、条件に応じて色を変更してハイライト効果を演出するポイントになるんです。

FIND関数を使った実装方法

基本的な式の構成

図形のフィルプロパティに式を記載していきます。式の書き方はいくつかありますが、今回はFind関数を使った方法で実装してみましょう。

条件によって背景色を変えるので、以下のような組み合わせで式を構成します：

• If関数：条件によって表示を切り替える
• Find関数：テキスト入力コントロールのテキストがTitle 列に含まれているかチェック

Find関数の特徴を理解する

ここで重要なのは、FIND関数はテキストが含まれている場合、そのテキストの開始位置を数値で返すという特徴です。つまり、見つからない場合は0を返すので、「0より大きい」という条件で判定できるんですね。

具体的な式の書き方

条件が一致したら背景色をハイライトにし、そうでない場合は透明にする式は以下のような形になります：

If( 
    Find(TextInput2.Text,ThisItem.Title) > 0,
    RGBA(100,40,40,0.3),Color.Transparent
)

空文字対策の重要性

ただし、Find関数には注意点があります。検索テキストが空の場合、数値で1を返すため、最後に条件式に「テキスト入力コントロールが空でない」ことも追加する必要があります。

If( 
    Not(IsBlank(TextInput2.Text)) && Find(TextInput2.Text,ThisItem.Title) > 0,
    RGBA(100,40,40,0.3),Color.Transparent
)

これを忘れてしまうと、何も入力していない状態でも全ての行がハイライトされてしまいます。

動作確認

実際に動かしてみると、検索テキストを入力した際に該当する行だけがハイライト表示されることが確認できます。これで、ユーザーは検索結果を一目で把握できるようになりますね。

複数列検索への応用

検索対象の列を複数にしたい場合はどうでしょうか？そんな時に便利なのがOr関数です。

Or関数を使ってFind関数部分を増やすようにすると、複数の列に対して検索を実行できます：

If( 
    Not(IsBlank(TextInput2.Text)) &&
    Or(
        Find(TextInput2.Text,ThisItem.Title) > 0,
        Find(TextInput2.Text,ThisItem.Body) > 0
    ),
    RGBA(100,40,40,0.3),Color.Transparent
)

このような形で実装すると、タイトル列だけでなく説明列なども含めた横断的な検索が可能になります。

まとめ

いかがでしたでしょうか？Find関数とIf関数を組み合わせることで、Power Appsでも簡単にハイライト機能を実装できることがわかりました。

検索機能があるだけでなく、結果が視覚的にわかりやすく表示されることで、ユーザビリティが格段に向上します。ぜひ皆さんのアプリでも試してみてください。参考になれば幸いです。