Power Apps でExcelのように行を直接編集できるUIを作りたいなら、コレクションとギャラリーを組み合わせた編集グリッドが最適解です。フォームを使わずにデータを画面内で即時編集できる、使い勝手のいいパターンです。
編集グリッドとは何か
編集グリッドとは、ギャラリーの各行にテキスト入力・ドロップダウンなどの入力コントロールを配置して、Excelのような行編集UIを実現したものです。通常のギャラリーは読み取り専用のリスト表示ですが、編集グリッドは行ごとに値を直接変更できます。
簡単にいえば、Excelのシートを Power Apps の画面上で再現するイメージです。業務の現場では、複数件のデータを一覧で確認しながら一括で修正したい場面がよくあります。フォームを1件ずつ開いて保存するよりも、表形式で直接編集できるほうが圧倒的に速いです。
ただし Power Apps の編集グリッドはデータソースを直接編集するのではなく、一時的なコレクションを中間バッファとして使うのが鉄則です。その理由を含めて、設計の考え方から解説していきます。
コレクションをベースにする理由
編集グリッドにコレクションを使う理由は2つあります。パフォーマンスと操作の自由度です。
SharePoint や Dataverse などのデータソースを直接ギャラリーの Items に渡して、各行を編集しようとすると、行を変更するたびにデータソースへのアクセスが発生します。行が多い場合や通信環境が悪い場合、操作のたびに待ち時間が生じます。コレクションを中間に挟むことで、編集中はローカルのメモリ上で操作が完結し、保存ボタンを押したときだけデータソースに書き込む設計になります。
操作の自由度という意味では、コレクションを使うと行の追加・削除・並び替えをメモリ上で自由に行えます。未保存の状態でキャンセルしたいときも、コレクションを元のデータで上書きすれば簡単に戻せます。コレクションの基本的な使い方はPower Apps のコレクション活用入門で解説しているので、あわせて確認しておくと理解が深まります。
ClearCollect でコレクションを初期化する
編集グリッドの起点は ClearCollect です。OnVisible や画面の読み込みタイミングで、データソースのデータをコレクションに読み込みます。
ClearCollect(colTasks, Tasks)これでデータソース Tasks の内容が colTasks というコレクションに複製されます。ギャラリーの Items には colTasks を設定します。
列の型を定義するコツ
コレクションの列型は最初のレコードで決まります。ところが実データで ClearCollect すると、数値列が文字列になってしまったり、日付型が崩れるケースがあります。これを防ぐため、空のレコードを先に ClearCollect してから本データを Collect する方法があります。
ClearCollect(colTasks,
{タスク名: "", 担当者: "", 優先度: 0, 完了: false}
);
Clear(colTasks);
Collect(colTasks, Tasks)空のレコードで列型を定義してから Clear し、実データを Collect することで、型の不整合を防げます。これは地味ですが、後から数式エラーに悩まされないための重要な一手間です。私もこれを知る前に数値列の比較でエラーが出て、原因究明に時間をかけた経験があります。
ギャラリーに入力コントロールを配置する
ギャラリーのテンプレートに TextInput・Dropdown・ラベルを配置して、編集グリッドを構成します。TextInput は編集可能な列、ラベルは読み取り専用で表示したい列に使います。
- ギャラリーを追加し、Items に colTasks を設定する
- テンプレート内に TextInput を追加する
- TextInput の Default プロパティに ThisItem.タスク名 を設定する
- 必要に応じて Dropdown を追加し、Items に選択肢リストを設定する
TextInput の Default 設定
TextInput の Default プロパティには ThisItem.列名 を設定します。これでギャラリーが表示されたとき、各行の現在の値がテキスト入力に自動的に入ります。
ThisItem.タスク名注意点として、Default は初期表示値を設定するだけで、ユーザーが入力した後は Default の値は反映されません。ギャラリーが再描画されたときに Default が適用されるため、コレクションを更新する前に TextInput のリセットが必要な場面があります。この挙動を最初から理解しておくと、保存ロジックの設計で迷いません。
Dropdown の Items と Selected.Value
ドロップダウンを使う列では、Items に選択肢のテーブルを渡します。たとえば優先度列に高・中・低の3択を出す場合はこうなります。
["高", "中", "低"]ドロップダウンの現在の選択値は Dropdown.Selected.Value で取得できます。後でコレクションにPatchするときに使うため、変数や直接の参照で値を渡せるよう設計しておきます。
Dropdown の Default プロパティには ThisItem.優先度 を設定して、現在のコレクションの値がドロップダウンに選択済みの状態で表示されるようにします。
DisplayMode で非編集時の見た目を整える
編集グリッドをずっと編集モードにしておくと、誤操作のリスクがあります。たとえば通常は読み取り専用にしておき、編集ボタンを押したときだけ入力を受け付けるという設計がよく使われます。
これを実現するには、TextInput の DisplayMode プロパティで制御します。
If(varEditMode, DisplayMode.Edit, DisplayMode.View)varEditMode が true のときだけ編集可能にする、という設計です。編集ボタンを押したときに UpdateContext({varEditMode: true}) で切り替えます。
DisplayMode.View と DisplayMode.Disabled の違いも押さえておきましょう。View は読み取り専用でテキストとして表示されます。Disabled はコントロールがグレーアウトされた非活性の見た目になります。UX的には View のほうが自然に見えるので、通常は View を使うことをおすすめします。
| DisplayMode | 見た目 | 用途 |
|---|---|---|
| Edit | 入力可能なテキストボックス | 編集中 |
| View | テキスト表示（枠なし） | 閲覧中（推奨） |
| Disabled | グレーアウトのテキストボックス | 無効状態を明示したいとき |
まとめ
編集グリッドの設計は、大きくまとめると次の3ステップです。
- ClearCollect でデータをコレクションに読み込む（型定義→Clear→Collect）
- ギャラリーの Items にコレクションを設定し、TextInput・Dropdown の Default を ThisItem で設定する
- DisplayMode で編集モードと閲覧モードを切り替える
この基盤ができたら、次のステップは行ごとの保存・新規行の追加・削除・全件保存の実装です。データの書き込みと IsNew フラグの使い方については、編集グリッドのデータ保存の記事で詳しく解説します。
Excelライクな編集UIは現場でも要望が多い機能です。設計パターンを覚えると、他のアプリでもすぐ応用できます。地道に一つずつ実装して、業務改善の幅を広げていきましょう。
ギャラリーの使い方を一覧でまとめた記事はこちらからご覧ください。
