コード コンポーネント

  • [アーティクル]

コード コンポーネントはソリューション コンポーネントの一種で、ソリューション ファイルに含めたり、異なる環境にインポートできます。 ソリューションを使って拡張機能をパッケージ化し、配布する方法を解説します。

コード コンポーネント。

コード コンポーネントをソリューションに含め、Microsoft Dataverse 環境にソリューションをインポートすることができます。 コード コンポーネントを含むソリューションがインポートされると、システム管理者とシステム カスタマイザーは、既定のコンポーネントの代わりに使用する列、サブグリッド、ビュー、およびダッシュボード サブグリッドを構成できます。 これらのコードコンポーネント モデル駆動型とキャンバスアプリのを両方に追加できます。

コードコンポーネントは、3つの要素で構成されています:

注意

Power Apps component framework を使用したコード コンポーネントの定義と実装は、モデル駆動型アプリとキャンバスアプリの両方で同じとなります。 両者の唯一の違いはその構成の部分です。

マニフェスト

マニフェストはコンポーネントを定義する ControlManifest.Input.xml メタデータ ファイルです。 それは次を記述する XML 文書です:

  • コンポーネントの名前です。
  • 設定可能なデータの種類で、field か dataset のいずれかです。
  • コンポーネントが追加されたときにアプリケーションで構成できる任意のプロパティ。
  • コンポーネントが必要とするリソース ファイルの一覧。

ユーザーがコード コンポーネントを設定すると、マニフェスト ファイルのデータは利用可能なコンポーネントをフィルターして、コンテキストに有効なコンポーネントのみ構成に使用できるようにします。 コンポーネントのマニフェスト ファイルで定義されたプロパティは、構成列としてレンダリングされ、コンポーネントを構成するユーザーが値を指定できるようになっています。 これらのプロパティ値は、実行時にコンポーネントで利用可能になります。 詳細については次を参照してください: マニフェスト スキーマの参照

コンポーネントの実装

コード コンポーネントは、TypeScript を使用して実装されます。 各コード コンポーネントには、コード コンポーネント インターフェイスで説明されているメソッドを実装するオブジェクトが含まれている必要があります。 Power Platform CLI は、これらのメソッドのスタブ実装を含む index.ts ファイルを自動生成します。 このファイルは、pac pcf init コマンドと主なスタブ メソッドを使用して自動生成されます。

オブジェクトは次のメソッドを実装します:

これらのメソッドはコード コンポーネントのライフサイクルを制御します。

ページの読み込み

ページを読み込む時に、アプリケーションは作業するオブジェクトを必要とします。 マニフェスト ファイルからのデータを使用して、コードは呼び出しによってオブジェクトを取得します

var obj =  new <"namespace on manifest">.<"constructor on manifest">();

マニフェストの名前空間とコンストラクターの値がそれぞれ SampleNameSpace と LinearInputComponent である場合、オブジェクトをインスタンス化するコードはこれになります:

var controlObj = new SampleNameSpace.LinearInputComponent();

ページの準備ができたら、一連のパラメーターとともに init メソッドを呼び出してコンポーネントを初期化します。

controlObj.init(context,notifyOutputChanged,state,container);
パラメーター 説明
コンテキスト コンポーネントの構成方法に関するすべての情報と、 Power Apps Component Framework API とともにコンポーネント内で使用できるすべてのパラメータを含みます。 たとえば、context.parameters.<"property name from manifest"> を入力プロパティへのアクセスに使用できます。
notifyOutputChanged コード コンポーネントに非同期に取得可能な新しい出力があるとフレームワークに警告します。
状態 コンポーネントがすでに setControlState メソッドを使用して、以前に明示的に保存した場合は、現在のセッションで以前読み込まれたページのコンポーネント データが含まれます。
コンテナ 開発者とアプリ メーカーが、コンポーネントを定義する UI の HTML 要素を追加することができるHTML div 要素。

ユーザーがデータを変更する

ユーザーがコンポーネントを操作してデータを変更する場合、コンポーネントは init メソッドの notifyOutputChanged パラメーターとして渡されたをメソッド呼び出す必要があります。 このメソッドを使用すると、プラットフォームは、 getOutputs メソッドを呼び出すことで応答します。 getOutputs メソッドは、ユーザーによって変更された値を返します。 field コンポーネントの場合、通常これはコンポーネントの新しい値になります。

アプリがデータを変更する

プラットフォームがデータを変更すると、コンポーネントの updateView メソッドを呼び出し、新しいコンテキスト オブジェクトをパラメータとして渡します。 このメソッドを実装し、コンポーネントに表示された値を更新する必要があります。

ページを閉じる

ユーザーがページから離れると、コードコンポーネントはスコープを失い、そのページでオブジェクトに割り当てられたすべてのメモリーが消去されます。 ただし、ブラウザーの実装メカニズムに基づく一部のメソッドはそのまま残り、メモリーを消費する可能性があります。 通常、これらはイベント ハンドラーです。 ユーザーがこの情報を保存する必要がある場合は、同じセッション内で次回、情報が渡されるように setControlState メソッドを実装する必要があります。

開発者は、ページが閉じたときに呼び出される destroy メソッドを実装して、イベントハンドラなどのクリーンアップコードを削除する必要があります。

リソース

マニフェスト ファイルのリソース ノードは、コンポーネントが視覚化を実装するために必要なリソースを参照します。 各コード コンポーネントには視覚化を構築するためのリソース ファイルが必要です。 ツールによって生成された index.ts ファイルは code リソースです。 少なくとも 1 つのコード リソースが必要です。

マニフェストに含める追加のリソース ファイルを定義できます。

  • CSS 件のファイル
  • イメージ Web リソース
  • ローカライズ用の resx Web リソース

詳細については次を参照してください: リソースの要素

コードコンポーネントを作成、構築する

注意

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

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