Power Appsのギャラリーを使いこなそう

Microsoft Power Apps の ギャラリーコントロールを使いこなそう！！ コルネ @koruneko32767

自己紹介 Twitter コルネ @koruneko32767 ブログ https://koruneko.hatenablog.com/ YouTube https://www.youtube.com/channel/UCYvIgC9JYS6VFumWdwi5QMA

• https://koruneko.hatenablog.com/
• https://www.youtube.com/channel/UCYvIgC9JYS6VFumWdwi5QMA

目次 ・ギャラリーコントロールってなに？ ・2つの項目毎に折り返されるように設定してみよう！ ・高さ可変ギャラリーを使いこなそう！ ・ギャラリー内のアイテムをギャラリー外から参照しよう！ ・ギャラリーの中にギャラリーを配置しよう！ ・TemplateSize = 0を理解しよう！

ギャラリーコントロールとは？ ギャラリーコントロールを使用すると 複数のデータソースを表示することができます。

どこにあるの？ ←ここです！ 最近「カスタム」や 「AI Builder」が追加されて 表示されなくなってしまいました… ぴえん

まずは簡単に触ってみよう！

基本操作

“items”に設定している “CustomGallerySample”の データが表示される ギャラリー内の要素

2つの項目毎に 折り返されるように設定してみよう！

折り返しの数(WrapCount)を指定することで 指定した数で行が折り返して表示されます *ただし設定できる最大の数値は10です

DEMO

高さ可変ギャラリーを使いこなそう！

こいつを選択！

Toggleによって表示/非表示が 切り替わるオブジェクトの配置

表示される内容によって高さが自動で調整される！

DEMO

ギャラリー内のアイテムを ギャラリー外から参照しよう！

このギャラリーに対して動作

ギャラリーの指定した項目を選択 選択された項目は背景が赤に設定 Select(Gallery, Value(TextInput.Text))

ギャラリーの指定したボタンを押す 右のテキストの内容を変数に格納 UpdateContext({_text:ThisItem.SampleText}) Select(Gallery, Value(TextInput.Text), Button)

ギャラリーの指定したTextInputに 入力された文字列を表示 Last(FirstN(Gallery.AllItems, Value(TextInput1.Text))).TextInput2.Text TextInput1：ギャラリー外 TextInput2：ギャラリー内

DEMO

ギャラリーの中に ギャラリーを配置しよう！

ギャラリーの中にギャラリーを 追加するだけ！ 簡単ですね！！

ではこのギャラリー(親)の中に配置した ギャラリー(子)の要素を参照するにはどうすれば・・・

Gallery1：親ギャラリー Gallery2：子ギャラリー 親ギャラリーの選択されている要素の 子ギャラリーを選択する Select(Gallery1.Selected.Gallery2, Value()) OR Select(Gallery1, Value(), Select(Gallery2, Value()))

Gallery1：親ギャラリー Gallery2：子ギャラリー 親ギャラリーの選択されている要素の 子ギャラリーを選択する Select(Gallery1.Selected.Gallery2, Value()) OR Select(Gallery1, Value(), Select(Gallery2, Value()))

ではどうすればいいのか？

親ギャラリーの中にボタンを追加し、 ボタンは子ギャラリーの要素を指定するよう設定。 外部からは親ギャラリーのボタンを選択する。 親ギャラリー内のボタン Select(Gallery2, Value(TextInput2.Text)) 外部のボタン Select(Gallery1, Value(TextInput1.Text), Button1)

DEMO

TemplateSize = 0を理解しよう！

ギャラリーには各項目の高さを指定する “TemplateSize”が存在する 下記の設定がここのサイズ

“TemplateSize”を0にするとどうなる？ 表示されていたオブジェクトが全て重なる！

レコード毎に座標・サイズを指定して任意の箇所に オブジェクトを配置しよう！ 冒頭にご紹介したように「折り返しの数」に指定できるのは 最大でも10までです。 しかし、この方法を用いればそれ以上の設定が可能になります。

この手法を用いる際の注意点 “TemplateSize = 0”に設定しても実際は”1”と設定されています。 なので”Y”に座標を適応する際、補正を行う必要があります。 // 指定するY座標 ThisItem.Y + // 横方向のずれを補正(N:折り返しの数) Mod(N - ThisItem.ID, N) // 縦方向のずれを補正(M:縦方向のピクセル数) (ThisItem.Y / M)

先ほどの式だけでもいいのですが… このようにランダムで値をセットしていった場合、 ずれが生じてしまいます。。。

解決方法 ギャラリーの”Items”には”ID(通し番号)”でソートされた ものを設定しましょう。 Sort(col, ID) 先ほどの式にさらに補正を加えます。 // 値が連続でない場合、さらに微調整を行う (ThisItem.ID - 1) / N * (1 - CountRows(Filter(col, ID <= ThisItem.ID)) / ThisItem.ID) * N * // 値が連続している場合は0、そうでない場合は1(丸め誤差対応済) RoundUp(1 - Round(CountRows( Filter(col, ID <= ThisItem.ID)) / ThisItem.ID, 10), 0)

DEMO

Q&A