カテゴリ別チートシートはじめに今年2023年の6月頃から従来のスマホレイアウトに加えて、PC・タブレットとスマホに対応可能なレスポンシブな自動生成アプリが作成できるようになっています。その1では上記のおさらいも含め新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法をご紹介。その2ではSharePointリストからレスポンシブ対応の自動生成アプリを作成し、レイアウトやページ構成などの概要部分をご紹介。その3ではギャラリーの基本的な調整とカスタマイズのサンプルをご紹介。その4では初期状態でちょっと怪しい部分を調整するサンプルをご紹介しました。上記から少し時間がたってしまいました。その5では初期状態だとフォーム部分がスマホレイアウトだと横がはみ出してしまう点の調整についてご紹介です。自動生成アプリの作成は前回までの記事をご参考ください。作成後の修正点について以降記載していきます。:違いがわかりやすいように動画を追加しました。前半が初期作成後の状態でWidthFitなし、後半でWidthFitを適用して2列と1列の構成にした場合の例です。サンプルSharePointリストの構成カスタマイズサンプルシリーズでは以下に記載しているリスト構成をベースに記載しています。今後記載する列の操作などはこの定義にそって書いていますので、適宜ご自身の構成と読み替えて調整いただければと思います。(youseibubu.com)モバイルレイアウト時のフォームのはみ出し自動生成アプリ(レスポンシブ)を作成すると、PC・タブレット、スマホにも対応するアプリがサクッと作れます。そのままだとスマホレイアウトにすると、ちょっとフォームの右側が収まっていないケースがあります。タブレットやPCの場合、2列でも幅がさらに広い場合は右側が余っていたりします。通常より少し幅が狭くなるので、ものによってはフォームが1列に調整されます。以下のサイズだと2列のままですね。プレビューでタブレットで見た場合(小さめのものだとフォームが1列になる)スマホレイアウトの場合(例はiPhone12、13、14)スマホ版の場合は自動でギャラリー部分とフォーム部分が分かれて表示されます。ギャラリー部分はいいんですが、フォーム部分が収まっていないですね。他の端末で試してももう少し収まるやつもありましたが、大体ちょっと足りていない感じでした。フォームの右が収まっていないフォーム内のカードの幅(Width)がスマホの幅より大きいため理由はシンプルで自動生成された際のカードの幅が458pxとなっていてスマホの幅より大きいためです。自動生成で2列のレイアウトの場合、これが2つ並んでいて、PC・タブレットの場合も幅をこの2つ分より狭めるとフォーム内でカラム落ちして1列になります。スマホで見た際には当然2つ収まらないので1列となりますが、それでも458pxあるので収まり切れていないという感じですね。PC画面で普通に見ると2列表示出来ていますね。それぞれ458の幅なのでそれより幅が広い場合は右側が足りないのでちょっとなーという点もありますね。幅を狭めて2列分収まらなくなるとカラム落ちして1列になる。この際も458の列幅なので右側がからーんとしていまいちなますね。スマホだと1列で表示するが、幅が足りずに収まらない幅で合わせる(WidthFit)プロパティでぴったりに調整するシンプルな調整方法があるのでそちらをご紹介します。・各データカードのプロパティ:幅で合わせる(WidthFit)をオンにするこれはカードの標準プロパティにあります。ここをオンにすると余る場合は幅一杯に広がってくれますし、幅より大きい場合は画面の幅までとなってくれます。この部分は公式の解説で詳しく説明されていますのでご参考ください。Learn自動生成フォームに適用するでは実際に上記を適用します。ひとつずつプロパティを調整してもOKですが、以下のようにすべてのコントロールを選択して一括調整も可能です。TIPSShiftキーまたはCtrlキーを押しながらデータカードを選択すると複数選択できる※以下のようにデータカードを閉じて表示し選択するのが良いです。※異なる階層だと効きません。同じ階層の場合に有効です。以下のように選択されるので「幅で合わせる(WidhtFit)」をオンにするぴったり収まることを確認!さらに足りない場合も広がることを確認!上記を適用してプレビューで見てましょう。スマホレイアウトの場合はい、そうするとスマホの以下のようにちゃんと収まります!大きすぎる幅の場合でも以下のようにFitしてくれるんですね。幅一杯まで広がってくれてこちらもFitします。→1列で幅一杯にFitしてくれますということでたったこれだけの調整で一気にいい感じにしてくれます。WidthFitしておけば大体大丈夫ではないでしょうか。列のレイアウト調整した場合もOK上記は最初からのレイアウトなのでさらに3列にしたり、一部は1列にしたりと調整されるかと思います。その場合もとりあえずWidthFitしておけばいい感じに収まるかと思います。以下では一部の列は1列に広げています(詳細や写真、添付ファイル)TIPS1列構成の場合はParent.Widthとしても自動でフォーム幅まで広がってくれます。1列の場合はこれでもOKですが、2列、3列などの場合は対応できないのでWidthFitを使うのがいいですね。場合、収まりはするが縮めても2列のままでカラム落ちしてくれない。→2列のものは1列に広がる、1列は1列のまま広がるスマホの場合も同様にすべて1列で幅に収まる感じで広がる表示、非表示の場合にもいい感じに広がる!特定のケースで非表示にする列があり、その部分がからーんとなるのが嫌な場合はWidthFitとしておけばその分を前の列が広がってカバーしてくれます。この特性で動的なフォームの場合でも深く考えずにいい感じに調整してくれますね。WidthFitしておけば大体大丈夫ではないでしょうか。非表示の場合はその分タイトルが広がってカバーしてくれる(からーんとならない)おまけ以前このWidthFitの挙動をちゃんと把握してなくて、スクリーンサイズに応じて幅を変えるなどの調整を紹介したりもしてたんですが、完全にWidthFitしておいた方が楽だし、足りない場合も対応できるので断然にWidthFitがいいですね。以下は忘れてください。1列の場合はParent.Widthにすることで自動でフォーム幅まで広がるのでそれでもいいかもしれません。収まる場合は2列や3列、収まらなければ1列とする場合などはWidthFitで対応が良いと思います。WidthFitした方がいいおわりにということで初期状態ではちょっといけてないフォームの幅をプロパティひとつできれいにする方法のご紹介でした。自動生成アプリ以外でもフォームであれば使えるので活用ください。次回以降(ちょっと先になりそうですが💦)は、この辺からさらに拡張してカスタマイズするサンプルなどをご紹介していこうかと思います。AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。Fxリファレンスをカテゴリ別に記載したチートシートです。名前をど忘れした数式、関連する関数・数式の把握、最近の更新チェックなどにお役立てください。itこの記事は役に立ちましたか?もし参考になりましたら、下記のボタンで教えてください。Automate技術者へと転身。qiitaや自社HPでも技術ブログを書いていました。List」(タブ一覧と日本語では表記)の初期選択値を空にする方法をご紹介します。ギャラリーは必要なケースがあるかもですが、タブリストは正直不要かもですw前回の記事では初期値を指定する方法を記載しています。基本編はじめに今回は永遠のプレビュー(笑)のデータテーブル(DataTable)コントロールに触れてみようと思います。以下でも軽く触れていますが、一覧を作るのにギャラリーではなくデータテーブルも使えます。Copy関数が便利!(クリップボードへコピー)Tipsこちらの記事は現状Qiita記事へのリンクとなります。リンク先よりご確認ください。戻す)今回は最新のアップデートの確認をいち早くしたり、バージョンの不具合かも?なときに使う作成バージョンの変更について記事にしました。Appsの公式ブログでモダンコントロールの更新について、1~2か月に一度のペースで更新されている公式ブログのリンク集です。先月更新した内容や今後の予定などが掲載されています。最近PowerAppsをはじめた者です。いつも参考にさせてもらっています!現在、自動生成レスポンシブアプリの試作を行っています。記事の通りデータが見切れている状態だったのですが、「幅で合わせる」でほとんどのデータが問題なく見れるようになりました。添付ファイルDataCard内に置いてあるGallery画像のプレビューがどうしても見切れてしまいます。引用カード内に配置されたギャラリーのwidthが固定値になってないでしょうか?他のカード内のコントロールのようにParent.Widthをベースに動的にすればイケるかと。トラックバックURLこの記事へのトラックバックはありません。返信をキャンセルする。