【Power Apps】未入力フィールドを視覚化！ユーザーに知らせるUIテク

はじめに

Power Apps でフォームを作成する際、ユーザーが入力漏れをしないように
未入力の項目に色を付けて目立たせたいことってありますよね？？
入力されると自動で元のデザインに戻るようにすれば、視覚的にも分かりやすくなり
ユーザー側へ配慮した優しいフォームになります！
本記事ではそんな要望を叶えるための設定方法について説明していきたいと思います！

作成イメージ

コントロールの設定方法

• テキスト入力での設定方法

Fill プロパティの設定で If関数 と IsBlank関数 を組み合わせます
IsBlank で引数に Self.Text を設定しテキスト入力のコントロールの値が空(True)であれば
色付けを行い、値が入力されれば(False)色付けを解除します。
色の値はお好みで設定してください。

Fill

If(
    IsBlank(Self.Text),
    RGBA(238, 204, 204, 1),  //空白の場合は色付け
    RGBA(255, 255, 255, 1)   //値が入力されていたら色付け解除
)

• その他コントロールでの設定方法

他のコントロールもテキスト入力での設定をもとに応用していきます。
IsBlank において引数の値をコントロールに応じて変更していくだけです。

日付の選択・・・ IsBlank(Self.SelectedDate)
ドロップダウン、コンボボックス・・・ IsBlank(Self.Selected.Value)

このように設定することで作成イメージを実現させることができます！

プラスαの設定でさらに操作性をアップ

視覚的な効果でユーザーに未入力項目を伝えることができていても
あくまでも視覚的に見せているだけであって、実際には他にも設定を行わないと
いくら未入力であったとしても次の動作へ進むボタンを押したりなどは出来てしまいます。

未入力であるならば視覚的且つ操作にも制御を行っておくことでデータの入力漏れを防ぐことが可能です！

例えば保存ボタンの DisplayMode を先ほどの色付けの要領で以下のように設定します。

DisplayMode

If(
    IsBlank(DataCardValue1.Text) || IsBlank(DataCardValue2.Text),  //必要項目数に合わせて設定
    DisplayMode.Disabled,
    DisplayMode.Edit
)

このように設定しておくことによって、必須項目が未入力の場合は
ボタン自体が押せないように制御をかけることもできます。

まとめ

未入力のフィールドを視覚的に理解させることは、アプリの使いやすさを大きくアップさせる小さなテクニックです！
単に入力エラーを防ぐというだけではなく、ユーザーが迷うことなく入力をスムーズに行えることもアプリを作成していくうえで重要なポイントとなります。
アプリの作成に慣れてきたらこういった小技をどんどん取り入れて快適な操作を行えるアプリ作成を目指してみてください！