コード コンポーネントは、ソリューション ファイルにパッケージ化してさまざまな環境にインポートできるソリューション コンポーネントです。 これらを使用して、強化されたアプリ エクスペリエンスを複数の環境に分散します。 ソリューションを使って拡張機能をパッケージ化し、配布する方法を解説します。
コード コンポーネントをソリューションに含め、Microsoft Dataverse 環境にソリューションをインポートすることができます。 コード コンポーネントを含むソリューションをインポートすると、システム管理者とシステム カスタマイザーは、既定のコンポーネントの代わりに使用する列、サブグリッド、ビュー、およびダッシュボード サブグリッドを構成できます。 これらのコードコンポーネント モデル駆動型とキャンバスアプリのを両方に追加できます。
コードコンポーネントは、3つの要素で構成されています:
注
Power Apps コンポーネント フレームワークを使用したコード コンポーネントの定義と実装は、モデル駆動型アプリとキャンバス アプリの両方で同じです。 両方のアプリの唯一の違いは、構成部分です。
マニフェスト
マニフェストは、コンポーネントを定義する ControlManifest.Input.xml メタデータ ファイルです。 これは、次の内容を記述した XML ドキュメントです。
- コンポーネントの名前です。
-
fieldまたはdatasetのいずれかで構成できるデータの種類。 - コンポーネントを追加するときにアプリケーションで構成できるプロパティ。
- コンポーネントが必要とするリソース ファイルの一覧。
ユーザーがコード コンポーネントを設定すると、マニフェスト ファイルのデータは利用可能なコンポーネントをフィルターして、コンテキストに有効なコンポーネントのみ構成に使用できるようにします。 コンポーネントのマニフェスト ファイルで定義されているプロパティは、コンポーネントを構成するユーザーが値を指定できるように、構成列としてレンダリングされます。 これらのプロパティ値は、実行時にコンポーネントで利用可能になります。 詳細については、「 マニフェスト スキーマ リファレンス」を参照してください。
コンポーネントの実装
TypeScript を使用してコード コンポーネントを実装します。 各コード コンポーネントには、コード コンポーネント インターフェイスで説明されているメソッドを実装するオブジェクトが含まれている必要があります。
Power Platform CLI は、これらのメソッドのスタブ実装を含むindex.ts ファイルを自動生成します。
pac pcf init コマンドを使用して、メイン スタブ メソッドを含むこのファイルを生成します。
オブジェクトは次のメソッドを実装します:
- init (必須)
- updateView (必須)
- getOutputs (オプション)
- 削除（必須）
これらのメソッドはコード コンポーネントのライフサイクルを制御します。
ページの読み込み
ページが読み込まれると、アプリケーションで動作するオブジェクトが必要になります。 マニフェスト ファイルからのデータを使用して、コードは呼び出しによってオブジェクトを取得します
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 コンポーネント フレームワーク API が含まれます。 たとえば、 context.parameters.<"property name from manifest"> を使用して入力プロパティにアクセスします。 |
| 出力の変更を通知 | コード コンポーネントに非同期に取得可能な新しい出力があるとフレームワークに警告します。 |
| 状態 | コンポーネントが setControlState メソッドを使用して以前に明示的に格納した場合に、現在のセッションの前のページ 読み込みからのコンポーネント データを格納します。 |
| コンテナ | 開発者とアプリ メーカーが、コンポーネントを定義する UI の HTML 要素を追加することができるHTML div 要素。 |
ユーザーがデータを変更する
ユーザーがコンポーネントを操作してデータを変更する場合、コンポーネントは init メソッドの notifyOutputChanged パラメーターとして渡されたをメソッド呼び出す必要があります。 このメソッドを使用すると、 プラットフォームは getOutputs メソッドを呼び出して応答します。
getOutputs メソッドは、ユーザーが行った変更を含む値を返します。
field コンポーネントの場合、通常、この値はコンポーネントの新しい値です。
アプリがデータを変更する
プラットフォームがデータを変更すると、コンポーネントの updateView メソッドが呼び出され、新しいコンテキスト オブジェクトがパラメーターとして渡されます。 コンポーネントに表示される値を更新するには、このメソッドを実装します。
ページを閉じる
ユーザーがページから離れると、コード コンポーネントはスコープを失い、そのページでオブジェクトに割り当てられているすべてのメモリをクリアします。 ただし、一部のメソッドは、ブラウザーの実装メカニズムに基づいてメモリを維持して消費する場合があります。 通常、これらのメソッドはイベント ハンドラーです。 ユーザーがこの情報を格納する場合は、同じセッション内で次回情報を使用できるように 、setControlState メソッドを実装する必要があります。
開発者は、ページが閉じたときに呼び出される destroy メソッドを実装して、イベントハンドラなどのクリーンアップコードを削除する必要があります。
リソース
マニフェスト ファイルのリソース ノードは、コンポーネントが視覚化を実装するために必要なリソースを参照します。 各コード コンポーネントには視覚化を構築するためのリソース ファイルが必要です。 ツールによって、code リソースとしてindex.ts ファイルが生成されます。 少なくとも 1 つのコード リソースが必要です。
マニフェストに追加のリソース ファイルを定義して、次の内容を含めます。
- CSS ファイル
- 画像の Web リソース
- ローカライズ用の resx Web リソース
詳細については次を参照してください: リソースの要素