編集可能グリッド コントロールのカスタマイズ

Power Apps グリッド コントロール は、Microsoft Fluent のモダン コントロールを使用して、グリッド セルが含む値の表示と編集を行う機能をユーザーに提供します。 そのまま使用できるビジュアルやユーザー操作の変更が必要な、特殊なニーズを持つシナリオが存在する場合があります。 これを容易にするために、Power Apps グリッド コントロールでは、グリッド インターフェイスをカスタマイズできる拡張 API を提供します。 こうした API を作成者が使用すると、グリッド カスタマイザー コントロール (コード コンポーネント) を実装して、カスタム セル レンダラーとエディター コンポーネントをグリッドに提供できます。

グリッド カスタマイザー コントロール

グリッド カスタマイザーは、Power Apps グリッド コントロール カスタマイザー インターフェイスを実装する PCF コントロールです。 このインターフェイスを使用すると、React 要素を定義して、グリッド セルが読み取り専用モード (セル レンダラー) または編集モード (セル エディター) である場合にレンダリングできます。 1 つの環境には複数のグリッド カスタマイザー コントロールが存在できますが、それぞれのグリッドに割り当てられるのは 1 つのグリッド カスタマイザー コントロールのみです。 変更が必要なグリッドごとに個別のカスタマイザー コントロールが必要だと判断したり、または同じカスタマイザー コントロールを複数のグリッドに対して再利用することを選択できます。

グリッド カスタマイザー コントロールの実装

グリッド カスタマイザー コントロールを実装する際は、まず コード コンポーネントの作成と構築 を行う手順に精通し、さらにテンプレート コントロールのアクセス許可を持つ必要があります。

このテンプレート コントロールは PowerApps サンプル の GitHub リポジトリに含まれています。 こちらのファイルにアクセスする際は、リポジトリの複製またはダウンロードが必要です: PowerApps-Samples/component-framework/resources/GridCustomizerControlTemplate

1. Visual Studio Code を使用して GridCustomizerControlTemplate フォルダーを開きます。

2. ターミナル ウィンドウで npm install を実行します。

3. カスタム セル レンダラーとエディターを作成します。

   カスタマイズ コードは カスタマイザー フォルダーにあります。

   • CellRendererOverrides.tsx はセル レンダラー カスタマイザーをデータ型ごとに含みます。
   • CellEditorOverrides.tsx はセル エディター カスタマイザーをデータ型ごとに含みます。

   これらのファイルを変更して React 要素を追加し、セルが読み取り専用 (セル レンダラー) または編集 (セル エディター) モードである場合にレンダリングします。

   それぞれのファイルは、オブジェクト マッピングの列データ型を、React 要素を返す関数にエクスポートし、その列タイプのセル内にレンダリングします。

   /**
    * Provide cell renderer overrides per column data type.
   */
    export interface CellRendererOverrides {
      [dataType: string]: (props: CellRendererProps, rendererParams: GetRendererParams)
      => React.ReactElement | null | undefined; 
   };
   
   /**
    * Provide cell editor overrides per column data type.
   */
    export interface CellEditorOverrides {
      [dataType: string]: (defaultProps: CellEditorProps, rendererParams: GetEditorParams)
      => React.ReactElement | null | undefined; 
   };
   

   注意

   関数が null または undefined を返す場合、グリッドはターゲット セルに内部レンダラー/エディターを使用します。

4. カスタム セル レンダラーとエディターを定義したら、グリッド カスタマイザー コントロールを パッケージ化 し、Power Apps 環境に インポート します。 または、pac pcf push コマンドを使用できます。

5. グリッド カスタマイザー コントロールを公開した後、設定 > カスタマイズ メニューから システムのカスタマイズ パネルを開きます。

   

6. エンティティ ノードから、カスタマイザー コントロールの対象であるエンティティ (例: アカウント) を選択します。

7. 右側のパネルから コントロール タブを選択します。

   

8. コントロール リストから Power Apps グリッド コントロール を追加します。

   

9. プロパティ パネルの カスタマイザー コントロール プロパティに、グリッド カスタマイザー コード コンポーネントの完全論理名を設定します。

   完全論理名 = {publisher prefix}_{namespace}.{control name}

   

10. このエンティティに対するカスタマイズを 保存して公開します。

11. カスタマイズしたエンティティのメイン グリッドを開き、カスタマイザーをテストします。

12. グリッドにグリッド カスタマイザー コントロールが必要なその他のエンティティに対して、手順 6 ～ 11 を繰り返します。

ベスト プラクティス

• セル レンダラーとエディターは、ユーザー インターフェイス コンポーネントです。 それらを使用して、グリッドのデータまたはメタデータを変更しないでください。
• カスタマイザ コントロールは、グリッドの全体的なパフォーマンスに影響を与えないように、軽量かつ高速である必要があります。
• 設計の一貫性を維持するには、Fluent デザインの原則に従い、カスタマイザーで Fluent コントロールを使用します。
• カスタム レンダラーまたはエディターにアクセスできることを確認してください。
• カスタマイザー関数は、グリッドがカスタマイズされた要素を取得するために複数回呼び出し、戻り値が一貫していることを期待するため、純粋である必要があります。
• このグリッドはいつでもカスタマイザー要素を破棄し、いつでも新しい要素を取得するために呼び出すことができます。 メモリ リークを防ぐために、非マウント時に内部状態を破棄してください。
• レンダラーを使用してグリッド内の値を上書きしないでください。新しい値はサーバーでフィルタリングや並べ替えに使用されないためです。

例

こちらからカスタマイズした編集可能グリッド コントロールのサンプルをご覧ください: カスタマイズした編集可能グリッド。

関連情報

Power Apps Component Framework の概要
初めてコード コンポーネントを作成する
Power Apps Component Framework の学習