8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Power Apps キャンバスアプリのフォームコントロールをレイアウトするテクニック

Last updated at Posted at 2019-12-23

#列のスナップ
Power Apps のキャンバスアプリで業務アプリを作成しようとした場合、フォームコントロールを利用して入力(または表示)フォームを画面に追加することが多いと思います。

このフォームコントロールの各入力コントロールを簡単にレイアウトするための機能として「列へのスナップ」というモードがあり、指定して列数に応じて自動的に項目をレイアウトしてくれます。

初期値は 3 列のレイアウト。
image.png

3 列なのでこのようになります。
image.png

2 列に切り替えるとこのようになります。
image.png

#項目の幅を広げる
幅を広げたい項目(カード)を選択して横にグイッと広げると、テーブルの隣のセルと結合されたようにレイアウトが変わります。このとき、以降の項目は自動で並び替わります。

image.png

#3 列を保ったまま行によって項目数を変える
3 列の幅を保ったまま、1 行目の項目は 2 つ、2 行目は 3 つ、のようにレイアウトするにはカスタム カードという機能を使うと良いようです。

フォームコントロールのフィールドの編集メニューから「…」を選択して「カスタム カードの追加」をクリックします。

image.png

追加されたカスタム カードを任意のところにグイッと並び替えます。

image.png

こんな感じになります。

image.png

高さが揃っていないので気持ち悪いですね。他の行に合わせて各カードの高さを変更しておきます。

image.png

これはダメですね。カードの高さは変わったのに、下の行が上に移動してきません。というわけで、この状態でフォームコントロールの「列へのスナップ」をオフ・オンします。

オフにして、

image.png

もう一度オンに切り替えます。

image.png

確認のダイアログが出ますが、そのまま「列のスナップを有効にしてください」をクリックしましょう。

image.png

BOOOOOOOOOOOOM!!! キレイに並びました!!

#まとめ
Power Apps のキャンバスアプリで業務アプリを作成するときに良く利用するフォームコントロールですが、こうしたレイアウト手法を知っておくと更にアプリの作成効率が高くなりそうです。

カスタムカードの使い方は @h-nagao さんに教えてもらいました!Thanks!!

8
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?