Power Apps ギャラリーコントロールの基本的な使い方|SharePointリストアイテムやDataverseの一覧表示を実装

Power Appsのキャンバスアプリを作るうえで欠かせないのがギャラリーコントロール。

データの一覧表示を簡単に実装できるし、選択して操作や、細かなデザイン調整もできてとても重宝するコントロール。

ということで、今回そんなギャラリーコントロールの使い方をまとめてみる。

スポンサーリンク

ギャラリーコントロール概要

ギャラリーコントロールは、同じ形式のデータの集まりを一覧で表示するコントロール。

同じ形式のデータの集まりというのは、

  • SharePointリストのアイテム
  • Office365ユーザーで取得できるユーザーのデータ群
  • カスタムコネクタで引っ張ってきたjsonデータ
  • その他自分で作ったコレクションのアイテム群

とかのこと。

これらを少しの実装で一気に一覧で表示してくれるから、とても便利。

今回使用するデータの集まり

今回はO365ユーザーコネクタを使用してユーザーの一覧を取得する。

使うのはOffice365ユーザーコネクタのSearch for users関数。
これを呼ぶとGraphUser_V1データの集まりが、テナントのユーザー数手に入る。
Office 365 Users - Connectors

GraphUser_V1の中にはユーザーの名前やらアドレスやら電話番号なんかが入ってる。

ギャラリーコントロールでデータを表示する

実際にギャラリーコントロールにユーザーの情報を一覧で表示してみる。

まず空のキャンバスにギャラリーを追加。縦でも横でも大丈夫だけれど、この方向は後で変更できないので注意が必要。
※デザインの調整が後から入る可能性がある場合は「高さが伸縮可能なギャラリー」を使用することを推奨。
今回は垂直ギャラリーを追加。最初はこんな感じでサンプルデータが入っている。
続いてOffice365ユーザーコネクタを追加。

そして、Office365ユーザーコネクタのSearch for users関数とギャラリーをつなげる。

ギャラリーのItemsプロパティに「Office365ユーザー.SearchUserV2().value」を入力。
すると、ユーザー数分のアイテムがギャラリーに表示される。
※ちなみに管理者権限が必要だけどユーザー数はMicrosoft365管理センターで確認が可能。
続いてユーザーの情報をギャラリーに表示していく。デフォルトでギャラリーに追加されているコントロールは↓の5つ。
まずはTitle1ラベルにユーザー名を表示する。
Title1ラベルのTextプロパティに「ThisItem.DisplayName」と入力すると、こんな感じでユーザーの表示名が表示される。
同様にSubtitle1ラベルのTextプロパティに「ThisItem.Mail」と入力すると、こんな感じでメールアドレスも表示される。
最後にImage1にユーザーのサムネイルを表示する。Image1のImageプロパティに「Office365ユーザー.UserPhotoV2(ThisItem.UserPrincipalName)」と入力すると、こんな感じで写真が表示される。
※UserPhotoV2関数はユーザーのIDかUPNを入れると、そのユーザーの写真を返してくれる関数。

と、こんな感じでThisItemを使えば各データの情報にアクセスして、情報を表示できるのがギャラリーのとても便利なところ。

ギャラリーコントロールにボタンを実装する

もちろんデフォルトのLabelコントロールやImageコントロール以外に、こちらでコントロールを追加することもできる。

今回はメールボタンを追加して、メールボタン押下でメーラーを起動し、宛先にそのアイテムの人を指定してみる。

まずは、ギャラリーの中にメールアイコンを追加する。※ギャラリーの中に追加されているか確認すること。

そしたら、そのメールアイコンを押したときにメーラーが起動するようmailtoを埋め込んでいく。

処理を埋め込む方法は2通りあって、

方法1:アイテムに埋め込む方法

アイテムに埋め込む方法は簡単で、メールアイコンのOnSelectプロパティにこんな感じでLaunch関数を埋め込むだけ。

すると「mailTo:アドレス」がLaunchされてメーラーが起動する。

方法2:ギャラリーに埋め込む方法

この場合、まずはメールアイコンのOnSelectプロパティにこんな感じでParentのOnSelectを呼び出す式を書く。

ここの「Parent」はギャラリーのこと。なのでこのように書くと、メールアイコンが押されたときにギャラリーのOnSelectが呼び出される。

そしてギャラリーのOnSelectにはこんな感じで式を書けば、ギャラリーの選択したアイテム(今回はクリックしたアイテム)のメールアドレスを取得して、メーラーが起動される。

こんな感じでギャラリーの各アイテムは「選択された」という状態を持ち、ギャラリー側から選択されたアイテムを取得することも可能。

ということで非常に便利なギャラリーコントロール。他にも色々便利なプロパティがあるけれど、それはまた別の機会に。

関連記事

コメント

タイトルとURLをコピーしました