水平・垂直コンテナーでギャラリー・フォームの幅を動的に変更する（レスポンシブ・横スクロール）

はじめに

前回ギャラリーの横スクロール対応の記事を書きましたが、今回はその発展編の記事となります。
水平コンテナーを使ってギャラリーの動的な幅調整、併せてフォーム部分も調整する内容です。
ギャラリーは前回同様に水平コンテナーで横スクロール対応させています。

水平・垂直コンテナーを使って1画面でギャラリー、フォームを表現するケースがあるかと思いますが、その場合はギャラリーの幅が狭くなりますね。
このサンプルでは操作に合わせてギャラリーを狭くフォームを広く、逆にフォームを広く、ギャラリーを狭くする実装のサンプルです。
各操作のタイミングやボタン、スライダーで動的にレイアウトを調整しています。

ぱわ代

コンテナーを使って幅の変更が動的にできるのね！
作り方を覚えれば色々活用できそうだわ♡

TIPS★2023/12月追記
動的なフォーム列の幅調整の記載箇所について、WidthFitプロパティを使ったサンプル記事のご紹介を追加しました。
水平・垂直コンテナーでギャラリー・フォームの幅を動的に変更する（レスポンシブ・横スクロール） | Power Apps Tips ログ (youseibubu.com)

実装サンプル動画

まずは実装のサンプル動画です。こんなイメージのサンプルです。

★24/3月更新 モダンコントロール テーブルの記事書きました！

モダンのテーブルコントロールにOnSelectも付いたので、動的レイアウトやOnSelect交えたサンプル実装の記事を書きました。こちらも併せてご参考ください。

2024.03.09

モダンコントロール テーブル 動的なレイアウトサンプル（OnSelectも付いた！）

モダンテーブルコントロールにも待望のOnSelectが付きました！（2024年3月） 今回はテーブルコントロールを使った、動的なレイアウト調整（カードタイプ、レコードタイプ切替）やOnSelectを使ったサンプル実装を軽めにしてみたのでご紹介します。...

実装

さっそく実装です。より手早く作成するため、今回は用意されたレイアウトをベースにサンプルを作りました。

レイアウト

今回の画面はレイアウトで用意されている「分割画面」をベースに作成しています。
こちらを使うと以下のように2分割した水平・垂直コンテナーがあらかじめ入った状態のスクリーンが出来上がります。もちろん空から作成して同じようにレイアウトを作ってもOKです。

TIPSスクリーンを追加時に空やその他レイアウトが選択できますのでマッチするものがあれば手早くレイアウト構成が可能です。他にもサイドバー（自動生成アプリと同等）、ヘッダー、メインセクション、フッターのレイアウトも用意されています。

上記で画面上に水平コンテナーが出来て、その下に左と右の垂直コンテナーが2つという構成の画面が出来ます。
左と右のバランスは以下のように2分の1ずつです。

構成

以下が最終的な構成要素です。

1. 左側のギャラリー：水平コンテナーで横スクロール対応あり
2. 右側のフォーム：選択したレコードを編集で表示
3. レイアウト調整：スライダーとボタン（ギャラりー）

左側：ギャラリー部分

左側のギャラリーは前回の記事と同じ感じで水平コンテナーにGalleryを入れて、横スクロールを出す対応をしています。
ざっくりと構成とポイントは以下の感じです。※ギャラリー要素は作成済みの前提
・サンプルのラベル部分（任意）
・水平コンテナー内にギャラリーを入れ込む
・水平コンテナーの水平方向のスクロールを出す
・ギャラリーの幅（伸縮可能）はオフにして、はみ出す幅を指定する

こちらの実装や調整部分は本記事では割愛しますので、以下を参考にしてください。

2023.07.17

横スクロール可能なギャラリーを作る （水平・垂直コンテナー）

はじめに 最近の投稿はコンテナー系多いなーと自分でも思っていますが、ついでに今回のサンプルも紹介しようと思います。業務アプリに一覧はつきものですが、ギャラリーっぽいのではなく、エクセルの様に横に並べて多くの列を表示させたいというケースがよくあるかと思います。シンプルな要件でデータテーブルで事...

右側：フォーム部分

こちらはフォーム部分を入れます。詳細は割愛しますが簡単には以下です。
・サンプルのラベル部分（任意）
・操作用のボタン　※サンプルなので本来は水平スクロール入れてその中に操作アイコン入れるなど
・編集フォームを入れ、表示する列を設定する

サンプルラベル、操作用ボタンは高さの伸縮可能をオフにして固定の高さにしています。

フォームの各列の長さですが、最初は3列レイアウトになっていると思います。
この辺りは後で調整するので、いったんおいておいて、Itemプロパティなど調整しておきます。
サンプルではギャラリーで選択中のものにしています。

スライダーを追加

これで基本的にはギャラリーとフォームが1画面に追加できました。
ここからこの分割の配分を調整していきます。
今回はいったんスライダーをベースに調整しますので、一番親の水平コンテナーを下に下げて、
上部にスライダーコントロールを追加します。最小値は１、最大値は10とします。

NOTE最大値は20でも30でも大丈夫です。※ギャラリー、フォームの最小値以上には縮まらないのでそのあたりは適宜調整してください。

２つの垂直コンテナーの割合を調整

左側の垂直コンテナーを選択して、プロパティ「FillPortions」（パーティション）をスライダーの値にします。

Code//左側のFillPortionsプロパティ
Slider1.Value

次に右側の垂直コンテナーを選択して、プロパティ「FillPortions」（パーティション）をスライダーの最大値ースライダーの値+1にします。

NOTEスライダーのMAX－スライダーの値にした場合、結果が0になると調整が効かなくなる（最低1は必要）なので、＋１の調整を入れています。

Code//右側のFillPortionsプロパティ
Slider1.Max – Slider1.Value +1

この段階でプレビューすれば、スライダーの値に合わせて、値を大きくするとギャラリーの幅が広がり、その分フォームの幅が縮む。逆もしかりな状態になるかと思います。

ボタンの追加

この部分は任意ですが、今回のサンプルではスライダーで調整しているので、
ボタンクリックではスライダーのDefault値を変更して3段階の表現をしています。

以下、ギャラリーとボタンの設定値です。
・ギャラリーにボタンを追加
・ギャラリーのItemsにidとValueの配列を指定　→IDをスライダーの値、Valueを表示に使用
・ボタンのOnSelectにスライダー初期値用の変数を指定する処理を入れる
・ボタンのTextにはValueを指定
・選択時の背景調整
・スライダーのDefaultに変数を指定

Code//GalleryのItems
[{id:1,value:”フォーム”},{id:5,value:”中央”},{id:10,value:”ギャラリー”}]
//ボタンのOnSelect　
Set(sliderVal,ThisItem.id)
//ボタンのText
ThisItem.value
//ボタンのFill ※調整値は任意
If(ThisItem.IsSelected,RGBA(16, 110, 190, 1),Color.LightGray)

//スライダーのDefaultに変数を指定
sliderVal

これでボタン操作でスライダーの最小値（1）、中央（5）、最大値（10）と調整できると思います。
※最大値が10でない場合は中央値と最大値に入れるID部分は調整ください。

ぴーたくん

スライダーを非表示にしてボタンの3段階のみにしちゃう、ボタンを5段階にする。なんてことも可能だね！

操作に応じた幅の調整

スライダーとボタン以外に、操作に合わせて調整すればより使いやすくなると思いますので、本サンプルでは以下を対応しています。
サンプルなのでご参考として実装に合わせて調整ください。

・ギャラリーの編集アイコンをクリック時に変数を更新してギャラリーを最小にする
・フォームのOKボタンをクリック時に変数を更新してギャラリーを最大にする

フォームの列の動的な調整

フォームですが、初期状態では3列構成で幅を調整できても短い列だとかっこ悪いですよね。
逆に幅を長くした場合は、幅を狭くした場合に収まりません。

このサンプルではMin関数を使って、指定の幅とフォームの幅のどちらか小さい方の幅に調整する実装にしています。

この調整を行うと、幅が足りない場合はフォームの幅までになり、広げれる場合は指定の値まで広げることが出来ます。
まずはフォームの列のレイアウトを調整します。

TIPSフォームは横に3列あったとしても、表示エリアに収まらない場合は自動でカラム落ちしてくれます。
また今回のようにレイアウトはある程度自由に調整が出来ます。この辺りはまた別に記事にしようと思います。

今回は12カラムレイアウトにしてその後に幅を調整する方法で実装します。
調整しやすいようにフォームを広げた状態にします。

1. フィールドの表示内容・順番を調整する
2. 列の数を12にする

NOTE他の方法で列へのスナップをオフにしてより自由に幅調整する方法もあります。
こっちのほうがより細かい調整も出来ますが、12段階でさくっと調整するほうが個人的には好み
それほど変わらないのでどっちでもいいと思います。

12列のレイアウトにしたらそれぞれの列をマウスで幅調整します。
今回のサンプルでは上部に短めの項目、下部に広めの項目にします。スキル以降の項目はフォームまでの幅にしています。

この段階でフォームの幅を中央、狭くすると以下のように収まらない列はカラム落ちして表示されることが確認できます。狭い場合は1列ずつ表示されますね。

幅の最大値設定

この状態だと縮めたレイアウトの場合に右端が切れてしまいます。
そこでMin関数を使って、指定の幅とフォームの幅のどちらか小さい方の幅に調整する実装にします。
各列のデータカードコントロールのWitdhを以下のように調整していきます。
また、常にフォームまでの幅にしたいものはParent.Widthにします。

また、フォームの幅は動的に変わってはいますが、縮めてもParent.Widthで取れるのはフォームの最小幅の値になるので、ここも先に調整しておきます。

Code//先にフォームの最小幅を調整しておく
Parent.Width
//上部の各データカードのWitdh
Min(＜元の値＞,Parent.Width)
//下部の幅いっぱいに広げたいデータカードのWitdh
Parent.Width

下部の幅一杯にするカードのWidthの調整

NOTE段が上に上がらない場合はカードのYとXを調整しましょう。
フォームのカードの位置調整は実際にはXとYがフォームでの位置になっています。
Yが同じものがXの順番で並び、収まらないと段が下がります。
同じ段にするにはYを同じにしてXは並び順を意識して調整します。

以下の部分についてはYを全部0にして、Xを順番に付けていけば、収まる場合は上に詰まり、収まらない場合は次の段に行きます。

フォームの列が幅に合わせていい感じに幅一杯、収まらない場合は段落ちするようになったと思います。
幅が狭い場合も見切れずにフォーム幅までの長さに調整されています。

TIPS★2023/12月追記
このMinで調整するのも行けますが、もっと簡単に動的な幅調整をするWidthFitプロパティを使う
サンプルを以下にご紹介しています。こちらもご参考ください。
→収まらない場合は幅一杯までに納めてくれて、余る場合は広がってスペースを埋めてくれます
※余る場合に広がる点が本実装とは異なります
自動生成 レスポンシブ アプリのカスタマイズサンプル ⑤ WidthFitでフォーム列はみ出し調整 | Power Apps Tips ログ (youseibubu.com)

おわりに

今回は水平コンテナーを使ってギャラリーとフォームの動的な幅調整とフォーム内の列部分も調整するサンプルでした。

1画面レイアウトでギャラリー、フォームを表示する場合でもギャラリーを広くすることが出来ますし、操作対象を動的に調整しているのでユーザービリティもよいと思います。動的なレイアウトにするとワンランク上感がありますよね。
今回はサンプルとして分割画面をベースにレイアウトしていますが、上記の調整を参考にお好みの場面で取り入れていただければレイアウトの幅がますます広がるかと思います。
またフォームのレイアウトについても今回のように結構自由度高く調整できます。
この辺もまた別で記事にしようと思います。それでは。

関連

横スクロール可能なギャラリーを作る （水平・垂直コンテナー）

2023.07.17

横スクロール可能なギャラリーを作る （水平・垂直コンテナー）

はじめに 最近の投稿はコンテナー系多いなーと自分でも思っていますが、ついでに今回のサンプルも紹介しようと思います。業務アプリに一覧はつきものですが、ギャラリーっぽいのではなく、エクセルの様に横に並べて多くの列を表示させたいというケースがよくあるかと思います。シンプルな要件でデータテーブルで事...

レスポンシブ関連記事：

レスポンシブ | Power Apps Tips ログ

Power AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。