[Power Apps]ビジュアル解説ギャラリー(Gallery)

ギャラリー(Gallery)コントロールを説明します。ギャラリーには下記の6種類が用意されています。

・垂直ギャラリー
・水平ギャラリー
・高さが伸縮可能なギャラリー
・空の垂直ギャラリー
・空の水平ギャラリー
・高さが伸縮可能な空のギャラリー

このページでは、下記のようなSharePointリストをデータソースとして説明します。

Power Appsを体系的に学習したい方は、下記もご覧ください。

匿名で投稿できる目安箱アプリについて知りたい方は、下記もご覧ください。

Power Appsで匿名で投稿できる目安箱を実装する方法を初心者にもわかりやすく解説！

Teamsを利用して組織内のコミュニケーションを強化したい方は下記もご覧ください。

【こちらもおすすめ】Teamsお役立ちノウハウ集

・【事例付き】Teamsを活用したマネジメントTIPS集
・【マネージャー向け】Teamsアプリを活用した「誰が何を知っているか」の集約・共有事例集
・【Teamsアプリ活用事例集】メンター制度を置き換えて新人・異動者の育成を効率化する方法
・【問い合わせ管理でお困りの方向け】問い合わせ対応・ナレッジ蓄積へのTeams活用事例集
・【マネジメント・業務把握にお困りの方向け】マネジメント・報告業務へのTeams活用事例集
・【Teamsアプリを活用事例集】週報を自動で収集しサマリー&フィードバックする方法とは

説明

ギャラリー(Gallery)は、データソースのレコードを垂直方向または水平方向に一覧表示するコントロールです。一覧表示されたデータから、特定のデータを参照したり更新したりするためユーザインタフェースを実現するための土台となるコントロールです。

垂直ギャラリーの場合、下記のようにレコードを垂直に並べることができます。

水平ギャラリーの場合、下記のようにレコードを水平に並べることができます。

各プロパティの使い方は下記もご覧ください。

[Power Apps]ビジュアル解説プロパティ一覧このページでは、PowerAppsのコントロールのプロパティの使い方・用途を解説します。コントロールによって利用可能なプロパテ...

使用例

垂直ギャラリーを追加すると、下記のようにデータソースの選択を求める画面が出ます。

データソースを選択すると、下記のように自動でデータソースの値が読み込まれ、垂直にレコードが並んだレイアウトが表示されます。

ツリービューを確認してみると、下記のようにギャラリーコントロールの配下にいくつかのコントロールが最初から作成されていることがわかります。

また、下記のようにいくつかのレイアウトが用意されているため、作成したいレイアウトに近いものを選んで、それをベースに編集していくと早く作成できると思います。

レイアウトを修正する際は、並んだレコードの中の1行目を修正します。下記の赤枠部分です。試しに1行目の日付部分を右に移動してみます。

下記のように、1行目を変更すると、全ての行が連動して変更されます。このように1行目を変更することで見た目のレイアウトを調整します。

次に、日付が表示されてるテキストラベルのTextプロパティを確認してみます。下記のようにThisItem.Dateと表示されています。ThisItemとはギャラリー内の該当行を表す名称です。そのためThisItemで指定すると全ての行に適用されます。この場合、各行にDate列の値を表示するという内容になります。ここをThisItem.Titleに変えてみます。

下記のように、ThisItem.Titleに変更したことでテキストラベルに表示される値も変更されます。ギャラリーを利用する場合は、このように表示したい内容を変更します。

なお、「空の垂直ギャラリー」を利用した場合は、下記のようにギャラリーコントロール配下には何もない状態で作成されます。

「水平ギャラリー」を利用した場合は、下記のように水平に並ぶ横スクロールのギャラリーになります。

「高さが伸縮可能なギャラリー」を利用した場合は、下記のような画面になります。

試しに、編集画面を下記のようにレコード間に余白を入れてみます。

実行してみると、下記のように自動で余白が削除されて表示されます。これが伸縮可能なギャラリーの動作になります。

まとめ

このページでは、ギャラリー(Gallery)コントロールを説明しました。
ギャラリーには下記の6種類があります。作成したいギャラリーに応じて使い分けれるようになりましょう。
・垂直ギャラリー
・水平ギャラリー
・高さが伸縮可能なギャラリー
・空の垂直ギャラリー
・空の水平ギャラリー
・高さが伸縮可能な空のギャラリー

Power Appsを学びたい方は、下記のおすすめ学習方法もご覧ください。