投稿日：2026/2/6
投稿者：関
最近、モデル駆動型のビューで編集可能な 『Power Apps グリッド コントロール』を使うようにしています。
パラメータを見ると下記赤枠のカスタムコントロールを入力できる項目がありましたので、何ができるか調査しながらPCFでカスタマイズしてみました。
Power Apps グリッド コントロールとは
モデル駆動型アプリにおいて、レコードを一覧表示・操作するための標準コントロールです。
従来の読み取り専用グリッドとは異なり、このグリッドでは一覧画面上で次のような操作が可能です。
- レコードの表示・選択
- インライン編集（セルを直接編集）
- スクロールしながらの大量データ表示
- サブグリッドの展開
- 並び替えやフィルター操作
※これにより、ユーザーはレコードを一件ずつフォームで開くことなく、一覧画面上で効率的にデータを確認・編集できるようになります。
※詳しくは下記のMicrosoft Learnにて確認してください。
Power Apps グリッド コントロール（Microsoft Learn）
標準グリッドの制約と課題
Power Apps グリッド コントロールは便利な機能を備えていますが、標準機能のままでは UI 表現にいくつかの制約があります。主に次のような点が課題になります。
- 列ごとの表示形式が限定的
- 条件に応じた色分けや装飾が難しい
- 進捗バーやトグルなど、視覚的な UI 表現ができない
- 業務に特化した独自レイアウトを実装できない
カスタム コントロール設定画面のポイント
Power Apps グリッド コントロールの設定画面を確認すると、カスタム コントロールを指定できる項目が用意されています。
設定可能点
- 列単位ではなく
- グリッド全体に対して PCF を割り当てる
※この点が通常のフィールド用 PCF との大きな違いで、一覧の描画ロジックそのものをカスタマイズできるようになります。今回はこちらの設定を利用して、このグリッドを PCF で置き換える形でカスタマイズを行いました。
実際に作成したカスタム Editable Grid の例
カスタム前
カスタム後
カスタムポイント
※ 標準グリッドではシンプルな一覧表示のみでしたが、PCF 適用後は視覚的に状態が分かる UI に変更しています。
技術的な仕組み
技術的には、PCF の Dataset 型コントロールを使用しています。
主なポイント
- PCF で Dataset を受け取り、行・列データを取得
- レコードの状態（値、変更有無など）を制御
- React コンポーネントで独自にテーブルを描画
- 編集内容は Dataset を通じて Power Apps 側に反映
※列単位の PCF と異なり、データセット全体を 1 つのコンポーネントで管理する点が特徴です。
これにより、グリッドの見た目や操作感を自由に設計できるようになります。
※詳しくは下記のMicrosoft Learnにて確認してください。
編集可能グリッド コントロールのカスタマイズ（Microsoft Learn）
カスタマイズされた編集可能グリッド（Microsoft Learn）
使ってみて分かったメリット・注意点
メリット
- グリッド UI の自由度が大きく向上する
- 視認性が高く、業務に即した一覧画面を作成できる
- 標準グリッドでは表現できない UI が実装可能
注意点
- 実装コストは比較的高い
- パフォーマンスを意識した実装が必要
- すべてのケースに適しているわけではない
※すべての画面で使うのではなく、効果が高い画面に限定して使うという判断が重要だと感じました。
特に、進捗管理やステータス確認を一覧画面で完結させたい業務に向いていると感じました。
最近のコメント