【PowerApps】アプリを使い易く、誤入力防止ができる DisplayMode属性とVisible属性の使い方
PowerAppsのアプリを使い易く、そしてデータ入力の間違い防止もするDisplayMode属性とVisible属性の使い方をご紹介します。
（動画時間：7:39）
Udemy.comでオンラインコースを運営しています。
マイクロソフトPowerApps 中級編【SharePointで、実務で使える業務アプリの作り方：勤怠管理アプリ編】
⇒ 半額になる「ディスカウントリンクページ」へ
「DisplayMode」属性と「Visible」属性の超基本
こんにちは、リーンシグマブラックベルトのマイク根上です。
業務改善コンサルをしています。
僕がPowerAppsでアプリ開発をする時に一番心がけている事は
アプリのユーザーさんにとってそのアプリが使い易くなる事です。
そのアプリがとても便利であっても使い難かったら
そのうち使われなくなってしまいます。
そこで今日はアプリを使い易くして、
しかもデータ入力の間違い防止もできるコツを皆さんにお見せします。
そのキーになるのは全てのコントロールにある
DisplayMode属性とVisible属性です。
簡単に言うと「DisplayMode」属性でそのコントロールを
編集可能状態、編集不可状態、
または閲覧のみ状態にする制御ができます。
編集不可と閲覧のみ状態の違いは
編集不可ではそのコントロールを灰色にして、
ユーザーに何かが足りないのを印象付けられます。
これによりデータ不足でのクラウド保存を防止する事ができるのです。
「Visible」属性は単純にそのコントロールを
表示したり、非表示にできます。
単に「true」、「false」だけを入れるのではなく、
条件式を使うと応用範囲が広がります。
アプリ画面は常にシンプルにした方が良いので、
各タイミングで必要の無いコントロールは
非表示にした方が使い易いアプリになるのです。
この記事でこれらの属性を使いこなせる様になり、
使い易いアプリを作るコツを習得して頂きたいです。
それでは早速見ていきましょう。
「DisplayMode」属性で誤入力防止をする仕方と活用事例
上図が経費精算提出アプリです。
下のリンクの動画でこのアプリの詳しい説明をしております。
⇒「MSアクセスの後継のPowerAppsで本格的経費精算システムを作った事例（複数アプリの連携）」
今回はその説明を省きますが、
本題の関数の動きとその説明にフォーカスします。
まず画面右上の「新規申請」ボタンを押します。
すると下図の「新規申請画面」で申請の各種情報を入れる画面になり、
それらの情報を入れて、その右上の「新規申請提出」ボタンを押すのですが、
情報を入れないと灰色でボタンが押せない状態になっています。
それをその保存ボタンの「DisplayMode」属性でそれを制御しているのです。
保存ボタンの「DisplayMode」属性
=If(
IsBlank(TI_申請金額２.Text) Or TI_申請金額２.Text*1<=0 Or CountRows(Attachment_添付画像２.Attachments)=0,
DisplayMode.Disabled,
DisplayMode.Edit
)
その数式の中でIf関数を使って申請金額が空白であるか、マイナスの値の時、
またはその画面下の添付コントロールに何もファイルが選択されていない時に「DisplayMode.Disabled」でこのボタンを編集不可状態にし、
それ以外の時、つまり全ての必須の項目がちゃんと満たされている時に
「DisplayMode.Edit」でこのボタンが使える様になるのです。
これによりユーザーは直感的に何かの情報が足りないと思えるし、
If関数の条件を工夫する事でデータが足りない事や、
誤入力の防止ができるのです。
「Text」属性で時と場合によって名前の変え方
一度、申請一覧画面に戻って、過去に申請した申請を選択します。
するとその申請の詳細を表示しています。
この画面はさっきの新規申請画面と同じ画面なのですが、
さっきの保存ボタンが消えています（下図参照）。
更にフォームも閲覧のみ状態になっていて編集ができません。
進捗を見ると「却下」になっています。
次に他の申請を選ぶと、今回は進捗が「申請中」になっていて
申請内容の変更もできますし、「申請の編集」ボタンが表示されて
ボタンを押せる編集可能状態になっています。（下図参照）
そのボタンはさっきと同じボタンで、
新規入力の時と既存データの編集の時でボタン名の表示が変わります。
それをそのボタンの「Text」属性で制御しています。
保存ボタンの「Text」属性
=If(
Form_申請フォーム２.Mode = FormMode.New,
”新規申請提出”,
”申請の編集”
)
上の式で、画面下のフォームコントロールの「Mode」属性で
そのフォームが新規入力モードか編集モードかが分かり、
それによってボタンの名前が変わる様にしています。
これで更にユーザーに優しいアプリになりますね。
「Visible」属性で使い易いアプリする仕方と活用事例
次にそのボタンの表示、非表示を制御する「Visible」属性を見てみます。
しかし、その説明をする前に前の画面の説明が必要です。
この「申請一覧画面」のギャラリー内を見ると、
各申請の進捗の情報があり、申請直後は「申請中」で、
その後決裁者の決裁によって「承認」や「却下」になるのです。
つまり、申請中の申請内容は変更可能で、
決裁が出た後の「承認」や「却下」になったら変更が不可で、
保存ボタンを非表示にする仕様なのです。
アプリの全ての画面はできる限りシンプルにするために、
アプリの各画面の各タイミングでその時に必要の無い部品を見えない様にするのに、
この「Visible」属性を有効活用して下さい。
ギャラリー内で選択する右矢印アイコンの「OnSelect」属性の式を見ましょう。
ギャラリー内、右矢印アイコンの「OnSelect」属性
=Navigate(申請編集画面２);
Set(記録行,ThisItem);
If(
ThisItem.Status=”申請中”,
EditForm(Form_申請フォーム２),
ViewForm(Form_申請フォーム２)
)
Set関数でグローバル変数「記録行」に、
選択されたレコードを丸ごと入れて、
進捗（Status列）が「申請中」なら
次の画面のフォームをEditForm関数で編集モードにし、
それ以外、つまり「承認」や「却下」なら
ViewForm関数で閲覧のみモードにしています。
「DisplayMode」属性と「Visible」属性の働きを検証する。
下記がギャラリーの上の「新規申請」ボタンの「OnSelect」属性の式です。
「新規申請」ボタンの「OnSelect」属性
=Navigate(申請編集画面２);
Set(記録行, Blank());
NewForm(Form_申請フォーム２);
「記録行」変数にブランクを入れて、
NewForm関数で次の画面のフォームを
新規入力モードにしています。
そのボタンをAltキーを押しながらクリックすると、
次の画面の保存ボタンは表示されます。
下記がその「Visible」属性です。
新規申請画面の保存ボタンの「Visible」属性
=Gallery_申請一覧１.Selected.Status=”申請中”
Or IsBlank(記録行)
まず変数「記録行」がブランクなのでこの式はtrueとなり、
このボタンが表示されます。
その「Text」属性で、下のフォームが新規入力モードなので
このボタンの名前が「新規申請提出」となるのです。
保存ボタンの「Text」属性
=If(
Form_申請フォーム２.Mode = FormMode.New,
”新規申請提出”,
”申請の編集”
)
また申請一覧画面に戻って、進捗が「承認」の過去の申請を選ぶと、
もう決裁がされているので編集ができない閲覧のみモードで、
保存ボタンも進捗（Status列）が「申請中」でないので非表示です。
保存ボタンの「Visible」属性
=Gallery_申請一覧１.Selected.Status=”申請中”
Or IsBlank(記録行)
次は「申請中」の申請を選びます。
ギャラリー内、右矢印アイコンの「OnSelect」属性
=Navigate(申請編集画面２);
Set(記録行,ThisItem);
If(
ThisItem.Status=”申請中”,
EditForm(Form_申請フォーム２),
ViewForm(Form_申請フォーム２)
)
上記の式により進捗（Status列）が「申請中」なので
EditForm関数により次の画面のフォームが編集モードになります。
保存ボタンの各種属性の式を再掲します。
保存ボタンの「Text」属性
=If(
Form_申請フォーム２.Mode = FormMode.New,
”新規申請提出”,
”申請の編集”
)
保存ボタンの「Visible」属性
=Gallery_申請一覧１.Selected.Status=”申請中”
Or IsBlank(記録行)
「Text」属性ではフォームの「Mode」で
新規入力モードではないので「申請の編集」が表示されているのです。
そして前の画面のギャラリーで選択されたレコードの進捗（Status列）が
「申請中」だったのでこのボタンが表示されているのです。
どうですか、この「DisplayMode」属性や「Visible」属性、
また「Text」属性もうまく使っていましたね。
それらを有効活用するとアプリのレベルをもう一段上げれますので、
ぜひ活用してみて下さい。
「こちらの記事も読まれてます｡」
