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

この記事では、特殊なビジュアルと相互作用の要件を満たすために、Power Appsで編集可能なグリッド コントロールをカスタマイズする方法について説明します。 Power Apps グリッド コントロール拡張機能 API を使用して、カスタム セル レンダラーとエディターを使用してグリッド カスタマイザー コード コンポーネントを構築します。

編集可能なグリッド コントロールPower Appsカスタム セル レンダラーのスクリーンショット。

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

グリッド カスタマイザーは、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 または未定義を返す場合、グリッドはターゲット セルの内部レンダラーまたはエディターを使用します。

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

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

    [システムのカスタマイズ] を開くために使用する [設定とカスタマイズ] メニューのスクリーンショット。

  6. エンティティ ノードから、カスタマイザー コントロールが対象とするエンティティ (取引先企業など) を選択します。

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

    [システムのカスタマイズ] で選択したエンティティの [コントロール] タブのスクリーンショット。

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

    Power Apps グリッド コントロールの追加に使用されるコントロールの一覧のスクリーンショット。

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

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

    Customizer コントロール プロパティに割り当てられているグリッド カスタマイザー コード コンポーネントのスクリーンショット。

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

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

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

ベスト プラクティス

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

例

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

関連情報

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

  • Last updated on