フォームのレイアウトについて （カスタマイズサンプル）

はじめに

フォームはあらかじめ用意されているコントロールでデータソースのデータをサクッと表示・編集できるようにフォーマットしてくれてとても便利です。
フォームを使うとSubmitFormやその他便利な関数が使えます。
ただ、扱いに慣れていないと思ったようにレイアウトできないので、今回はいつくかのフォーム調整サンプルやレイアウトの仕組みなどをご紹介します。

TIPS※2023/12/20 WidthFitプロパティについてのセクションを追加しました。

TIPSフォームのプロパティや関連記事を追加投稿しています。
こちらも併せてご参考ください。

フォーム関連：関連記事を随時追加

フォームについて

フォームはあらかじめ用意されているレコードの詳細の表示や編集、作成が楽にできるコントロールです。
とても便利ですがレイアウトの調整は仕組みを知って慣れないと想定通りに調整が難しいです。詳しくなれば色々カスタムを行うことでかなり出来る幅は広がります。
基本的な部分は公式に詳しく載っていたのでこちらをご参考ください（前はここまで詳しく載ってなかった💦）

NOTEフォームについて中身からすべて記事にするとかなり大変ですし、上記の公式でも詳しく解説があるので、本記事ではレイアウト時のポイントに絞った内容にしています。

編集フォームと表示フォーム

次から調整や実装のサンプルなどをTips交えて紹介していきます。
すべて編集フォームを前提とした内容となります。表示フォームは使っていません。

TIPS表示フォームで作成すると編集用の要素（UpdateやErrorラベル）などはない状態で作成されます。
閲覧のみであれば問題ないですが、途中から編集フォームへは変更はできないです。
また、編集フォームを閲覧モードで表示すれば1つのフォームで両方使えるので自分は大体編集フォームのみを使っています。

実装サンプル

横幅を自由にレイアウトする方法 2選

まずは横幅を自由に調整する手順です。最初に編集フォームを入れると以下のように3列レイアウトなどになるかと思います。
この状態だと最大で3列までですね。横に延ばせば1段に1列、2段目は3列など調整も可能です。
より細かい調整をしたい場合は以下のように列の数を変更します。

公式だとこの辺に載っていました（以前はなかったのに）
キャンバス アプリに対するデータフォーム レイアウトについて理解する – Power Apps | Microsoft Learn

① レイアウトを12にする

レイアウトの数を12まで増やすと12段階で調整が出来るようになります。個人的にはこちらをよく使ってます。
おおむねここまで調整出来れば想定するレイアウトは作れると思います。
この状態にしたうえで、列の表示設定、順番を変更してレイアウトしましょう。

 

② 列へのスナップをオフにする

上記よりさらに細かく分けたい場合は列へのスナップをオフにします。
※マウス操作では12段階とさほど変わりはありませんでしたが

違いとしては公式に以下のようにありました。（前は書いてなかったのに）
オフにした場合はレイアウト調整時に余白があっても自動で上に詰まってくれません。
カスタムする際は12列レイアウトの方がやりやすいかなーとおもいます。
（どちらの場合でも直接X,Yを指定すれば調整できますが（後で説明します））

公式から抜粋

NOTE一旦列のスナップをオフにしてオンに戻すと警告が出ます。OKで指定した列のレイアウトで再調整されるので、かなりカスタムした後はお気を付けください。

TIPS直接Widthを調整することでも変更が出来ます。（12レイアウト、スナップオフでも）
なので実質いくらでも調整は出来ますね。

今回は以下のように調整してみました。（サンプルなので適当です）

NOTEカードの部分を調整しています。中身のコントロールは以下のようにカード（親の幅）に合わせて調整される数式が入っているので併せて調整されます。この部分を触った場合は固定値に変更されるので注意を。
意図的に調整したい場合は固定値にすればOKですし、カードに合わせたい場合は他を参考に元の数式に戻せばOKです。

フォームカードの選択・並び替えなど

フォームカードの選択や並び替え、コントロールの種類などは以下から調整します。
並び替え以外にも列の種類を変更やカスタムカードの追加、プロパティのロック解除などいろいろな要素があります。

フォームカードの位置

こちらも公式に今は詳しく載っていました。
フォームの中のカードはＸとＹのプロパティを持っていますが、これがフォーム内での配置される位置になります。
Xが横、Yが縦の順番です。この順に並んでいます。

先ほどのフィールドの並び替え操作やレイアウト調整操作をした際もこの数値が自動で調整されていて、
レイアウトされています。

この部分を直接調整することでも意図するレイアウト（縦横の配置）が可能です。
困ったときはここを確認しましょう。

TIPSコントロール数が多くなってきたりするとフィールドの並び替えでもうまく配置されない場合があります。
実際にはこのXとYの位置になっているので、ここを直接設定すれば調整が可能となります。
縮めた場合に上の段に詰めたい場合などはYを同じにしてXを0から順番に付けて並ばせる（収まらない部分は次の段に行く）などの調整も可能です。

列の高さ

列の高さの調整も躓きポイントですね。仕様としては同じ段の一番高いものに合わせられます。
例えば画像列や添付ファイル列などだと、基本縦が長いですが、同じ段のカードも同じ高さになります。
左に画像1段で右に2段などの調整は通常だとできません。

TIPS実はこの辺もカスタムする方法はあるので、そのうちまた記事で紹介しようかと思います。

キャンバス アプリに対するデータフォーム レイアウトについて理解する – Power Apps | Microsoft Learn

カードの高さは中身の高さに応じて広がってくれます。

通常カードの中身にはエラーラベルがありこれが高さ自動伸縮になってます。
エラーがあるとこの部分が表示されますが、合わせてカード自体の高さも広がってくれます。
カスタムで高さ自動伸縮のラベルをカード内に入れた場合も同様なのでこの点も使えたりします。うれしい仕様となります。

WidthFitプロパティについて : 12/20追加

上記で記載していなかったWidthFitプロパティ（幅をあわせる）について、以下で記事にしました。
こちらはレスポンシブレイアウトの特にかなり有用です。いい感じに幅一杯に広がり、かつ、収まらない場合は納めてくれます！

従来はあまりレスポンシブレイアウトのアプリは少なかった（出来るが実装が面倒だった）ため、
動的にフォームの幅が変更することはなく、このプロパティはあまり重要視されていなかったと思います。
レスポンシブ以外の用途としては条件に応じて列を非表示する実装の場合にその分をカバーして広げるなど？だったかと。
現在は垂直・水平コンテナーが普及してきたり編集プレビュー画面のエミュレートも充実し、
さらには自動生成アプリでレスポンシブレイアウトがサクッと作れるようになったので、レスポンシブレイアウトでアプリを作る機会が増えたと思います。

このプロパティをONにするだけでいい感じに調整してくれるので是非以下記事をご参照いただければと思います。

おわりに

今回はフォームのレイアウト調整を中心にした記事でした。
フォームについてはレイアウト系以外にもカスタム系やSubmit系、便利関数系などいろいろとポイントがあります。
この辺りはおいおい別の記事で紹介していこうと思います。

もちろんフォームを使わずにラベルと入力コントロールなどで自作することも可能ですが、
フォームのカスタマイズ方法を覚えれば、意図するフォームをスマートに作れるようになってきますので覚えていて損はないです。
フォームであればSubmitFormで追加、更新、エラー検証などもさくっと出来ますし、
Validateの事前チェックやUpdatesを使って画面更新内容を取ることなどもスマートに出来ます。

今回の記事が見ていただいた方のフォームレイアウトの基本の理解や活用にお役に立てれば幸いです。それでは。

フォーム関連記事

フォーム関連記事：

自動生成アプリ関連記事：