自動生成 レスポンシブアプリのカスタマイズ ⑤ WidthFitでフォーム列はみ出し調整

はじめに

今年2023年の6月頃から従来のスマホレイアウトに加えて、PC・タブレットとスマホに対応可能な
レスポンシブな自動生成アプリが作成できるようになっています。
その①では上記のおさらいも含め新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法をご紹介。
その②ではSharePointリストからレスポンシブ対応の自動生成アプリを作成し、レイアウトやページ構成などの概要部分をご紹介。
その③ではギャラリーの基本的な調整とカスタマイズのサンプルをご紹介。
その④では初期状態でちょっと怪しい部分を調整するサンプルをご紹介しました。

上記から少し時間がたってしまいました。すいません。
その⑤では初期状態だとフォーム部分がスマホレイアウトだと横がはみ出してしまう点の調整についてご紹介です。

自動生成アプリの作成は前回までの記事をご参考ください。作成後の修正点について以降記載していきます。

TIPS※日本環境 2023/12/10 時点のバージョン：3.23114.24の内容で記載しています

実装サンプル動画

2023/12/20 ：違いがわかりやすいように動画を追加しました。
前半が初期作成後の状態でWidthFitなし、後半でWidthFitを適用して2列と1列の構成にした場合の例です。

サンプルSharePointリストの構成

カスタマイズサンプルシリーズでは以下に記載しているリスト構成をベースに記載しています。
今後記載する列の操作などはこの定義にそって書いていますので、適宜ご自身の構成と読み替えて調整いただければと思います。

自動生成 レスポンシブアプリのカスタマイズ ② 自動生成アプリ概要 | Power Apps Tips ログ (youseibubu.com)

モバイルレイアウト時のフォームのはみ出し

自動生成アプリ（レスポンシブ）を作成すると、PC・タブレット、スマホにも対応するアプリがサクッと作れます。
ただそのままだとスマホレイアウトにすると、ちょっとフォームの右側が収まっていないケースがあります。
また、タブレットやPCの場合、2列でも幅がさらに広い場合は右側が余っていたりします。

プレビューでタブレットで見た場合

通常より少し幅が狭くなるので、ものによってはフォームが1列に調整されます。以下のサイズだと2列のままですね。

スマホレイアウトの場合（例はiPhone12、13、14）

スマホ版の場合は自動でギャラリー部分とフォーム部分が分かれて表示されます。
ギャラリー部分はいいんですが、フォーム部分が収まっていないですね。
他の端末で試してももう少し収まるやつもありましたが、大体ちょっと足りていない感じでした。

フォーム内のカードの幅（Width）がスマホの幅より大きいため

理由はシンプルで自動生成された際のカードの幅が458pxとなっていてスマホの幅より大きいためです。
自動生成で2列のレイアウトの場合、これが2つ並んでいて、PC・タブレットの場合も幅をこの2つ分より狭めると
フォーム内でカラム落ちして1列になります。
スマホで見た際には当然2つ収まらないので1列となりますが、それでも458pxあるので収まり切れていないという感じですね。

PC画面で普通に見ると2列表示出来ていますね。
それぞれ458の幅なのでそれより幅が広い場合は右側が足りないのでちょっとなーという点もありますね。

幅を狭めて2列分収まらなくなるとカラム落ちして1列になる。
この際も458の列幅なので右側がからーんとしていまいちなますね。点もありますね。

スマホだと1列で表示するが、幅が足りずに収まらない

幅で合わせる（WidthFit）プロパティでぴったりに調整する

シンプルな調整方法があるのでそちらをご紹介します。

・各データカードのプロパティ：幅で合わせる（WidthFit）をオンにする

これはカードの標準プロパティにあります。
ここをオンにすると余る場合は幅一杯に広がってくれますし、幅より大きい場合は画面の幅までとなってくれます。

この部分は公式の解説で詳しく説明されていますのでご参考ください。
キャンバス アプリに対するデータフォーム レイアウトについて理解する – Power Apps | Microsoft Learn

自動生成フォームに適用する

では実際に上記を適用します。
ひとつずつプロパティを調整してもＯＫですが、以下のようにすべてのコントロールを選択して一括調整も可能です。

TIPSShiftキーまたはCtrlキーを押しながらデータカードを選択すると複数選択できる
※以下のようにデータカードを閉じて表示し選択するのが良いです。
※異なる階層だと効きません。同じ階層の場合に有効です。

以下のように選択されるので「幅で合わせる（WidhtFit）」をオンにする

ぴったり収まることを確認！さらに足りない場合も広がることを確認！

上記を適用してプレビューで見てましょう。

スマホレイアウトの場合

はい、そうするとスマホの以下のようにちゃんと収まります！

大きすぎる幅の場合でも以下のようにFitしてくれるんですね。

PC・タブレットレイアウトの場合

この場合は逆に足りておらずに右がからーんとしていていまいちだった点が、
幅一杯まで広がってくれてこちらもFitします。いい感じですね。

PC画面で幅を広げた場合→それぞれ同間隔で広がってくれてFitします

タブレットレイアウトで2列は収まらずに1列になった場合　→1列で幅一杯にFitしてくれます

ということでたったこれだけの調整で一気にいい感じにしてくれます。
とりあえずWidthFitしておけば大体大丈夫ではないでしょうか。

列のレイアウト調整した場合もOK

上記は最初からのレイアウトなのでさらに3列にしたり、一部は1列にしたりと調整されるかと思います。
その場合もとりあえずWidthFitしておけばいい感じに収まるかと思います。
以下では一部の列は1列に広げています（詳細や写真、添付ファイル）

TIPS1列構成の場合はParent.Widthとしても自動でフォーム幅まで広がってくれます。
1列の場合はこれでもＯＫですが、2列、3列などの場合は対応できないのでWidthFitを使うのがいいですね。
※2列でParent.Width/2 の場合、収まりはするが縮めても2列のままでカラム落ちしてくれない。

PC画面で広げてみると同じ間隔で広がってくれる

タブレット1列の場合　→2列のものは1列に広がる、1列は1列のまま広がる

スマホの場合も同様にすべて1列で幅に収まる感じで広がる

表示、非表示の場合にもいい感じに広がる！

特定のケースで非表示にする列があり、その部分がからーんとなるのが嫌な場合は
WidthFitとしておけばその分を前の列が広がってカバーしてくれます。

この特性で動的なフォームの場合でも深く考えずにいい感じに調整してくれますね。
とりあえずWidthFitしておけば大体大丈夫ではないでしょうか。

カテゴリがある条件では非表示となる場合の例
通常は以下

非表示の場合はその分タイトルが広がってカバーしてくれる（からーんとならない）

おまけ

以前このWidthFitの挙動をちゃんと把握してなくて、スクリーンサイズに応じて幅を変えるなどの調整を紹介したりもしてたんですが、完全にWidthFitしておいた方が楽だし、足りない場合も対応できるので断然にWidthFitがいいですね。なので以下は忘れてください。

また、1列の場合はParent.Widthにすることで自動でフォーム幅まで広がるのでそれでもいいかもしれません。
ただ収まる場合は2列や3列、収まらなければ1列とする場合などはWidthFitで対応が良いと思います。

おわりに

ということで初期状態ではちょっといけてないフォームの幅をプロパティひとつできれいにする方法のご紹介でした。
もちろん自動生成アプリ以外でもフォームであれば使えるので活用ください。

次回以降（ちょっと先になりそうですが💦）は、この辺からさらに拡張してカスタマイズするサンプルなどをご紹介していこうかと思います。それでは。

関連記事

自動生成関連：

レスポンシブ関連：

数式リファレンス：