本記事はYouTubeでの解説もあります。
マイクロソフトが推しに推している簡単アプリ作成ツール「Power Apps」は、慣れれば非常にすばやくマルチプラットフォームのアプリケーションを開発することができます。
今回は、Power Appsにてレコードの一覧を表示した際に、レコードを簡単に検索を行う方法について紹介します。
目次
Power Appsの基礎情報
Power Appsとはなんぞやの方や、まず環境から準備したいと言う方は、こちらからログインできます。すでにOffice 365等でAzure ADのアカウントをお持ちでしたら、そのID/Passwordを使ってログインすることができます。
完成イメージ
まずはゴールイメージから。
最終的には以下のような機能を作成します。ご覧のようにテキストボックスに入力した値をもとにレコード一覧がフィルタリングされて、一致したレコードのみ表示されていることがわかります。
何か入力すると、入力した途端、直ぐにフィルタリングされることがわかるかと思います。私はEnterは入力しておりません。Power Appsではデフォルトでいわゆる「インスタント検索」の形式を簡単に実装することができます。
ツリー ビューの「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 （構文）になっています。
Search( Table, SearchString, Column1 [, Column2, ... ] )
したがって、カッコの中には以下の順番で項目を入れていきます。
- フィルターする対象のデータソース
- 検索したい文字列 （ここでは変化させたいため、テキストボックスに入力した値 ＝ SearchTextBox1.Text としている）
- 検索対象の列１
- 検索対象の列２
- ・・・
検索対象の列の数に上限はありません。
データソースの列名をダブルクオーテーションで囲ってString 型で渡して上げる必要があります。
今回は以下のようになっています。
| 1 | フィルターする対象のデータソース | fruits |
| 2 | 検索したい文字列 | SearchTextBox1.Text |
| 3 | 検索対象の列１ | “name” |
以上で検索機能を実装することができます。
関連記事
検索回りでの関連記事は以下のとおりです。
委任問題の対応方法はこちらです。
本日はここまでです。
ご参考になれば幸いです。
