UI/UX設計

本当に送信しますか？Power Appsで入力内容のプレビューと確認ダイアログを作る方法

本当に送信しますか？Power Appsで入力内容のプレビューと確認ダイアログを作る方法

送信ボタンをタップした瞬間、画面が切り替わって「あ、間違えた」——そんな経験はありませんか。Power Appsは一度Patchで保存してしまうと簡単に取り消せません。だからこそ、送信前に確認ダイアログを挟む設計が重要です。

なぜ確認ダイアログが必要なのか

スマートフォンで使うアプリであれば、タッチ操作のミスは日常茶飯事です。フォームに5〜6項目入力して、最後に送信ボタンを押した瞬間に「あ、担当者を間違えた」と気づく。そのまま登録されてしまうと、後から上司に「この件誰が対応してるの？」と聞かれる羽目になります。

私が現場でアプリを使ってもらい始めた頃、一番多かった問い合わせが「間違えて登録してしまった、消してほしい」でした。SharePointリストから手動で削除する作業が積み重なると、それだけで1日数十分が消えていきます。確認ダイアログひとつで、その手間が丸ごとなくなります。

また、申請・承認フローと連動しているアプリなら、誤送信のコストはさらに大きくなります。一度承認フローが走り始めると、承認者に不要な通知が届いてしまいます。送信前に「本当によろしいですか？」と聞く一手間は、関わる全員の時間を守ることにつながります。

確認ダイアログの基本設計

Power Appsには標準の確認ダイアログ機能はありません。ですので、コンテナとラベルを組み合わせて自分で作る必要があります。仕組みはシンプルで、変数を使ってダイアログの表示・非表示を切り替えるだけです。

ダイアログの表示制御（変数の役割）

まず、ダイアログの表示状態を管理するための変数を用意します。名前は varShowConfirmDialog とします。ボタンを押したら変数を true にし、ダイアログ内のキャンセルを押したら false に戻す——これが基本の動きです。

送信ボタンの OnSelect プロパティに以下を設定します。

Set(varShowConfirmDialog, true)

これだけで送信処理は実行せず、まずダイアログを表示する動きになります。

ダイアログ本体の作り方

ダイアログはコンテナで作ります。画面上に半透明の黒いオーバーレイを被せ、その上に白いカードを浮かせるデザインが一般的です。実装手順は以下の通りです。

  1. 新しいコンテナを追加し、名前を con_ConfirmDialog とする
  2. Visible プロパティを varShowConfirmDialog に設定（変数が true のときだけ表示）
  3. コンテナの Width と Height を画面いっぱいに広げる（Parent.Width、Parent.Height）
  4. コンテナ内に半透明の背景レイヤー用コンテナ（Fill: RGBA(0,0,0,0.5)）を作る
  5. その上に白いカードコンテナを重ねる（Z-indexは自動で前面になる）

コンテナを使ったUIの基礎については、コンテナのドロップシャドウとカードUIの記事も参考になります。ドロップシャドウを加えると、ダイアログが画面から浮いているような立体感が出てより見やすくなります。

プレビュー表示の実装

確認ダイアログに入力内容をそのまま表示することで、ユーザーは送信前に内容を見直せます。実装は非常にシンプルで、ラベルの Text プロパティにフォームのコントロール参照を書くだけです。

テキスト入力の内容を表示する

例えば、フォームに氏名・件名・メモの3項目があるとします。ダイアログ内に配置したラベルの Text プロパティをそれぞれ以下のように設定します。

"氏名：" & TextInput_Name.Text
"件名：" & TextInput_Subject.Text
"メモ：" & TextInput_Memo.Text

これでダイアログを開いたときに入力内容がそのまま表示されます。ドロップダウンの場合は Dropdown.Selected.Value、日付ピッカーの場合は Text(DatePicker.SelectedDate, "YYYY/MM/DD") のように参照方法が変わるので、コントロールの種類に合わせて調整してください。

必須項目の未入力チェックと組み合わせる

確認ダイアログを出す前に、必須項目の入力チェックを済ませておくのが理想です。未入力のまま確認ダイアログが開いても意味がないので、送信ボタンの OnSelect に条件を追加します。

If(
  IsBlank(TextInput_Name.Text) || IsBlank(TextInput_Subject.Text),
  Notify("必須項目を入力してください", NotificationType.Error),
  Set(varShowConfirmDialog, true)
)

入力チェックの詳しい実装については、必須チェックとエラーメッセージの作り方の記事で解説しています。バリデーションの変数管理との組み合わせ方も参考になるので、あわせて読んでみてください。

確認・キャンセルボタンの動作設定

ダイアログ内には送信確定のボタンとキャンセルボタンの2つを置きます。それぞれの動作は明確に分けます。

確定ボタン（送信実行）

確定ボタンの OnSelect では、実際のデータ保存処理と変数のリセットをまとめて行います。

Patch(
  '申請リスト',
  Defaults('申請リスト'),
  {
    Title: TextInput_Name.Text,
    件名: TextInput_Subject.Text,
    メモ: TextInput_Memo.Text
  }
);
Set(varShowConfirmDialog, false);
Notify("送信が完了しました", NotificationType.Success);
Navigate(Screen_Complete)

保存後にダイアログを閉じて完了通知を出し、完了画面へ遷移する流れです。二重送信を防ぐために、Patch処理が完了するまでボタンを無効化する設計も有効です。その方法については連打防止とボタン制御の記事が参考になります。

キャンセルボタン（ダイアログを閉じる）

キャンセルボタンはシンプルです。変数を false にするだけでダイアログが消えます。

Set(varShowConfirmDialog, false)

大切なのはキャンセルしたらフォームの入力内容はそのまま残すことです。入力をリセットしてしまうと、ユーザーが確認画面を見てから内容を直そうとしたときに入力し直す手間が生じます。確認 → キャンセル → 修正 → 再確認の流れが自然に使えるよう設計しましょう。

応用：入力内容をテーブル形式で表示する

項目数が多い場合は、ラベルを縦に並べるよりもギャラリーでテーブル表示するほうがすっきり見えます。コレクションを使ってプレビュー用データを一時的に組み立てる方法が便利です。

送信ボタンの OnSelect で、確認ダイアログを開く直前にコレクションを作ります。

ClearCollect(
  colPreview,
  {項目: "氏名", 内容: TextInput_Name.Text},
  {項目: "件名", 内容: TextInput_Subject.Text},
  {項目: "メモ", 内容: TextInput_Memo.Text}
);
Set(varShowConfirmDialog, true)

あとはダイアログ内にギャラリーを配置し、Items を colPreview に設定するだけです。テンプレート内に「項目」ラベルと「内容」ラベルを並べると、入力内容が一覧で確認できる表になります。項目が増えても ClearCollect に1行追加するだけで対応できるので、後からのメンテナンスも楽です。

ダイアログ設計で気をつけること

確認ダイアログを実装するときに私がよくやってしまうのが、ダイアログコンテナのZ-order（前後の重なり順）の問題です。コンテナを後から追加したつもりが、ツリービューで見ると他のコントロールの下に入ってしまっていることがあります。ダイアログが他のコントロールに隠れて見えない場合は、ツリービューでダイアログのコンテナを一番下（画面上では最前面）に移動してください。

もうひとつ注意したいのが、ダイアログを閉じた後の変数リセットです。画面の OnVisible プロパティで Set(varShowConfirmDialog, false) を設定しておくと、別の画面から戻ってきたときに意図せずダイアログが開いている状態を防げます。変数の初期化は変数の種類と使い分けの記事で詳しく解説しているので、変数管理を整理したい方はあわせて確認してみてください。

まとめ

確認ダイアログの実装はそれほど複雑ではありません。変数1つ、コンテナ1つあれば基本的な仕組みは作れます。重要なのは設計の考え方で、間違えた後に直す仕組みより間違えないように確認させる仕組みのほうが、結果的に運用コストが下がります。

入力ミス防止の全体像については、Power Apps入力ミス防止ガイドにまとめています。バリデーション・フォーマット制御・UX設計の組み合わせで、ミスが起きにくいアプリを目指しましょう。市民開発はこういう地道な積み上げの繰り返しだと、現場で何度も実感しています。

この記事を書いた人
守屋 祐輔
守屋 祐輔
物流会社の非エンジニアサラリーマン。Power Platformを独学で学び、営業職からDX担当に職務変更し、社内ツールを作っています。個人事業のデザイン業務にもPower Platformを活用し、市民開発.comの運営者として、アプリ開発やDX推進の経験を発信中。

Xでフォローしよう