Power Apps Component Framework のアーキテクチャ
コード コンポーネントは、HTML、CSS、および TypeScript を使用して実装できます。 特定の UI フレームワークを使用しなければならないわけではありませんが、React と Fluent UI がよく使用されます。
コンポーネントの合成
次の図では、Power Apps コンポーネントの 3 つの主要な領域である、マニフェスト入力ファイル、その実装、コンポーネントに必要になる可能性がある追加のリソース ファイルを示しています。
マニフェストは、コンポーネントをホストしているアプリケーションで使用できるプロパティを識別するために使用します。 アプリの作成者がコード コンポーネントを使用すると、プロパティの値を静的に設定できます。 また、アプリケーションで利用可能なデータ列の 1 つに動的にバインドすることもできます。 プロパティを使用すると、アプリケーションとコンポーネントがデータをやり取りする際に、コンポーネントの実装についてアプリの側で理解する必要が無くなります。
コンポーネントを作成する場合、一貫した方法でアプリをホスティングし、コンポーネントと対話するためにインターフェイスを実装する必要があります。 コード コンポーネントは、StandardControl インターフェイスを実装することでこれを実現します。
export class FirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {}
Power Apps コンポーネントのライフ サイクル
コンポーネントを開発する場合、コンポーネントの要件に応じて、StandardControl インターフェイス メソッドのすべてまたは一部を次のテーブルに実装します。 これらのメソッドにより、ホスティング ランタイムはコード コンポーネントのライフ サイクルを管理できます。
| メソッド | 説明 |
|---|---|
| init | 必須。 このメソッドを使用して、コンポーネントのインスタンスを初期化します。 コンポーネントは、このメソッド内で、リモート サーバーの呼び出しやその他の初期化アクションを開始できます。 このメソッドではデータセットの値を初期化できないため、updateView メソッドを使用する必要があります。 |
| updateView | 必須。 このメソッドは、コンポーネントのプロパティ バッグ内の値が変更されたときに呼び出されます。 完了していない可能性がある init メソッドで、読み込みデータ要求を開始した場合、コードはこの状態を処理し、視覚的な読み込みインジケーターを提供する必要があります。 |
| getOutputs | 省略可能。 新しいデータを受信する前にフレームワークによって呼び出されます。 このメソッドは、コントロール内のバインドされたプロパティを動的に管理するときに使用します。 |
| destroy | 必須。 コンポーネントが DOM ツリーから削除されるときに呼び出されます。 destroy メソッドを使用して、クリーンアップや、コンポーネントが使用しているメモリを解放します。 たとえば、React を使用している場合、destroy メソッド内で ReactDOM.unmountComponentAtNode を使用します。 これにより、指定されたブラウザ セッション内でコード コンポーネントの読み込みとアンロードが行われることで、パフォーマンス上の問題を防ぐことができます。 |
次の図に示すように、これらのメソッドは、標準化されたライフ サイクル内のフレームワーク ランタイム プロセスを通じて呼び出されます。
図の一番上で、フレームワークはコンポーネントの init() 関数を呼び出します。 コンポーネントが対話型である場合は、notifyOutputChanged メソッドを呼び出して、コンポーネントの出力が変更されたことをホストに通知する必要もあります。
フレーム ワークランタイムは通知を受け取ると、getOutputs メソッドを呼び出して、コンポーネントのバインドされたすべてのプロパティの値を取得します。
次に、ランタイムが出力を検証するホストに通知します。 出力が有効な場合、ランタイムはコンポーネントに対して updateView メソッドを呼び出します。 何らかの理由で有効でない場合 (たとえば、ビジネス ルールによって新しい出力が無効と見なされた場合など)、ランタイムは updateView メソッドを呼び出して、エラー メッセージと共に古い値を渡します。 どちらの場合でも、コンポーネントはユーザー インターフェイスを更新し、必要に応じてエラー メッセージを表示できます。