@@ -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,60 +34,64 @@ 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
- < ! -- A hidden property used by Canvas to get the output object schema -- >
52
- < property name = " DataSchema" display - name - key = " DataSchema" description - key = " DataSchema" of - type = " SingleLine.Text" usage = " input" hidden = " true" / >
53
- < ! -- The object type output property -->
54
- <property name = " Data" display -name -key = " Data" description -key = " Data" of -type = " Object" usage = " output" hidden = " false" default -value = " " />
55
-
56
- < property - dependencies >
57
- < ! -- Define the dependency between schema and the object type property -->
58
- <property -dependency input = " DataSchema" output = " Data" required -for = " schema" />
59
- </property -dependencies >
60
-
62
+ public async getOutputSchema(context: ComponentFramework.Context<IInputs>): Promise<Record<string, unknown>> {
63
+ return Promise.resolve({
64
+ Data: StaticDataSchema
65
+ });
66
+ }
61
67
` ` `
62
68
63
69
Update the ` getOutput ` method to return value for the output property .
64
70
65
71
` ` ` typescript
66
- public getOutputs (): IOutputs {
67
- return {
68
- Data: this ._staticData
69
- };
70
- }
71
-
72
+ public getOutputs(): IOutputs {
73
+ return {
74
+ Data: this._staticData
75
+ };
76
+ }
72
77
` ` `
73
78
74
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 .
75
80
76
81
` ` ` typescript
77
- private onLoadData = async () => {
78
- this ._staticData = StaticData ;
79
- this ._staticData .loadCounter = (this ._staticData .loadCounter || 0 ) + 1 ;
80
- this .notifyOutputChanged ();
81
- }
82
-
82
+ private onLoadData = async () => {
83
+ this._staticData = StaticData;
84
+ this._staticData.loadCounter = (this._staticData.loadCounter || 0) + 1;
85
+ this.notifyOutputChanged();
86
+ }
83
87
` ` `
84
88
85
89
### Related topics
86
90
87
- [ onOutputChange Event] ( ../../model-driven-apps/clientapi/reference/events/onoutputchange.md ) < br />
88
- [ StandardControl.getOutputSchema] ( ../reference/control/getoutputschema.md ) < br />
89
- [ ReactControl.getOutputSchema] ( ../reference/react-control/getoutputschema.md ) < br />
90
- [ StandardControl.getOutputs] ( ../reference/control/getoutputs.md ) < br />
91
- [ ReactControl.getOutputs] ( ../reference/react-control/getOutputs.md )
91
+ [onOutputChange Event ](../ ../ model - driven - apps / clientapi / reference / events / onoutputchange .md )
92
+ [StandardControl .getOutputSchema ](../ reference / control / getoutputschema .md )
93
+ [ReactControl .getOutputSchema ](../ reference / react - control / getoutputschema .md )
94
+ [StandardControl .getOutputs ](../ reference / control / getoutputs .md )
95
+ [ReactControl .getOutputs ](../ reference / react - control / getOutputs .md )
92
96
93
- [ !INCLUDE[ footer-include] ( ../../../includes/footer-banner.md )]
97
+ [! INCLUDE [footer - include ](../ .. / ../ includes / footer - banner .md )]
0 commit comments