入力フォームで毎回長いテキストを打ち込むのが面倒だと感じたことはありませんか?ユーザーが文字を入力するたびに候補が表示されて、選択するだけで自動入力される機能があれば便利ですよね。

今回は、Power Appsでそんな入力補助機能付きの検索ボックスを実装する方法をご紹介します。テキストを入力すると検索結果が下に表示され、その結果を選択するとテキスト入力欄に自動でセットされる、いわゆるオートコンプリート機能です。

事前準備:データソースの用意

まず、検索対象となるデータソースが必要です。今回はSharePointリストを使用します。お手元のSharePointリストを準備しておいてください。

今回利用しているリストは以下のリストです。（今回はタイトル列以外は利用しません）

ステップ1:基本コントロールの配置

テキスト入力コントロールの追加

最初に、ユーザーが検索キーワードを入力するためのテキスト入力コントロールをアプリに追加します。これが検索ボックスの本体になりますね。

ギャラリーコントロールで検索結果を表示

続いて、検索結果を表示するための空の垂直ギャラリーコントロールを追加しましょう。このギャラリーが、入力に応じて候補を表示してくれる部分になります。

位置とサイズを調整して、テキスト入力の下に配置すると使いやすいでしょう。

ステップ2:データソースの接続

ギャラリーコントロールのItemsプロパティに、検索用のデータソースであるSharePointリストを設定します。

ギャラリー内にはテキストラベルを追加して、タイトル列が表示されるようにしましょう。この時、高さなども見やすいように微調整しておくと良いですね。

デザインの調整

ギャラリーコントロールのデザインに対して、枠線と背景色に薄いグレーを設定してみましょう。こうすることで、検索結果だとひと目で分かるようになります。

ステップ3:動的な高さ調整

ここで重要なのは、検索結果の数に応じてギャラリーの高さが自動で変化するようにすることです。結果が少ない時は小さく、多い時は大きく表示されると使い勝手が良くなりますよね。

これを実現するには、AllItemsCountとIF関数を組み合わせます。

If(Self.AllItemsCount > 3, 320, Self.AllItemsCount * 80)

この例では、アイテムごとに80の高さを追加し、最大の高さが320となるようにしています。ただし、このあたりの数値は後ほど実際の表示を見ながら調整が必要かもしれません。

ステップ4:検索機能の実装

次に、テキスト入力コントロールの値に応じて検索できるように、ギャラリーのItemsプロパティを修正します。

前方一致でタイトル列を検索するように、Filter関数を記載していきましょう。

Filter(SampleList,StartsWith(タイトル,TextInput1.Text))

動作確認と微調整

プレビューから動作を確認してみましょう。検索機能は動いていることが確認できると思いますが、いくつか気になるポイントがあるかもしれません。

ステップ5:表示条件の追加

次に気になるポイントとしては、何も入力していないときの表示です。

何も入力していない状態で全件表示されてしまうと見づらいですよね。そこで、何も入力していないときは検索結果が表示されないように条件を記載します。

If(
    Not(IsBlank(TextInput1.Text)) , 
    Filter(
        SampleList,
        StartsWith(
            タイトル,
            TextInput1.Text
        )
    )
)

今回はItemsプロパティに対して式を記載していますが、Visibleプロパティに式を記載して表示そのものをさせないという方法も存在します。お好みの方法を選んでください。

ステップ6:選択時の自動入力機能

続いて、検索結果のテキストラベルを選択したときに、その結果がテキスト入力コントロールに設定される機能を追加します。これがオートコンプリート機能の肝になる部分ですね。

変数を使った値の保持

今回は変数を作成し、その値に対して自身のタイトル列、つまりテキストラベルの値を設定するように式を記載します。

テキストラベルのOnSelectプロパティに以下のように記述してみましょう:

Set(inputText,ThisItem.タイトル);
Reset(TextInput1)

その後にReset関数でテキスト入力を初期化するようにします。

作成した変数をテキスト入力コントロールのDefaultプロパティに設定すれば、選択した値が表示されるようになります。

再度動作確認

プレビューから動作を確認してみましょう。徐々に機能ができていますが、まだ気になるポイントがあります。

検索結果を選択したら、検索結果を消すようにする必要がありますよね。そうしないと、選択後も候補が表示されたままになってしまいます。

ステップ7:選択後の結果非表示

Itemsプロパティの条件に、変数とテキスト入力コントロールが一致した場合に、表示が消えるように条件を追加します。

If(
    Not(IsBlank(TextInput1.Text)) && TextInput1.Text <> inputText,
    Filter(
        SampleList,
        StartsWith(
            タイトル,
            TextInput1.Text
        )
    )
)

これで完成です!プレビューから最終的な動作を確認してみましょう。

最終的な画面のYAMLも置いておきます。このYAMLをコピーして貼り付けることで、画面が作成できます。ただしくデータソース周りでエラーとなると思いますので、適宜修正を行ってください。

Screens:
  Screen1:
    Children:
      - TextInput1:
          Control: Classic/TextInput@2.3.2
          Properties:
            Default: =inputText
            X: =33
            Y: =339
      - Gallery2:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            BorderThickness: =1
            Fill: =RGBA(247, 247, 247, 1)
            Height: =If(Self.AllItemsCount > 3, 320, Self.AllItemsCount * 80)
            Items: |-
              =If(
                  Not(IsBlank(TextInput1.Text)) && TextInput1.Text <> inputText,
                  Filter(
                      SampleList,
                      StartsWith(
                          タイトル,
                          TextInput1.Text
                      )
                  )
              )
            TemplateSize: =72
            Width: =560
            X: =33
            Y: =409
          Children:
            - Label6:
                Control: Label@2.5.1
                Properties:
                  OnSelect: |-
                    =Set(inputText,ThisItem.タイトル);
                    Reset(TextInput1)
                  Text: =ThisItem.タイトル
                  Width: =550

まとめ

いかがでしたでしょうか?

色やサイズに関してはお好みで調整してください。ユーザーの入力作業を効率化できる便利な機能なので、ぜひ皆さんのアプリにも取り入れてみてくださいね。ギャラリーコントロール内などでこの動作を作成したい場合は、変数管理ではなく、コレクションで管理するなどの一工夫をすると良いでしょう。