自動生成 レスポンシブアプリのカスタマイズ ③ ギャラリーフィルター部分の調整

はじめに

今年2023年の6月頃から従来のスマホレイアウトに加えて、PC・タブレットとスマホに対応可能な
レスポンシブな自動生成アプリが作成できるようになっています。
その①では上記のおさらいも含め新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法、その②ではSharePointリストからレスポンシブ対応の自動生成アプリを作成し、レイアウトやページ構成などの概要部分をご紹介しました。

その③ではギャラリーの基本的な調整とカスタマイズのサンプルをご紹介します。
SharePoint リストをデータソースとした場合のサンプルです。

自動生成アプリの作成は前回記事をご参考ください。作成後の修正点について以降記載していきます。

TIPS※日本環境 2023/11/20 時点のバージョン：3.23105.18の内容で記載しています

NOTE自動生成されるアプリの内容は6月にQiitaに記載した状態から基本変わっていませんでした。
一部はリライト的な内容にもなりますがご容赦ください。

サンプルSharePointリストの構成

カスタマイズサンプルシリーズでは以下に記載しているリスト構成をベースに記載しています。
今後記載する列の操作などはこの定義にそって書いていますので、適宜ご自身の構成と読み替えて調整いただければと思います。

自動生成 レスポンシブアプリのカスタマイズ ② 自動生成アプリ概要 | Power Apps Tips ログ (youseibubu.com)

ギャラリーの 委任警告の対応

以下自動作成でSharePoint リスト（以降SPOリストと表記）から作成が完了した時点の内容です。
このうち、ギャラリーに出ている委任警告についてまずは調整します。

ギャラリーのItemsプロパティは以下のようになっています。
DataverseであればSearch関数が委任対応しているので問題ありませんが、SPOリストの場合はSearchやin関数での部分一致・含む検索は委任対象外のため警告が表示されます。

Code//ギャラリーのItemsプロパティ　
Search([@商品リスト], SearchInput1.Text, “Title”, “Title”)

NOTE★バージョン：3.24042以降ではAddColumnsの書式が変わっています。””なしで定義が必要なので読み替えてください。
詳細はこちらをご参照ください。
AddColumnsやSearch関数などで内部名を二重引用符（ダブルクォーテ）が不要になりました！（バージョン：3.24042.20以降） | Power Apps Tips ログ (youseibubu.com)

※SearchInput1（検索用のテキスト入力）の内容でギャラリーをフィルターする実装。Searchなので部分一致

SPOリストの場合は委任対象外の関数のため、この状態のままだとデータ行の制限以上のデータ件数となると正しい結果が表示されない可能性があります。
データ行の制限（既定500～2000まで）以内の前提であればそのままでも問題ありません。
※委任については各種記事が存在しますので別途ご確認ください。

StartsWithで前方一致検索へ置き換え

SPOリストの場合は前方一致検索であれば委任対象となり、警告は無くなりデータ量が多い場合も正常に取得が可能となります。
文中の途中一致は対応できませんが、前方一致のFilterでStartsWithでの一致検索に置き換える調整が可能です。

Code// Filterでの前方一致に置き換え
Filter(商品リスト,StartsWith(Title,SearchInput1.Text))

委任警告が消え、前方一致検索の動きとなります。

ひとまず上記を対応しておけば委任警告は消えますので一旦これでOKかと思います。
さらに追加でカスタムする場合のシンプルな例をいくつかご紹介します。

追加カスタム：Filter対象の列を増やす

Filterの対象は他の列に変更したり、追加で複数の列に対して行うことも可能です。
以下サンプルでは OR条件で検索してタイトルまたは詳細に前方一致検索をかけています。

Code//タイトル列または詳細列に前方一致検索をするサンプル
Filter(商品リスト,StartsWith(Title,SearchInput1.Text)|| StartsWith(Detail,SearchInput1.Text))

上記のように詳細の「ほ」で検索すると詳細のホットに一致したレコードが表示されています。

テキストのヒントテキスト（HintText）にも対象の列を入れておくなどすれば検索イメージが伝わりやすいのでおすすめです。

追加カスタム：検索項目の追加（カテゴリなど）

上記以外にもカテゴリなどの選択肢があれば追加したいですよね。
自動生成の場合はスマホ対応でもあるためスペースが狭いので項目を増やしずらいですが、ドロップダウン一つ追加してカテゴリを設定してみます。以下サンプルです。

1. 新規アイコンのコンテナーにドロップダウンを追加する
2. 末尾に追加されるので、再配列＞先頭に移動
3. 幅（伸縮可能）をオンにして、最小幅を200位にする
4. Itemsに選択肢を指定　→この場合は、Choices(商品リスト.カテゴリ)
5. AllowEmptySelectionをTrueにする（空を許容する）
6. Defaultプロパティを空に指定する
7. ギャラリーのItemsプロパティを調整する

NOTE以下はこのSPOリストの場合のサンプルなので、ご自身のデータの場合の選択肢などに置き換えて実装ください。

Code//ギャラリーのItemsプロパティ　→追加でドロップダウンの選択した値を含める
// ドロップダウンが空の場合はTRUEとなるのでフィルターしない
Filter(商品リスト,
　StartsWith(Title,SearchInput1.Text)|| StartsWith(Detail,SearchInput1.Text)
　,IsBlank(Dropdown3.Selected) || カテゴリ.Value = Dropdown3.Selected.Value
)

TIPS上記のように複数条件でフィルターする実装については、以下記事に書いていますのでご参考下さい。
Power Apps ギャラリーのフィルター はAND、ORを使おう（IF文ネストは増えると大変） | Power Apps Tips ログ (youseibubu.com)

上記実装で以下のように検索入力とドロップダウン検索が複合的にできます。
スマホレイアウトにしても収まる内容ですね。

さらに検索項目を増やす場合

ブラウザ版レイアウトで作成する

スマホまで対応させる場合だとあまり項目を増やせませんので、色々な検索項目を増やしたい場合は最初からブラウザ版レイアウトとして以下のようにギャラリーのみの画面とした方が良いかもしれません。

自社アプリの人材スキル管理アプリの例 ：
【ワンランク上のPower Apps 開発】人材スキル管理アプリを作成・運用・改修 | 株式会社エヌサーフ (nsurf.co.jp)

ダイアログ表示やクリック時開く表示にするなどで省スペースでの実装

スマホレイアウトでも元々スペースが少ないので検索項目を表示するアイコンを配置して
クリック時にダイアログ表示を出してその中で複数の検索項目を用意して適用する。や、
開閉アイコンを用意してクリック時にそのエリアを縦に広げて表示し設定したらたためるようにしておく。などの方法もあります。
この辺りはまた時間があれば記事にしようかと思います。

おわりに

今回はギャラリーの委任警告の解消といつくかの追加カスタムのサンプルをご紹介しました。
いずれもシンプルな内容なのですぐにできるかと思います。

次回は、以下あたりを掲載しようと思います。それでは。
・ギャラリーのDefault表示が気に入らない場合の対応
・新規作成時に選択中アイテムのタイトルが残っている

関連記事

自動生成関連：

自動生成 | Power Apps Tips ログ

Power AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。

レスポンシブ関連：

レスポンシブ | Power Apps Tips ログ

Power AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。

数式リファレンス：

2023.09.19

Power Apps Power Fx 数式リファレンス カテゴリ別チートシート

最終更新日：2024/3//19　公式のPower Fxリファレンスをカテゴリ別に記載したチートシートです。 名前をど忘れした数式、関連する関数・数式の把握、最近の更新チェックなどにお役立てください。...