はじめに
これまで私のブログで何度か触れましたが、Power Apps でフォームコントロールを利用すると、データの入力フォームを簡単に作成することができます。
しかし、データの入力項目が多いと、以下のように縦長になっていまい、ちょっとユーザーエクスペリエンスが微妙に感じてしまう方もいると思います。
※上記はモバイルの例ですが、PC 向けのアプリの場合も、一つの画面に入力項目が沢山あると、ちょっと窮屈に感じてしまい、ユーザーエクスペリエンスがあまりよくないかもしれないと思います
そのため、今回は、以下のように、入力項目をタブで切り替えるようなアプリに作り替える方法を紹介します。
タブの用意
まず、以下のタブを用意します。
こちら、実はギャラリーコントロールで、[Items] プロパティを以下のように設定します。
こちら、タブに表示させたい名前と内部の ID を意味します。
Table(
{
ID: 1,
Label: "申請概要"
},
{
ID: 2,
Label: "出張情報"
},
{
ID: 3,
Label: "交通費、ホテル"
},
{
ID: 4,
Label: "添付"
}
)
ギャラリー内の部品はボタンが一つだけです。
ギャラリーの [TemplateSize]プロパティ、ボタンの[Width]プロパティを適度なサイズに変更します。
今回は、Parent.Width/4 としています。
また、ボタンの [RadiusTopLeft]、[RadiusTopRight]プロパティをそれぞれ 20 に変更してタブっぽくします。
ボタンの [Text] プロパティを以下のように設定します。
ThisItem.Label
そして、ボタンの [OnSelect] プロパティを以下のように設定します。
Set(
varTabSelected,
ThisItem.ID
)
各ボタンを押した際に、varTabSelected が以下の ID 値に応じて切り替わる感じです。
更に、ボタンの [Fill] プロパティを以下のように変更します。
ボタンが選択された時だけ色を変える感じです。
If(
varTabSelected = ThisItem.ID,
RGBA(
0,
120,
212,
1
),
Gray
)
タブ側準備はこれで完了です。
タブの入力でフォームコントロールを切り替える
続いて、フォームコントロール側です。
こちらは、どタブの設定で表示したいかに応じて、フォームコントロールの DataCard の [Visible] プロパティを切り替えます。
例えば、Title については、申請概要で入力してほしいため、以下のように設定します。
varTabSelected=1
出張開始日は、出張情報で入力してほしいため以下のようになります。
varTabSelected=2
ちょっと面倒ですが、DataCard ごとに設定していきます。プレビュー実行し、上手く切り替わっているか確認します。
ついでに、起動時には最初の項目が選択されているよう、[OnStart]に以下の処理を入れておきましょう。
Set(
varTabSelected,
1
)
その他
最後に、ボタンを追加し、[DisplayMode] プロパティを以下の通り変更しました。必須項目が入力されていないとボタンを押せない感じにしています。
If(
Form3.Valid,
DisplayMode.Edit,
DisplayMode.Disabled
)
ついでに、エラーメッセージようのラベルを用意し、[Visible] プロパティを以下のようにします。
If(
Button1.DisplayMode = DisplayMode.Disabled,
true,
false
)
まとめ
データの入力をタブで分ける感じのアプリが仕上がりました。
個人的に、こちらの方が少し利用者にやさしい気がします。
もちろん、ページを複数用意し、ページごとにフォームコントロールを用意して、表示する DataCard を分けて、[次へ] ボタンを押しながら入力させる方法も考えられます (最後のデータ送信のところを工夫する必要があります)。こちらは、別の記事で紹介しようと思います。
個人的には、上記方法は、スクリーン、フォームコントロールをが増えてしまうため、そこまで気にしなくてもいいかもですが、こちらの方法の方が効率が良いかなと思っています。