テキスト入力コントロールを2つ使ってギャラリーコントロールを検索する + α

PowerAppsにて2つのテキスト入力コントロールの文字列でギャラリーコントロールを検索する方法に関しての共有です。

ただ2つのテキスト入力コントロールを使うことの解説に加え、アルファベット順での並び替え機能 や、過去記事で解説したランダム表示機能 などを追加することも解説するつもりなので"＋ α"という記事タイトルにしています。

私は非ITエンジニアの市民開発者なので、おそらく難しい言葉を使ってないと(自分では)思っているので気軽に読んで頂ければと思います。

その上でどなたかのお役に立てば幸いです。

1. 環境

手元に下記のようなShareppoint List, PowerApps(キャンバス)がある状況とします。

Sharepoint List (データソース名 "DummyDB")

PowerApps (上記SharepointListを元に生成したものに少し手を加えたもの)
・機能：左側カラム上部の「検索」にワード入れると人がソートされ、選択されたアイテムの詳細が画面の右側に表示されるApps。人材管理や資産管理などに使える想定。

画面上部にあるボタンの解説は下記：

• Random: ギャラリーコントロールの並び順をランダムにする
• Teams: 選択したアイテムの方とのTeams Chat画面を開く
• Outlook: 選択したアイテムの方への新規メール作成画面を開く
• Apps: 関連する別Appsを開く
• Sort A⇔Z: ギャラリーコントロールの並び順をアルファベット順にする

なおRandom, Teams, Outlook, Appsのボタンについては下記記事でも解説済みです。
興味あればこちらも覗いてみて下さい。

2. 実例 - 2つのテキスト入力コントロールでギャラリーコントロールを検索する機能

この機能を実装したイメージは下記です。

片方の検索ボックスで"a"、もう片方は"t"と入力して、それに一致する項目があるアイテムのみが表示されていることがわかると思います。

わかりやすさのために、式内にあるコントロールは色の線でハイライトしておきました。

ちなみに検索テキストが黄色でハイライトされるようになってますが、その機能は下記の記事で解説しているのでご確認ください。

3. 解説 - 実例

この実例でのItemsプロパティは下記のような構造になってます。
ぱっと見わかりにくいかもしれませんが、一言で纏めるとSearch関数を二重にかけているという割と原始的なやり方です。

# 全体像
Items = Search(
            Search('データソース', '片方の検索ボックス'.Text, データソースのカラム1, データソースのカラム2), 
            'もう片方の検索ボックス'.Text, 
            データソースのカラム1, データソースのカラム2)
        )


# もう少し簡単な解説：
A = Search('データソース', '片方の検索ボックス'.Text, データソースのカラム1, データソースのカラム2)
の場合,
Search(A, 'もう片方の検索ボックス'.Text, データソースのカラム1, データソースのカラム2))

• Search関数：
  • 機能：ギャラリーコントロールを検索するための関数

4. 応用1 - 2つのテキストボックスで検索 + Shuffle機能を実装

こちらは2つのテキストボックスでの検索に加え、上部メニュー内の"Random"ボタンを押すとギャラリーコントロールの並び順がランダムになる機能も加えた状態です。

再掲ですが、ランダム表示機能に関する解説は下記記事にあります。

5. 解説 - 応用1

この応用1で示しているItemsプロパティを解説すると下記のような感じです。
過去記事では1つの検索ボックス(1つのSearch関数)で探すようになってますが、こちらでは上記実例で示した二重のSearch関数を、コレクションが空 or 空ではないそれぞれに適用したかたちになっています。

# 全体像
If(IsEmpty('コレクション'), 
    Search(Search('データソース', '片方の検索ボックス'.Text, データソースのカラム1, データソースのカラム2), 'もう片方の検索ボックス'.Text, データソースのカラム1, データソースのカラム2), 
    Search(Search('コレクション', 片方の検索ボックス.Text, データソースのカラム1, データソースのカラム2), 'もう片方の検索ボックス'.Text, データソースのカラム1, データソースのカラム2)
    )

# もう少し簡単な解説
データソース(Sharepoint List)を探す部分をA, コレクションを探す部分をBとすると,
If(IsEmpty('コレクション'), A, B)

ここについてもう少し詳しく知るには、上に貼ってる過去記事と、この記事の実例の解説を併せて読むとわかると思います。

6. 応用2 - 2つのテキストボックスで検索 + Shuffle機能を実装 + アルファベット順並び変え機能も実装

これが一番複雑なので最後です。

こちらは2つのテキストボックスでの検索に加え、上部メニュー内"Sort A⇔Z"を押すとアルファベット順に並び替えらえられ、さらに上部メニュー内の"Random"ボタンを押すとギャラリーコントロールの並び順がランダム表示になります。

なおアルファベット順にソートするボタンのOnSelectプロパティは下記です。
"SortAlphabet"というブール型のコンテキスト変数を押すたびに反転(True⇔False)させ、またコレクション"Shuffled"を空にするという操作をしています。

7. 解説 - 応用2

結構長くなって申し訳ないですが解説は下記です。
簡単にまとまると、応用1のコードでSharepoint Listを探す方の2重のSearch関数の頭にのみSortbyColumnsをつけている状態です。

# 全体像
If(IsEmpty('コレクション'), 
    SortbyColums(
        Search(Search('データソース', '片方の検索ボックス'.Text, データソースのカラム1, データソースのカラム2), 'もう片方の検索ボックス'.Text, データソースのカラム1, データソースのカラム2), 
        "データソースのカラム1", If('コンテキスト変数(ブール型)', SortOrder.Descending, SortOrder.Ascending)
        ),
        
    Search(Search('コレクション', 片方の検索ボックス.Text, データソースのカラム1, データソースのカラム2), 'もう片方の検索ボックス'.Text, データソースのカラム1, データソースのカラム2)
    )
    

# もう少し簡単な解説
データソース(Sharepoint List)を探す部分をA, コレクションを探す部分をBとすると,
If(IsEmpty('コレクション'), SortbyColums(A, データソースのカラム1, If('コンテキスト変数(ブール型)'), '降順', '昇順'), B)

一方ソートするボタンのコードは前述のように下記のようになってます。
ここでのポイントはセミコロンの後のClear(Shuffled) です。
このボタンを押すことによってランダム表示に使うコレクション"Shuffled"が空になり、上記のIfEmptyのTrueの状態に戻してやることでランダム表示⇔アルファベット順表示の切り替えが実現できています。

UpdateContext({SortAlphabet: !SortAlphabet});Clear(Shuffled)

ちなみに片方にしかSortbyColumns関数を付けない理由は、もう片方(コレクションで検索する方)につけるとランダム表示機能(by Shuffle関数)が機能しないからです。

おわりに

こんな感じでした。どなたかのお役にたてば幸いです。