[このトピックはプレリリース ドキュメントであり、変更されることがあります。]
Power Apps component framework を使用してカスタム コンポーネントを構築する場合の一般的な要件は、コントロール内で生成されたイベントに反応する機能です。 これらのイベントは、ユーザー 対話 によって、またはコードを介してプログラムによって呼び出すことができます。 たとえば、アプリケーションには、ユーザーが製品バンドルを構築できるコード コンポーネントを含めることができます。 このコンポーネントは、アプリケーションの別の領域で製品情報を表示するイベントを発生させることもできます。
コンポーネントのデータ フロー
コードコンポーネントの一般的なデータフローは、ホスティング アプリケーションから入力としてコントロールに流れ込むデータと、コントロールからホスティング フォームまたはページにスローする更新データです。 この図は、一般的な PCF コンポーネントのデータ フローの標準パターンを示しています。
コード コンポーネントからバインド済みフィールドへデータを更新することで、OnChange イベントがトリガーされます。 ほとんどのコンポーネント シナリオでは、これで十分であり、作成者は後続のアクションをトリガーするハンドラーを追加するだけです。 ただし、より複雑なコントロールでは、フィールド更新ではないイベントを発生させる必要がある場合があります。 イベント メカニズムを使用すると、コード コンポーネントは、個別のイベント ハンドラーを持つイベントを定義できます。
イベントの使用
PCFのイベントメカニズムは、JavaScriptの標準イベントモデルに基づいています。 コンポーネントは、マニフェスト ファイルでイベントを定義し、コードでこれらのイベントを発生させることができます。 ホスティング アプリケーションは、これらのイベントをリッスンし、それらに対応できます。
コンポーネントは、マニフェスト ファイルの イベント要素 を使用してイベントを定義します。 このデータにより、それぞれのホスティング アプリケーションはさまざまな方法でイベントに対応できます。
<property
name="sampleProperty"
display-name-key="Property_Display_Key"
description-key="Property_Desc_Key"
of-type="SingleLine.Text"
usage="bound"
required="true"
/>
<event
name="customEvent1"
display-name-key="customEvent1"
description-key="customEvent1"
/>
<event
name="customEvent2"
display-name-key="customEvent2"
description-key="customEvent2"
/>
キャンバス アプリは Power Fx 式を使用してイベントに反応します。
モデル駆動型アプリでは、addEventHandler メソッド を使用して、イベント ハンドラーをコンポーネントのカスタム イベントに関連付けます。
const controlName1 = "cr116_personid";
this.onLoad = function (executionContext) {
const formContext = executionContext.getFormContext();
const sampleControl1 = formContext.getControl(controlName1);
sampleControl1.addEventHandler("customEvent1", this.onSampleControl1CustomEvent1);
sampleControl1.addEventHandler("customEvent2", this.onSampleControl1CustomEvent2);
}
注意
これらのイベントは、アプリ内のコード コンポーネントのインスタンスごとに個別に発生します。
モデル駆動型アプリのイベントの定義
モデル駆動型アプリの場合、イベントと共にペイロードを渡すことができるため、より複雑なシナリオに対応できます。 たとえば、下の図では、コンポーネントはイベントでコールバック関数を渡し、スクリプト処理がコンポーネントにコールバックできるようにします。
this.onSampleControl1CustomEvent1 = function (params) {
//alert(`SampleControl1 Custom Event 1: ${params}`);
alert(`SampleControl1 Custom Event 1`);
}.bind(this);
this.onSampleControl2CustomEvent2 = function (params) {
alert(`SampleControl2 Custom Event 2: ${params.message}`);
// prevent the default action for the event
params.callBackFunction();
}
キャンバス アプリのイベントの定義
プロパティ ウィンドウにある PCF コントロールで Power Fx を使用してイベントを構成します。
イベントの呼び出し
イベントを呼び出す方法については、イベントを参照してください。