コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

【Power Apps】入力候補を表示させる

Power Apps

スポンサードリンク

今回作成するもの

今回はPower Apps で、入力候補を表示してくれるオブジェクトの作成を行ってみたいと思います。

上記ツイート埋め込み動画の、
左：Power Apps 標準のコンボボックス
右：今回作成した入力補助を行ってくれるテキストボックス

動画のように、Power Apps 標準オブジェクトを使用しただけでは、入力候補の表示は行えません。
今回は右のような機能の実装方法を紹介します。

利用するオブジェクト

以下オブジェクトを利用します。

  • Gallery(Label)：入力候補を表示するためのオブジェクト
  • TextInput：テキスト入力を行うためのオブジェクト
  • Icon：テキスト入力の右端に配置するためのオブジェクト
  • Checkbox：アイコンを押している状態かを判定するためのオブジェクト
    　　　　　 透明に設定する

f:id:koruneko:20200809154855p:plain

入力リストを作成する

今回、入力リストには「Power Automate のマイフロー一覧」を用いたいと思います。
※ このリストの作成方法に関しては今回詳しく触れません。

  1. コネクタより、「Power Automate 管理」を追加します。
  2. App.OnStart に以下式を入力します。

App.OnStart

Clear(ListMyFlowGallery);
ForAll(
    PowerAutomate管理.ListMyFlows(First(PowerAutomate管理.ListUserEnvironments().value).name).value,
    Collect(
        ListMyFlowGallery,
        {id:name, dispName:PowerAutomate管理.GetFlow(First(PowerAutomate管理.ListUserEnvironments().value).name, name).properties.displayName}
    )
);

これで、「ListMyFlowGallery」というコレクションにマイフロー一覧が設定されます。

入力候補を設定する

ギャラリーを設定する

「挿入」>「ギャラリー」>「縦方向(空)」を選択します。
こちらが、入力候補を表示させるためのオブジェクトになります。

Items にはListMyFlowGallery を設定します。

Gallery1.Items

ListMyFlowGallery

ギャラリー内に表示させるラベルを作成します。

Gallery1 を選択した状態で、「ラベル」を選択します。

ラベルにはマイフローの表示名を表示させたいと思います。
これはListMyFlowGallery の「dispName」にあたります。

ラベルのプロパティを以下のように設定します。

Label1.Text

ThisItem.dispName

Label1.Width

Parent.Width

Label1.HoverFill

Color.DarkGray

これで、

  • ラベルに表示される名前がマイフローの表示名
  • ラベルの幅がギャラリーの幅と同様の設定
  • マウスホバーした項目がグレーに変化

となるように設定できました。

テキスト入力項目を設定する

「テキスト」>「テキスト入力」を選択します。
こちらで入力された内容をもとに入力候補に表示されるアイテムをフィルターしたいと思います。

設定が完了したら、テキスト入力ではなく先ほど作成したギャラリーのプロパティを編集します。
ギャラリーに表示されるアイテムを絞りたいので、ギャラリーのItems を編集します。

Gallery1.Items

Search(ListMyFlowGallery, TextInput1.Text, "dispName")

これでテキスト入力に入力された内容でアイテムを絞ることができましたね。

細かい設定

入力保管項目の表示条件

入力保管項目が、表示される条件は以下の時としたいと思います。

  • 右端のプルダウンが選択されたとき
  • テキスト入力にテキストが入力されたとき

まずはプルダウンを作成したいと思います。

「アイコン」>「下」を選択します。

X、Y、Width、Height はテキスト入力項目に合わせておきましょう。

Icon1.X

TextInput1.X + TextInput1.Width - Self.Width

Icon1.Y

TextInput1.Y

Icon1.Width

Self.Height

Icon1.Height

TextInput1.Height

標準のコンボボックスと同じような見た目にしたければ以下の設定も変更します。

Icon1.Fill

ColorFade(RGBA(56, 96, 178, 1), -20%)

Icon1.Color

RGBA(255, 255, 255, 1)

Icon1.PaddingXXX(Top、Left、Right、Bottom)

7

こちらのアイコンはただの見た目にしか使用しないため設定はここまでです。

プルダウン箇所が押されたかどうかは「入力」>「チェック ボックス」を使用します。

X、Y、Width、Height はアイコンの設定と同様としてください。
表示されるテキストは空文字を設定してください。

こちらのチェックボックスは選択されたかどうかを判断するためだけのもので、実際には画面上に表示されなくてよいです。
だからといって、「表示(Visible)」をfalse に設定してはいけません。
非表示にしてしまうと選択も出来なくなってしまうからです。
なので、こちらのチェックボックスは透明に設定しましょう！

「XXXColor」や「XXXFill」となっている色に関するプロパティを「RGBA(0, 0, 0, 0)」に設定します。
これでどう動作させようが、透明に設定できたかと思います。

プルダウンが作成できたので、入力保管項目(Gallery1)の表示条件を変更したいと思います。

Gallery1.Visible

Or(Checkbox1.Value, !IsBlank(TextInput1.Text))

「Checkbox1.Value」は先ほど作成したプルダウンのチェックボックスが選択されている状態か、否かを判定しています。
前者の場合はtrue に、後者の場合はfalse になりますね。

「!IsBlank(TextInput1.Text)」はテキスト入力項目に文字が入力されているか否かを判定しています。
IsBlank の否定形(!)なので、前者の場合はtrue に、後者の場合はfalse になりますね。

これで、入力保管項目の表示条件が作成できました！

入力保管項目で選択されたアイテムをテキスト入力に設定する

入力保管項目で入力されたアイテムでテキスト入力項目を更新したいと思います。

これを実現するために、変数を利用します。

App.OnStart に以下の式を追加します。

App.OnStart

Set(flowName, "")

こちらの変数をテキスト入力のデフォルト値に設定しましょう。

TextInput1.Default

flowName

これでテキスト入力項目のデフォルト値にflowName が設定されましたので、入力保管項目のアイテムが選択されたときに変数が更新されるようにしましょう。

Lanel1.OnSelect

Set(flowName, ThisItem.dispName)

これで入力保管項目で選択されたアイテムをテキスト入力に設定することができました！！

おわり

以上でPower Apps での入力保管項目の作成は完了です。
標準のオブジェクトで満足できない場合、工夫によってはこのように自作しちゃうこともできちゃいますので、諦めずに実現方法を考えてみるといいかもですね。


スポンサードリンク