ギャラリーコントロールの項目が検索ボックス内の文字列と一致した場合、その文字列をハイライトする機能に関しての共有です。
私は非ITエンジニアの市民開発者なので、おそらく難しい言葉を使ってないと(自分では)思っているので気軽に読んで頂ければと思います。
その上でどなたかのお役に立てば幸いです。
1. 環境
手元に下記のようなShareppoint List, PowerApps(キャンバス)がある状況とします。
Sharepoint List (データソース名 "DummyDB")
PowerApps (上記SharepointListを元に生成したものに少し手を加えたもの)
・機能：左側カラム上部の「検索」にワード入れると人がソートされ、選択されたアイテムの詳細が画面の右側に表示されるApps。人材管理や資産管理などに使える想定。
2. 実例
下記のように、検索ボックスに文字を打つとその文字の部分をハイライトする機能です。
以降にこの機能についての解説を述べてます。
※現状大文字・小文字を区別せずハイライトする手段がなさそうなので今回はその前提の機能の解説です。なおギャラリーコントロールのフィルター自体は大文字・小文字を区別しないので安心してください。
3. 解説 - HTMLテキストラベルとその設定
この機能を利用する際はギャラリーコントロール内に通常のテキストラベルではなく、HTMLラベルを配置します。
今回の例では下記の3つのHTMLラベルがギャラリーコントロール内に配置されています。
検索ボックスのテキスト入力ラベル名を"SearchInput1"とした場合、例えばName(名前)のHTMLラベルのHtmlTextプロパティは下記のように記載されています。
※Name(名前)情報はSharepoint上"タイトル"カラムに入れているので、ThisItem.Titleという表現が出てきます。
この部分について解説すると下記のような感じです。
簡単にまとめると「HTMLラベル内文字列と検索文字列で一致してる箇所に、HTML の <mark>タグをつける」ことをしています。
# 実例のコードの解説
HtmlText = Substitute('ギャラリーコントロール内のHTMLラベル内に表示されている文字列', '検索に利用されている文字列', "<mark>" & '検索に利用されている文字列' & "</mark>")
# もっとシンプルな解説
HtmlText = Substitute('HTMLラベル内文字列', 'ハイライトしたい文字列', "<mark> & 'ハイライトしたい文字列' & </mark>")
- Substitute関数：文字列の入れ替えをする関数 (実例だと"ThisItem.Title")
- <mark> ~ </mark>: HTMLのmark(ハイライトの表現をするタグ)
- &: 文字列の足し算の記号
これをギャラリーコントロール内の全部のHTMLラベルに設定すれば、すべての項目に対しハイライト機能を実装できます。(ギャラリーコントロールじゃなくても全然いいと思いますが)
またタグを<mark>以外にすることもできるので、自身のしたい表現に合わせてタグを調整してみるといいと思います
4.おわりに
関連する記事もいくつかあるので、興味あればこちらも覗いてみて下さい。