ギャラリーで選択したレコードをフォームに渡すとき、変数を使って連携すると新規作成・保存後の挙動が安定します。Gallery.Selected から varRecord に切り替えた前提で、新規ボタン・保存後の選択・プレースホルダーUIの実装パターンを一通り解説します。
Gallery.Selected の問題点と varRecord への基本的な置き換え方は、Gallery.Selected を使ってはいけない理由の記事で解説しています。この記事はその続きとして、フォームとの連携に特化した内容です。
変数でギャラリーとフォームをつなぐ設計の全体像
まず全体の設計を確認しておきます。ギャラリーとフォームを変数でつなぐ構成には、次の4つの状態を制御することが必要です。
- 選択状態：ギャラリーのどのレコードを見ているか（varRecord）
- フォームモード：表示・編集・新規のどの状態か（EditForm の Mode）
- フォームの Item：varRecord を参照していること
- プレースホルダー：レコード未選択のときにフォームエリアに何を表示するか
この4つをそれぞれ正しく設計するだけで、ユーザーが操作しても迷わないアプリになります。一つずつ実装していきましょう。
新規ボタンの設計
新規ボタンの OnSelect では3つのことをやります。フォームを新規モードにする、varRecord をリセットする、そしてハイライトを消すです。
NewForm(EditForm1);
UpdateContext({varRecord: Blank()})NewForm(EditForm1) でフォームを新規入力モードに切り替えます。UpdateContext({varRecord: Blank()}) で varRecord を空にすることで、ギャラリーのハイライトがすべて消えます。
フォームの Item は varRecord を参照しているので、varRecord が Blank になるとフォームも空になります。ギャラリーで何かを選択していた状態でも、新規ボタンを押せばきれいにリセットされます。これが Gallery.Selected を使っていたときには実現できなかった動きです。
保存後に新規レコードを選択状態にする
保存ボタンを押してフォームを送信した後、新しく作られたレコードを自動的に選択状態にしたい場面があります。Power Apps の EditForm には OnSuccess プロパティがあり、送信が成功したときに実行する処理を書けます。
UpdateContext({varRecord: EditForm1.LastSubmit});
ViewForm(EditForm1)EditForm1.LastSubmit は、直前に送信されたレコードそのものを返します。これを varRecord にセットすることで、保存が完了した直後に新しいレコードが varRecord に入り、ギャラリーのハイライトが新規レコードの行に移動します。ViewForm(EditForm1) でフォームを表示モードに戻すことも忘れないようにしましょう。
ここが Gallery.Selected との一番大きな違いです。Gallery.Selected は保存後のギャラリー再取得タイミングによって結果がブレますが、LastSubmit を varRecord にセットする方法は保存成功時に確実に動きます。体感では、この実装に変えてから保存後のフォームズレが完全になくなりました。
フォームの Item と Mode の設定
EditForm の設定を確認しておきます。
| プロパティ | 設定値 | 備考 |
|---|---|---|
| Item | varRecord | 選択レコードを参照 |
| DefaultMode | FormMode.View | 初期表示は読み取り専用 |
フォームコントロールの基本的な仕組みや EditForm・NewForm・DisplayForm の違いについては、フォームコントロールの仕組みと設定のポイントの記事も参考にしてください。
Item に varRecord を渡すだけで、ギャラリーの選択に関係なくフォームが安定して動くようになります。DefaultMode を FormMode.View にしておくと、選択したレコードをまず表示モードで見せられるので UX としても自然です。編集する場合は別途 EditForm を呼び出すか、編集ボタンを設置します。
プレースホルダーを表示する
アプリを開いたばかりや、何も選択していないときにフォームエリアが空白だと、ユーザーはそこに何か表示されるのか、故障しているのか判断できません。プレースホルダーUIを用意しておくだけで、操作の手がかりが増えてユーザーの迷いが減ります。
プレースホルダーの表示条件
フォームエリアの上にラベルやコンテナを置き、表示条件を次のように設定します。
IsBlank(varRecord) And EditForm1.Mode <> FormMode.NewvarRecord が空（何も選択していない）かつフォームが新規モードでないときだけ表示する、という条件です。新規入力中はプレースホルダーを出さずにフォームを前面に出したいので、FormMode.New を除外しています。
プレースホルダーのテキスト例
プレースホルダーに表示するメッセージは短くシンプルなものが効果的です。
- ← 左のリストから項目を選択してください
- 👆 上から確認したいタスクを選んでください
- 左のギャラリーから選択すると詳細が表示されます
絵文字や矢印アイコンを入れると、どこを操作すればいいか視覚的に伝わりやすくなります。個人的には、プレースホルダーにひと手間かけるだけで社内ユーザーの問い合わせが明らかに減ったので、これは省かずに入れておくことをおすすめします。
OnStart・OnVisible でデフォルトレコードを指定する
アプリを開いたときやスクリーンに遷移したときに、ギャラリーの先頭レコードを自動的に選択状態にするパターンもよく使います。
UpdateContext({varRecord: First(GalleryTasks.AllItems)})OnVisible にこの式を入れておくと、スクリーンを開くたびにギャラリーの先頭レコードが varRecord にセットされます。ユーザーが何もしなくても先頭のレコードが表示されている状態になるので、空白のフォームエリアを見せずに済みます。
OnStart と OnVisible の使い分けについては、OnStart と OnVisible どちらに書くべきかをあわせて読むと整理しやすいです。
まとめ
ギャラリーとフォームを varRecord でつなぐパターンを整理すると、次のように設計が固まります。
| 操作 | やること |
|---|---|
| 行をタップ | OnSelect で UpdateContext({varRecord: ThisItem}) |
| 新規ボタン | NewForm + UpdateContext({varRecord: Blank()}) |
| 保存後 | OnSuccess で varRecord を LastSubmit に + ViewForm |
| 未選択時 | IsBlank(varRecord) のプレースホルダーを表示 |
| 初期表示 | OnVisible で First() を varRecord にセット |
一度このパターンをマスターすると、どのアプリでも迷わず同じ設計で組めるようになります。個人的には、これを習得した後の開発速度が明らかに上がりました。積み重ねの力を実感できる部分ですので、ぜひ一度手を動かして試してみてください。
ギャラリーの使い方を一覧でまとめた記事はこちらからご覧ください。
