Udemy 新コース: 作って学ぶPAD!

【Power Apps関数辞典】Search / 検索

MEMO

本記事はYouTubeでの解説もあります。

マイクロソフトが推しに推している簡単アプリ作成ツール「Power Apps」は、慣れれば非常にすばやくマルチプラットフォームのアプリケーションを開発することができます。


参考
Power Apps 公式サイト外部サイト

今回は、Power Appsにてレコードの一覧を表示した際に、レコードを簡単に検索を行う方法について紹介します。

Power Appsの基礎情報

Power Appsとはなんぞやの方や、まず環境から準備したいと言う方は、こちらからログインできます。すでにOffice 365等でAzure ADのアカウントをお持ちでしたら、そのID/Passwordを使ってログインすることができます。

完成イメージ

まずはゴールイメージから。

最終的には以下のような機能を作成します。ご覧のようにテキストボックスに入力した値をもとにレコード一覧がフィルタリングされて、一致したレコードのみ表示されていることがわかります。

何か入力すると、入力した途端、直ぐにフィルタリングされることがわかるかと思います。私はEnterは入力しておりません。Power Appsではデフォルトでいわゆる「インスタント検索」の形式を簡単に実装することができます。

検索用にCollectionを用意します。もしデータソースがある場合、こちらの操作は不要です。

ツリー ビューの「App」のOnStart プロパティを以下のように記述します。

 

参考にコードも載せておきます。果物のCollectionを作っています。

コード


ClearCollect(fruits, 
    {name: "grape", color:"violet", quantity: 10},
    {name: "peach", color:"pink", quantity: 10},
    {name: "orange", color:"orange", quantity: 10},
    {name: "water melon", color:"green", quantity: 10},
    {name: "pine apple", color:"yellow", quantity: 10}
)

簡単にですが、以下から作り方を紹介します。

Power Appsでの検索機能の実装

まずは検索テキストボックスを挿入します。

このテキストボックスは後で呼び出すため、わかり易い名前をつけておくのをおすすめします。今回は以下の名称とします。

コード

SearchTextBox1

ツリービューで見ると以下のようになります。

 

Gallery の追加

今回の検索対象とするCollectionを表示するGalleryを挿入します。今回は「縦」を選択します。

注意

Power Appsも機能が増えてきて、画面のかなり横の方に「ギャラリー」の挿入ボタンが配置されているようでしたので注意。

今回画像はないため、シンプルなレイアウトに変更していきます。

 

データソースにはCollection としてfruitsを、レイアウトには 「タイトルとサブタイトル」を選択します。

 

PowerPointの操作と同じ要領で、細かいレイアウトを合わせて以下のようにします。

 

Search 関数を利用して検索機能を実装する

作成したGalleryを選択し、Items プロパティを編集していきます。

初期状態では、先程選択した fruitsが入っているかと思います。そこにさらに、以下のように編集していきます。

コード

Search(fruits, SearchTextBox1.Text, "name")

Search関数は、以下のようなSyntax (構文)になっています。

コード

SearchTableSearchStringColumn1 [, Column2, ... ] )


参考
マイクロソフト公式ドキュメント外部サイト

 

したがって、カッコの中には以下の順番で項目を入れていきます。

  1. フィルターする対象のデータソース
  2. 検索したい文字列 (ここでは変化させたいため、テキストボックスに入力した値 = SearchTextBox1.Text としている)
  3. 検索対象の列1
  4. 検索対象の列2
  5. ・・・
MEMO

検索対象の列の数に上限はありません。

注意

データソースの列名をダブルクオーテーションで囲ってString 型で渡して上げる必要があります。

今回は以下のようになっています。

1 フィルターする対象のデータソース fruits
2 検索したい文字列 SearchTextBox1.Text
3 検索対象の列1 “name”

 

以上で検索機能を実装することができます。

 

関連記事

検索回りでの関連記事は以下のとおりです。

本日はここまでです。

ご参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です