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

[アーティクル]
12/31/2024

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

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

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

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

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

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

Visual Studio Code を使用して GridCustomizerControlTemplate フォルダーを開きます。
ターミナルウィンドウで npm install を実行します。
カスタムセルレンダラーとエディターを作成します。

カスタマイズコードは カスタマイザー フォルダーにあります。
- 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 を返す場合、グリッドはターゲットセルに内部レンダラー/エディターを使用します。
カスタムセルレンダラーとエディターを定義したら、グリッドカスタマイザーコントロールを パッケージ化 し、Power Apps 環境に インポート します。または、pac pcf push コマンドを使用できます。
グリッドカスタマイザーコントロールを公開した後、設定 > カスタマイズ メニューから システムのカスタマイズ パネルを開きます。
エンティティノードから、カスタマイザーコントロールが対象とするエンティティ (取引先企業など) を選択します。
右側のパネルから コントロール タブを選択します。
コントロール リストから Power Apps グリッドコントロール を追加します。
プロパティ パネルの カスタマイザーコントロール プロパティに、グリッドカスタマイザーコードコンポーネントの完全論理名を設定します。

完全論理名 = {publisher prefix}_{namespace}.{control name}
このエンティティに対するカスタマイズを 保存して公開します。
カスタマイズしたエンティティのメイングリッドを開き、カスタマイザーをテストします。
グリッドにグリッドカスタマイザーコントロールが必要なその他のエンティティに対して、手順 6 ～ 11 を繰り返します。

ベストプラクティス

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

例

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

次の方法で共有

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

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

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

ベストプラクティス

例

関連情報

フィードバック

その他のリソース

次の方法で共有

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

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

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

ベスト プラクティス

例

関連情報

フィードバック

その他のリソース

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

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

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

ベストプラクティス