フィードバック

チュートリアル: モデル駆動型アプリのデータセットコンポーネントを作成する

  • [アーティクル]

このチュートリアルでは、データセットのコード コンポーネントを作成してデプロイし、Visual Studio Code を使用してモデル駆動型アプリ内で構成します。 このコード コンポーネントは、ページ区切りされたスクロール可能なデータセットのグリッドを表示し、ソートやフィルター処理が可能な列を提供します。 また、インジケーターの列を構成することにより、特定の行を強調表示することもできます。 データセットのコード コンポーネントは、テーブルのメイン グリッド、ビュー、サブグリッドにリンクすることができます。

これらの要件にに加えて、コード コンポーネントがベストプラクティスのガイダンスに従っていることも確認する必要があります。

  1. Microsoft Fluent UI を使用する
  2. 設計時と実行時の両方でコード コンポーネント ラベルをローカライズします
  3. サブグリッドにコードコンポーネントを設定する際に開発者が高さを指定した場合を除き、コンポーネントが応答性を持ち、利用可能な高さの 100% でレンダリングされる必要があります
  4. フル スクリーンモードのサポートに対応している必要があります

モデル駆動型グリッド サンプル。

上記から、次のことがわかります:

  1. グリッド上のレコードを選択すると、選択したレコードに関連するコマンドバー アクションが使用できます。
  2. 縦方向の高さが足りず、ページ全体を一画面に表示できない場合、レコードがスクロールされている間、ヘッダー行は所定の位置に留まります。
  3. コード コンポーネントは、全画面モードで表示できます。 これは、小さな画面フォーマットでは特に重要です。 フル スクリーンで開いた場合、コード コンポーネントは再初期化されず、allocatedWidth と allocatedHeight が更新され、updateView への呼び出しによってコンポーネントが再レンダリングされます。
  4. クイック検索検索ボックスをコード コンポーネントとともに使用して、レコードをフィルタリングできます。
  5. フッターには、レコード数、現在のページ、ページング コントロールが表示されます。

先に進む前に、前提条件、使用されている技術、コード・コンポーネントのビルドとデプロイの方法については、キャンバス アプリでデータセット コンポーネントを作成するチュートリアル を参照してください。

モデル駆動型アプリのサンプルコードをダウンロードしてインストールします

まず、サンプル コードを ModelDrivenGrid フォルダにダウンロードします。 コード コンポーネントをインストールするには、Visual Studio Code 内の pcfproj を含むフォルダを開き、ターミナルで次を使用します:

npm install

キャンバス アプリでデータセット コンポーネントを作成するチュートリアル で解説されている samples という接頭辞を持つソリューション発行者が作成されていることを確認してください。 また、pac auth を使って Microsoft Dataverse に対して認証していることを確認してください。

ターミナルで、以下を使用します:

pac pcf push -pp samples

これにより、コードコンポーネントが Dataverse にデプロイされ、構成できるようになります。 詳しくは、キャンバス アプリの作成データセット コンポーネント チュートリアルを参照してください。

モデル駆動型データセットとキャンバス アプリ データセットのサンプルの違い

この 2 つのサンプルは同じである可能性がありますが、モデル駆動型アプリのコード コンポーネントを構築する際に、キャンバス アプリと比較して考慮する必要がある、いくつかの注目すべき違いがあります。

Grid.tsx の違い

  1. モデル駆動型アプリで提供される列オブジェクトには、アプリ開発者が特定のビュー向けに設定した visualSizeFactor が与えられます。 これは、列のサイズの制御に使用され、DetailsList 列を作成する際にコードで使用されます。 コード コンポーネントに供給されるカラムとそのプロパティは、実行時に選択された特定のビューによって異なります。 これはキャンバス アプリとは異なります。 列は、画面に追加されたコード コンポーネントの特定のインスタンスに対して構成されます。

  2. モデル駆動のテーブルのメイン グリッドや関連レコード グリッドにコード部品を追加すると、allocatedHeight は常に -1 を返します。 コード コンポーネントは、利用可能なスペースの 100％ を埋めるために、CSS のスタイルを使用する必要があります。 サブグリッド上では、コード コンポーネントを構成する開発者は、拡張する高さを定義する必要があります。 詳細: trackContainerResize

  3. キャンバス アプリのグリッド サンプルとは異なり、現在のデータセットにレコードがない場合にオーバーレイ メッセージが追加されます。 これは、キャンバス アプリでは、UI の多くをホスティング アプリに任せることが推奨される一方、モデル駆動型アプリでは、データセットのコード コンポーネントを自己完結させる必要があるためです。

  4. キャンバス アプリとは異なり、paging.totalResultCount は現在のデータセットのレコード総数を表示するために使用されます。 この値が -1 であれば、現在のデータセットに 5,000 以上のデータがあることを意味します。

  5. レコードを含まないデータセットをソートする場合、その後の updateView の呼び出しには、キャンバス アプリの場合と同様に dataset が含まれません。 isLoading フラグは新しいデータを受信すると updateView でクリアされるため、空のデータセットをソートする際には、サンプルで isLoading コンポーネントの状態を設定してはいけません。

index.tsx の違い

  1. 最初の updateView への呼び出しでは、モデル駆動型のアプリで updatedProperties のデータセットは含まれません。 このため、グリッドを更新するタイミングを検出する条件を追加する必要があります。

    const initialLoad = !this.sortedRecordsIds && dataset.sortedRecordIds;

  2. コード コンポーネントがフォームのサブグリッドに追加されたときにメーカーが設定する新しい入力プロパティ SubGridHeight があるため、この値が定義されていて、フルスクリーンモードでないときには、高さにこの値を使用するように追加のチェックをします。

    if (!this.isFullScreen && context.parameters.SubGridHeight.raw) {
    allocatedHeight = context.parameters.SubGridHeight.raw;
}

ControlManifest.Input.xml の違い

  1. FilteredRecordCount 出力プロパティは必要ないため (コード コンポーネントに内部的に「No Records」メッセージを表示している)、削除します。 そのため、レコード数が変わったときに getOutputs の中の値を返したり、notifyOutputChanged を呼び出したりする必要はありません。
  2. プロパティ セット HighlightIndicator は、データセットの statuscode 列にバインドされているため、タイプ OptionSet として定義され、行の強調表示を制御するために使用されています。
  3. CSS ファイルをコード コンポーネントに追加します。 これは、モデル駆動型アプリのビュー セレクタやその他のポップアップ コンポーネントの上に Fluent UI の StickyHeader が表示されるようにするための回避策です。

メイングリッドにコード コンポーネントを設定する

モデル駆動型アプリ内の連絡先テーブルに表示されるコード コンポーネントを設定する:

  1. クラシック ソリューション エディターで 取引先担当者 テーブルを開きます。

  2. コントロール タブ に移動し、コントロールの追加 を選択します。

  3. リストから モデル駆動グリッド コード コンポーネントを選択し、追加 を選択します。

  4. プロパティ を次のように設定します:

    • ハイライト インジケータ フィールド - これは ControlManifest.Input.xml の property-set に対応しており、行の強調表示の際にどの列と比較するかを示すために使用されます。 これを列 statuscode に設定します。
    • ハイライト値 - これは、行の強調表示を制御する目的で、statuscode と比較する値です。 2 に設定すると、非アクティブ になります。
    • ハイライト カラー - これは、statuscode が 非アクティブ になっている場合に、行に設定される色です。 ハイライトに選択する色を設定します (例: #FDE7E9 明るい赤など)。

    テーブルの構成。

  5. また、Web、Phone、Tablet の既定として表示するコード コンポーネントを設定するには、対応するラジオ ボタンを選択します。

  6. 保存 して 公開。

  7. モデル駆動型アプリの 取引先担当者 テーブル グリッドには、コマンドバー メニューの 表示形式 に モデル駆動型グリッド が表示されます。

    注意

    現時点では、新しいソリューション エクスプローラー エクスペリエンスは、コード コンポーネントの設定に対応していないため、モデル駆動型アプリ内でコード コンポーネントを設定するには、従来のソリューション エディターを使用する必要があります。

特定のビューでコード コンポーネントを構成する

また、特定のビューに常にコード コンポーネントを使用して、選択された際にレコードを表示するように設定することもできます。

  1. クラシック ソリューション エディターで 取引先担当者 テーブルを開きます。
  2. ビュー に移動し、既存のビューを開くか、新しいビューを作成します。
  3. 右側のメニューから カスタム コントロール を選択します。
  4. コントロールの追加 を選択します。
  5. モデル駆動グリッド を選択し、追加 を選択します。
  6. 前述のようにプロパティを設定し、サブグリッドの高さは以前と同じように空白値のままにします。
  7. OK を選択してから、保存して閉じる を選択します。
  8. 公開 を選択します。

モデル駆動型アプリのサブグリッド。

サブグリッドからコード コンポーネントを構成する

コード コンポーネントは、フォームの特定のサブグリッドで構成できます。 取引先担当者サブグリッドの取引先企業フォームにコード コンポーネントを追加します。

  1. クラシック フォーム エディターで 取引先企業 を開きます。

  2. 取引先担当者 サブグリッドを選択し、プロパティの変更 を選択します。

  3. コントロール タブを選択します。

  4. コントロールの追加 を選択し、モデル駆動型グリッド コード コンポーネントを選択します。

  5. サブグリッドの高さ を 230 にする以外は、前と同じプロパティを追加します。

  6. モデル駆動型グリッド を既定として使用することを示すために、各フォームファクター (Web/Phone/Tablet) のラジオボタンを選択します。 異なるフォーム ファクターごとに異なる高さを使用する場合は、同じコントロールを複数回、異なる構成で追加することができます。

    注意

    モデル駆動型アプリのフォームでは、コード コンポーネントのコンテナの高さが行スパンに応じて制限されますが、これはフォーム ファクタが大きい場合に限られます。 小さなフォーム ファクターに制約される必要はなく、特定の高さを提供する必要があります。 これが入力プロパティ サブグリッドの高さ の目的です。

    サブグリッドのプロパティ。

サブグリッドに設定すると、以下のようになります:

モデル駆動型アプリのサブグリッド。

キャンバス アプリの作成データセット コンポーネント チュートリアル
Microsoft Power Platform によるアプリケーション ライフサイクル管理 (ALM)
Power Apps Component Framework API の参照
最初のコンポーネントを作成する
コード コンポーネントのデバッグ

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。