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

355 Views

April 18, 20

スライド概要

Here's a summary of the use of gallery controls in Power Apps.

profile-image

都内でITエンジニア頑張ってる人

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

基本操作

8.

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

9.

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

10.

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

11.

DEMO

12.

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

13.

こいつを選択!

14.

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

15.

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

16.

DEMO

17.

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

18.

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

19.

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

20.

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

21.

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

22.

DEMO

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

DEMO

31.

TemplateSize = 0を理解しよう!

32.

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

33.

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

34.

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

35.

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

36.

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

37.

解決方法 ギャラリーの”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)

38.

DEMO

39.

Q&A