PowerApps│すぐできるギャラリーコントロールの使い方と活用事例

アイキャッチ




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

ギャラリーコントロールはとても便利なコントロールです。

なぜなら、データソースの一覧表示はもちろん、フィルターや並び替え、上位下位5位表示などバリエーションに富んでいるからです。

さらに、アイテムを選択すれば戻り値として単一レコードを抽出することもできます。

例えば、お店の一覧を表示したギャラリーコントロールを用意し、人気順・利用回数順などで並び変えることができます。

つまり、その戻り値をフォームコントロールに渡すことで、お店情報をフォームに展開できます。

このように使い方次第でエース級の働きをしてくれるコントロールなのです。

この記事では、ギャラリーコントロールの使い方と主要プロパティを解説します。

さらに、すぐ使える活用事例をコード付きで紹介します。

実際にコードをコピペして、動作を確認してみましょう!

ギャラリーコントロールの使い方と活用事例

コントロールにデータソース内のさまざまなレコードを表示できます。

レコードに含まれる各フィールドは、ギャラリーコントロールに内包した個別のコントロールに表示されます。

また、それらのコントロールをテンプレートで構成でき、その内容に従った表示を繰り返します。

さらに、一覧表示されたひとつのアイテムを選択することで、そのレコードを戻り値として返すこともできます。

つまり、データソース内の任意のデータを一覧表示することに特化したコントロールなのです。

レコードの中身を一覧できるため、様々なアプリで利用されます。

ギャラリーコントロールの設置方法

リボンの挿入から下記アイコンを選べばギャラリーコントロールが追加できます。

その後、データソースを一覧から選択します。数式での指定も可能です。


テンプレートの設置方法

ギャラリーコントロールの最上部か最左端にテンプレートが表示されます。

そこにリボンの挿入から各種コントロールを追加できます。

レコードの値を参照させる場合は、ThisItem.項目名で指定できます。

また、テンプレートで加えた変更は、ギャラリーコントロール全体に反映されます。

主要プロパティの使い方│ギャラリー

ギャラリーコントロールの主要プロパティは、次の2点です。

  1. アプリの起動時に、ギャラリーで最初に選択されるデータソースの項目またはレコードを指定するDefaultプロパティ
  2. ギャラリー、リスト、グラフなどのコントロールに表示されるデータのソースを指定するItemsプロパティ
  3. 選択されたアイテム(戻り値)のSelectedプロパティ

これらの設定方法は次の通りです。

初期値

Defaultプロパティ
LookUp(_AreaCollection,Area=”青森県”) //青森県のレコードを指定

  • 設定しない場合、先頭のレコードが初期値になります。


データソースの指定

Itemsプロパティ
データソース名 //日本語でも二重引用符は不要
Firter(_AreaCollection,Group=”四国”) //四国を含むレコードのみ表示

  • Filter関数などを利用することで、条件を絞ったレコードを表示できます。
  • レコードを指定した場合は1行のみ表示されます。

各種関数を組み合わせて条件をさらに絞り込むこともできるよ。

If関数で、データソースそのものを切り替えることも!

戻り値

ギャラリーコントロールの戻り値はSelectedプロパティです。

Formxx.Itemプロパティ
Galleryxx.Selected //選択したレコードをフォームに表示

TextInputxx.Textプロパティ
Galleryxx.Selected.Area //選択したレコードの項目Areaを表示

  • フォームコントロールとやり取りする際、Form.DataSourceプロパティは、Galleryxx.Itemsプロパティと同じデータソースを選択する必要があります。

実はもうひとつの戻り値AllItemsプロパティがあります。
使い方が複雑なので、後日別記事にまとめますね。

その他プロパティの使い方

※色やサイズ変更など他コントロールと共通したプロパティの説明は省いています。


折り返しの数│WrapCount

  • 数値分だけ折り返し表示できます。サンプルは5です。
  • 縦ギャラリーなら横、横ギャラリーなら縦に折り返します。


スクロールバーの表示│ShowScrollbar

  • スクロールバーの表示有無です。
  • 表示しないと見た目がすっきりしますが、スクロールできるかわかりにくいです。


ナビゲーションの表示│ShowNavigation

  • ギャラリーの各端にある矢印の表示有無です。初期値は非表示です。
  • スクロールバーを表示しない代わりに使うと、すっきりします。

活用事例とサンプルコード│ギャラリー


項目の値でフィルター(絞り込み)する

Itemsプロパティ
Filter(データソース名,項目名=”条件”)
Filter(_AreaCollection,Group=Dropdown1.Selected.Result)

  • 絞り込みはFilter関数を用います。条件に合致したレコードのみ表示します。
  • 条件は複数記述でき、AND判定されます。


昇順・降順に並び替える

Itemsプロパティ
Sort(データソース名,項目名,Ascending) //昇順
Sort(データソース名,項目名,Descending) //降順

  • 並び替えはSort関数を用います。数値の大きい順、小さい順に並び替えます。
  • テキストでも並び替えできます。


並び替える項目を切り替える

Iconxx.OnSelectプロパティ
Set(_population,!_population)

Itemプロパティ
If(_population, //ブール型変数
Sort(AreaPopulation,Year2020,Ascending), //人口昇順
Sort(AreaPopulation,Sql,Ascending) //通し番号昇順
)

  • アイコンを押すたびに、並びが人口か通し番号の昇順に切り替わります。
  • ランク付けを実数と比率で切り替えるときに便利です。


データソースを切り替える

Itemプロパティ
If(_population, //ブール型変数
AreaPopulation2020,
AreaPopulation2021
)

  • データソースの構成が同じであることが条件です。
  • 年度別にデータソースを用意している場合に前年と切り替えることができるので便利です。


先頭から、または最後からx件表示する

Itemsプロパティ
FirstN(_AreaCollection,5) //先頭から5レコード
FirstN(Sort(_AreaCollection,Sql,Descending),5) //最後から5レコード

  • このFirstN関数は先頭から指定したレコード数分表示します。
  • 最後からの部分について、LastN関数は使いにくいので一度Sort関数で降順にしてからFirstN関数で抜いています。
  • ランキング表示に便利です。


ギャラリー内で計算する

Labelxx.Textプロパティ
Text(ThisItem.Year2020-ThisItem.Year2019,”#,###人”) //人口の増加量を算出

  • このようにギャラリー内の情報から計算ができます。
  • 別レコードも同じように算出されます。


選択したアイテムをわかりやすく表示する

Rectanglexx.Visibleプロパティ
ThisItem.IsSelected

  • テンプレートの最背面に四角形アイコンを設置します。
  • ThisItem.IsSelectedプロパティの、選択したアイテムのみTrueとなる特性を利用し表示しています。

失敗例から学ぶ│ギャラリー

いまのところありません

まとめ

ギャラリーコントロールの要点をまとめると次の3点です。

  • ギャラリーコントロールは、様々な表示に対応できる。
  • ギャラリー内で計算ができ、全レコードに適用される。
  • どこを選択しているかわかりやすくできる。

これであなたもギャラリーコントロールマスターです。

アイデアを活かして素敵なアプリを作成しましょう!

アイキャッチ
アイキャッチ-コントロール

ご支援よろしくおねがいします

この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。

下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。

受取人のメールアドレスは amazon@anko7793.com までお願いします。

メッセージもいただけるとたいへん喜びます。

よろしくお願いします。

Amazonギフト券(Eメールタイプ) 



コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
七草あんこ
非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。主にTwitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。