PowerApps│ギャラリーで複数アイテムの選択に対応させる方法

こんにちは、あんこ先生です。

ギャラリーも、選択肢用のコントロールとして使う方法があります。

リストボックスよりも情報が多く、アイテムを展開した状態を維持できるので便利ですよね。

さらに画像や計算結果も扱えるので、アイデア次第で用途は無限に広がります。

ただ、ギャラリーは複数選択に対応していないため、ちょっと使いにくい場面もあります。

そこで、今回はギャラリーで複数アイテムの選択に対応させる方法をコード付きで紹介します。

この記事を読めば、選択肢の候補がひとつ増えますよ。

ギャラリーコントロールって何？という方は先にこちらの記事をオススメします。

ギャラリーで複数アイテムの選択に対応させる方法

作成物の仕様

サンプルは商品名と値段だけで構成されたデータソースとします。

列数が増えてもやることは変わりませんよ。

リストボックスのようにアイテムが展開され、かつ複数選択に対応させます。

選択状態のアイテムは背景色を変えます。

また、選択状態のアイテムをテーブルとして返します。

実装方法

作り方は２通りあります。

①選択させたいデータソースにflag列を追加してコレクション化する

②ギャラリーで選択したアイテムを別コレクションに格納する

どちらも一長一短ですが、選択するだけなら①がかんたんです。

戻り値を使ってまとめて更新したい場合は、列情報が一致している②がオススメです。

それぞれの具体的な作成方法を解説していきますね。

データソースをコレクション化│パターン①

選択することに意義がある場合はコチラがオススメです。

作り方は４ステップとシンプルです。

まず、選択肢にしたいデータソースに、選択判定に使うflag列を追加してコレクション化します。

ClearCollect(データソース,AddColumns(コレクション,"flag",false))

次に、そのコレクションをギャラリーに展開します。

//Gallery.Items
コレクション

そして、アイテムを選択する都度、flag列の値を反転させます。

//Gallery.OnSelect
Patch(コレクション,ThisItem,{flag:!ThisItem.flag})

最後に、背景色用の図形を用意して表示条件をflag列にすれば完成です。

//Rectangle.Visible
ThisItem.flag

動作として、アイテムを選択するとflag列がtrueに変わり、背景色用の図形が表示されます。

もう一度選択するとflag列がfalseに変わり、背景色用の図形が非表示になります。

戻り値を利用する場合は、flag列を条件にFilter関数で絞るだけです。

Filter(Gallery.AllItems,flag)

戻り値をコレクション化│パターン②

こちらは戻り値を使ってまとめてデータソースを更新する際に便利です。

作り方はこちらも４ステップです。

まず、元データソースの空コレクションを作成します。

Defaults関数を使うとかんたんです。

//データソースの初期値を１レコードだけ登録
ClearCollect(コレクション,Defaults(データソース));
//空レコードをクリア
Clear(コレクション)

次に、元データソースをギャラリーに展開します。

//Gallery.Items
コレクション

そして、アイテムを選択する都度、コレクションに登録済みなら削除、そうでないなら格納していきます。

//Gallery.OnSelect
If(ThisItem in コレクション,
    Remove(コレクション,ThisItem),
    Patch(コレクション,Defaults(コレクション),ThisItem)
)

最後に、背景色用の図形を用意して表示条件をコレクション内に当アイテムがあるかにすれば完成です。

//Rectangle.Visible
ThisItem in コレクション

動作として、アイテムを選択するとコレクションに登録済みか確認します。

登録済みなら削除、登録されていなければ登録します。

その結果、コレクションに登録されていれば背景色用の図形が表示されます。

戻り値は元データソースと同じ列情報のため、一括登録や削除などが容易に行えますよ。

Filter(Gallery.AllItems,flag)

ちょっと難解ですが、Patch関数を用いた一括登録手順はこちらの記事をご覧ください。

ギャラリーで複数アイテムの選択に対応させる方法のまとめ

今回は、ギャラリーで複数アイテムの選択に対応させる方法を紹介しました。

普通に使うも良し、応用すれば選択したアイテムを順にフォームで入力させることもできますよ。

また、入れ子になっているPlannerのアサイン情報やチェックリストの更新にも便利です。

この辺は需要があれば記事にまとめていきますね。