物件輸出元件

[本主題是發行前版本文件，並可能在未來變更。]

此範例元件示範如何使用物件類型輸出內容。 此元件會透過屬性產生靜態物件和輸出，然後可以在畫布應用程式中或透過模型表單中的用戶端 API 存取該物件。

適用於

模型導向應用程式和畫布應用程式

先決條件

熟悉 創建代碼組件。

Code

您可以在這裡找到完整的程式碼範例： PowerApps-Samples/component-framework/ObjectOutputControl/。

資訊清單包含名為 的 Data 物件類型屬性，以及名為 DataSchema 的隱藏屬性。 DataSchema 屬性僅適用於 Canvas 應用程式，並由平台用來取得輸出物件結構描述。 我們還需要在這兩個屬性之間建立屬性依賴關係。

<!-- A hidden property used by Canvas to get the output object schema -->
<property name="DataSchema"
   display-name-key="DataSchema"
   description-key="DataSchema"
   of-type="SingleLine.Text"
   usage="input"
   hidden="true" />
<!-- The object type output property -->
<property name="Data"
   display-name-key="Data"
   description-key="Data"
   of-type="Object"
   usage="output"
   hidden="false"
   default-value="" />
<property-dependencies>
   <!-- Define the dependency between schema and the object type property -->
   <property-dependency input="DataSchema"
      output="Data"
      required-for="schema" />
</property-dependencies>

在index.ts檔案中，我們需要新增 getOutputSchema 方法來提供輸出物件模式。 將控制項新增至 Canvas 應用程式時，平台會在控制項初始化之前呼叫此方法，以接收輸出物件 （） 架構。

public async getOutputSchema(context: ComponentFramework.Context<IInputs>): Promise<Record<string, unknown>> {
   return Promise.resolve({
      Data: StaticDataSchema
   });
}

更新 getOutput 方法以傳回輸出屬性的值。

public getOutputs(): IOutputs {
   return {
      Data: this._staticData
   };
}

當按下 [載入資料] 按鈕時，會呼叫方法onLoadData，將資料載入輸出物件，並通知平台輸出變更。 這會在 Canvas 應用程式中觸發控制項的 onChange 行為，或用戶端 API 的 OnOutputChange 事件。

private onLoadData = async () => {
   this._staticData = StaticData;
   this._staticData.loadCounter = (this._staticData.loadCounter || 0) + 1;
   this.notifyOutputChanged();
}

相關文章

onOutputChange 事件
StandardControl.getOutputSchema
ReactControl.getOutputSchema
StandardControl.getOutputs
ReactControl.getOutputs