@@ -3,7 +3,7 @@ title: "Object Output Component Sample| Microsoft Docs"
3
3
description : " Learn how you can use the object outout APIs."
4
4
ms.author : noazarur
5
5
author : noazarur-microsoft
6
- ms.date : 11 /07/2022
6
+ ms.date : 06 /07/2023
7
7
ms.reviewer : jdaly
8
8
ms.topic : reference
9
9
ms.subservice : pcf
@@ -23,7 +23,7 @@ Model-driven apps and Canvas apps
23
23
24
24
## Prerequisites
25
25
26
- Familarity [ creating code components] ( ../implementing-controls-using-typescript.md ) .
26
+ Familiarity [ creating code components] ( ../implementing-controls-using-typescript.md ) .
27
27
28
28
## Code
29
29
@@ -34,56 +34,68 @@ We also need to create a property dependency between these two properties.
34
34
35
35
``` typescript
36
36
< ! -- A hidden property used by Canvas to get the output object schema -- >
37
- < property name = " DataSchema" display - name - key = " DataSchema" description - key = " DataSchema" of - type = " SingleLine.Text" usage = " input" hidden = " true" / >
38
- < ! -- The object type output property -->
39
- <property name = " Data" display -name -key = " Data" description -key = " Data" of -type = " Object" usage = " output" hidden = " false" default -value = " " />
40
-
41
- < property - dependencies >
42
- < ! -- Define the dependency between schema and the object type property -->
43
- <property -dependency input = " DataSchema" output = " Data" required -for = " schema" />
44
- </property -dependencies >
45
-
37
+ < property name = " DataSchema"
38
+ display - name - key = " DataSchema"
39
+ description - key = " DataSchema"
40
+ of - type = " SingleLine.Text"
41
+ usage = " input"
42
+ hidden = " true" / >
43
+ < ! -- The object type output property -->
44
+ <property name = " Data"
45
+ display -name -key = " Data"
46
+ description -key = " Data"
47
+ of -type = " Object"
48
+ usage = " output"
49
+ hidden = " false"
50
+ default -value = " " />
51
+ <property -dependencies >
52
+ <!-- Define the dependency between schema and the object type property -->
53
+ <property -dependency input = " DataSchema"
54
+ output = " Data"
55
+ required -for = " schema" />
56
+ </property -dependencies >
46
57
```
47
58
48
- In the index.ts file we need to add [ getOutputSchema] ( ../reference/control/getoutputschema.md ) method to provide the output object schema. When the control is added to a Canvas App, the platform will call to this method prior to control initialization to receive the output object(s) schema(s).
59
+ In the index .ts file we need to add [getOutputSchema ](../ reference / control / getoutputschema .md ) method to provide the output object schema . When the control is added to a Canvas App , the platform will call to this method prior to control initialization to receive the output object (s ) schema (s ).
49
60
50
61
` ` ` typescript
51
- public async getOutputSchema (context : ComponentFramework .Context < IInputs > ): Promise < Record < string , unknown >> {
52
- return Promise.resolve({
53
- Data : StaticDataSchema
54
- });
55
- }
56
-
62
+ public async getOutputSchema(context: ComponentFramework.Context<IInputs>): Promise<Record<string, unknown>> {
63
+ return Promise.resolve({
64
+ Data: StaticDataSchema
65
+ });
66
+ }
57
67
` ` `
58
68
59
69
Update the ` getOutput ` method to return value for the output property .
60
70
61
71
` ` ` typescript
62
- public getOutputs (): IOutputs {
63
- return {
64
- Data: this ._staticData
65
- };
66
- }
67
-
72
+ public getOutputs(): IOutputs {
73
+ return {
74
+ Data: this._staticData
75
+ };
76
+ }
68
77
` ` `
69
78
70
79
The ` onLoadData ` method will be called when the ** Load Data ** button is pressed to load the data to the output object and notify the platform about the output changes . This will trigger onChange behavior in the Canvas App for the control or [OnOutputChange ](../ ../ model - driven - apps / clientapi / reference / events / onoutputchange .md ) event for client APIs .
71
80
72
81
` ` ` typescript
73
- private onLoadData = async () => {
74
- this ._staticData = StaticData ;
75
- this ._staticData .loadCounter = (this ._staticData .loadCounter || 0 ) + 1 ;
76
- this .notifyOutputChanged ();
77
- }
78
-
82
+ private onLoadData = async () => {
83
+ this._staticData = StaticData;
84
+ this._staticData.loadCounter = (this._staticData.loadCounter || 0) + 1;
85
+ this.notifyOutputChanged();
86
+ }
79
87
` ` `
80
88
81
89
### Related topics
82
90
83
- [ onOutputChange Event] ( ../../model-driven-apps/clientapi/reference/events/onoutputchange.md ) <br />
84
- [ StandardControl.getOutputSchema] ( ../reference/control/getoutputschema.md ) <br />
85
- [ ReactControl.getOutputSchema] ( ../reference/react-control/getoutputschema.md ) <br />
86
- [ StandardControl.getOutputs] ( ../reference/control/getoutputs.md ) <br />
91
+ [onOutputChange Event ](../ ../ model - driven - apps / clientapi / reference / events / onoutputchange .md )
92
+
93
+ [StandardControl .getOutputSchema ](../ reference / control / getoutputschema .md )
94
+
95
+ [ReactControl .getOutputSchema ](../ reference / react - control / getoutputschema .md )
96
+
97
+ [StandardControl .getOutputs ](../ reference / control / getoutputs .md )
98
+
87
99
[ReactControl .getOutputs ](../ reference / react - control / getOutputs .md )
88
100
89
101
[! INCLUDE [footer - include ](../ .. / ../ includes / footer - banner .md )]
0 commit comments