前回の記事の続き（？）です。
コンポーネント祭りで披露できなかった「Galleryの可変ヘッダー」について書こうと思います。
デモなんてやっちゃったもんだから時間なくなっちゃったんです。すみません。
Galleryのヘッダーって何？
まずここからですね。
そもそもPower AppsってソリューションはExcelのような表を作るのは適してないのは、今更言うまでもないですが、
表みたいな形式のUIってGalleryで作成することはとても多いのです。
絞込やソート、ある期間だけ表示などはPower BIの分野になりますが、その中にcontrolを作成して、データ登録！のような導線は、自動ビルドでもよく見られる導線かと思います。
ただ、ギャラリーの中に「列名：ThisItem.列名」みたいにいれるより上部に列名入れてあげるほうがGallery内の領域節約できて素敵なデザインになりますね。
その「上部のヘッダー」をGalleryのヘッダーと呼んでいるわけです。
そもそもどうやってつくるのか
はい、そもそもの作り方わかってないと、コンポーネントに出来るわけないのです。
とりあえずコンポーネントにする前に作ってみます。
ざっくりいうと、
①コンテナ作成
②さらにコンテナ作成
③ラベルを各コンテナ内に配置
④縮尺合わせる
って手順になります。
コンテナコントロール
オーサリングメニューから「挿入」→「水平コンテナ」を選択してScreenに挿入します。
次に水平コンテナを選択した状態で、5個「コンテナ―」を挿入します。
そうすると中に配置したコンテナが等間隔に5個並ぶことが確認できます。
このすべてのラベルを入れてあげてそれぞれの列名を作ってあげます。
高さと幅は「Parent.」を使って「コンテナ」の幅と高さに合わせてあげます。
すると、コンテナの大きさにラベルの大きさが追従するので追従するテキスト群が作れます。
コンテナならば、比率を可変にすることができるので、例えば「1：3：2：1：4」の比率で並べたい、という場合
左側から「コンテナ」を選択して、下図のプロパティの数値を順番に1,3,2,1,3と入力してあげると、1+3+2+1+3＝10を100％として、1としたコンテナの大きさが全体の1/10の幅となります。
これでヘッダーらしきものが完成しました。
最後に設置したいGalleryの幅＝この「横コンテナ」の幅としてあげれば基本的には追従します。Galleryの中に同じ横コンテナをいれてあげると絶対にヘッダー位置と中の項目の位置がずれないGalleryが出来上がります。
フツーに作ってて面倒なところ
上記の作り方だと「調整」がめんどくさいのです。あとついでにラベルの値を変えるのも。
「おっと、列名2の領域が狭すぎるな…ついでに列名3はもうちょっと広すぎだから調節しよう！」
ってなると
- コンテナ2選択
- 数値を増やす
- コンテナ3選択
- 数値減らす
- バランス見る
これを繰り返すことになるんですね。
何が面倒かって、逐一コントロールを切り替えることなんです。
下の図にあるとおりです。
I scream "めんどくせえええええええええええええええ"
というわけでコンポーネントにしてみました。
コンポーネントにする
コンポーネントの中にさきほどの中にコンテナいれた横コンテナごとコピペしちゃいます。
そして横コンテナの幅と高さをParent.WidthとParent.Heightにしておきます。
下みたいな感じになります。
ここからパラメータを作成していきます。
つくるパラメータは、
- 列名ごとの比率
- 列名ごとの名前
- 色
を作ってあげます。
対応する値をハメてあげます。
これでコンポーネント完成です。
コンポーネントにすることで改善したこと
コンポーネントにしたことによって先ほどメンドクサイと言っていたコントロール値が全て一つのコントロール（コンポーネント）のプロパティで定義できるようになりました。
調整なども割としやすくなり、テキストとかはめやすくなりました。
汎用性のあるものですので、ギャラリーの中に仕込んで使ってみたいものです。
残念ながらコンポーネントはGalleryの中に仕込むことができないので、ギャラリーの中のラベルに
Component1_1.Width * (Component1_1.lbl_width1 / (Component1_1.lbl_width1 + Component1_1.lbl_width2 + Component1_1.lbl_width3 + Component1_1.lbl_width4 + Component1_1.lbl_width5))
みたいな式で無理矢理追従させることは可能です。
コンテナ入れて同じ構造にしてScreen上でパラメータ拾ってあげれば同じことは可能ですね。
いろいろ試してみましょう。
最後に
割とコンポーネントとコンテナって相性いいと思うんですよね。
実際ナビメニュー作るのでも数が決まっているならGalleryでテーブル作ってあげるより可変性考えると、作成しやすいのではないでしょうか？
共有することを前提に考えると、「どこまで入力させるか」は作成者側である程度制限してあげると、組織全体の利活用の幅が広がるのではないでしょうか。しらんけど。
コンポーネントはアッセンブリデザインと相関があって面白い！
キャンパスアプリ＝エンジンルーム
コンポーネント＝ラジエーターとかバッテリーとかリレーとかサブリレーとかの部品
みたいなイメージかな。
組織内で楽しく共有してみてねー
