You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/implementing-controls-using-typescript.md
+78-33Lines changed: 78 additions & 33 deletions
Original file line number
Diff line number
Diff line change
@@ -76,10 +76,6 @@ To create a new project:
76
76
> [!NOTE]
77
77
> If you receive the error `The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program.`, make sure you have installed [node.js](https://nodejs.org/en/download/) (LTS version is recommended) and all other prerequisites.
78
78
79
-
1. After npm install, you will need to generate ManifestDesignTypes.d.ts file in this directory using the below command."
80
-
```
81
-
npm run refreshTypes
82
-
```
83
79
84
80
85
81
## Implementing manifest
@@ -98,56 +94,100 @@ Make changes to the predefined manifest file, as shown here:
98
94
-**control-type**: The code component type. Only *standard* types of code components are supported.
<!-- TODO: Add type-group, property, and resources elements here -->
106
+
</control>
107
+
</manifest>
108
+
```
109
+
110
+
1. Add the definition of a [type-group](manifest-schema-reference/type-group.md) element named `numbers` in the `control` element. This element specifies the component value and can contain whole, currency, floating point, or decimal values.
111
+
112
+
```XML
113
+
<type-groupname="numbers">
114
+
<type>Whole.None</type>
115
+
<type>Currency</type>
116
+
<type>FP</type>
117
+
<type>Decimal</type>
118
+
</type-group>
104
119
```
105
120
106
-
2. The [property](manifest-schema-reference/property.md) node defines the properties of the code component like defining the data type of the column. The property node is specified as the child element under the `control` element. Define the [property](manifest-schema-reference/property.md) node as shown here:
121
+
1. Add the [property](manifest-schema-reference/property.md) element within the `control` element. This element defines the properties of the code component like defining the data type of the column. Define the [property](manifest-schema-reference/property.md) node as shown here:
107
122
108
123
- **name**: Name of the property.
109
124
- **display-name-key**: Display name of the property that is displayed on the UI.
110
-
- **description-name-key**: Description of the property that is displayed on the UI.
111
-
- **of-type-group**: The [of-type-group](manifest-schema-reference/type-group.md) is used when you want to have more than two data type columns. Add the [of-type-group](manifest-schema-reference/type-group.md) element as a sibling to the `property` element in the manifest. The `of-type-group` specifies the component value and can contain whole, currency, floating point, or decimal values.
125
+
- **description-name-key**: Description of the property that is displayed on the UI.
126
+
- **of-type-group**: Use the `of-type-group` attribute when you want refer to the name of a specific type group. Here, we are referring to the `type-group` named `numbers` created in the previous step.
112
127
- **usage**: Has two properties, *bound* and *input*. Bound properties are bound only to the value of the column. Input properties are either bound to a column or allow a static value.
113
128
- **required**: Defines whether the property is required.
3. The [resources](manifest-schema-reference/resources.md) node defines the visualization of the code component. It contains all the resources that build the visualization and styling of the code component. The [code](manifest-schema-reference/code.md) is specified as a child element under the resources element. Define the [resources](manifest-schema-reference/resources.md) as shown here:
139
+
1. The [resources](manifest-schema-reference/resources.md) node defines the visualization of the code component. It contains all the resources that build the visualization and styling of the code component. The [code](manifest-schema-reference/code.md) is specified as a child element under the resources element. Define the [resources](manifest-schema-reference/resources.md) as shown here:
120
140
121
141
- **code**: Refers to the path where all the resource files are located.
122
142
123
143
```XML
124
144
<resources>
125
-
<codepath="index.ts"order="1" />
126
-
<csspath="css/LinearInputControl.css"order="1" />
145
+
<codepath="index.ts"
146
+
order="1" />
147
+
<csspath="css/LinearInputControl.css"
148
+
order="1" />
127
149
</resources>
128
150
```
129
-
The overall manifest file should look something like this:
151
+
152
+
The completed manifest file should look like this:
4. Save the changes to the `ControlManifest.Input.xml` file.
185
+
1. Save the changes to the `ControlManifest.Input.xml` file.
186
+
1. After making changes to the manifest, you will need to generate ManifestDesignTypes.d.ts file in this directory using the below command."
187
+
188
+
```
189
+
npm run refreshTypes
190
+
```
151
191
152
192
## Implementing component logic
153
193
@@ -341,7 +381,12 @@ npm start watch
341
381
342
382
Follow these steps to create and import a [solution](../../maker/data-platform/solutions-overview.md) file:
343
383
344
-
1. Create a new folder **Solutions** inside the **LinearInputControl** folder and navigate into the folder.
384
+
1. Create a new folder named **Solutions** inside the **LinearInputControl** folder and navigate into the folder.
385
+
386
+
```CLI
387
+
mkdir Solutions
388
+
cd Solutions
389
+
```
345
390
346
391
2. Create a new solution project in the **LinearInputControl** folder using the [pac solution init](/power-platform/developer/cli/reference/solution#pac-solution-init) command:
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/manifest-schema-reference/includes/type-table.md
+8-5Lines changed: 8 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -1,13 +1,13 @@
1
1
|Value |Description |
2
2
|--|--|
3
-
|Currency|Monetary values between -922,337,203,685,477 and 922,337,203,685,477 can be in this column. You can set a level of precision or choose to base the precision on a specific currency or a single standard precision used by the organization.|
3
+
|Currency|Monetary values between -922,337,203,685,477 and 922,337,203,685,477 can be in this column.|
4
4
|DateAndTime.DateAndTime|Displays date and time.|
5
5
|DateAndTime.DateOnly|Displays date only.|
6
-
|Decimal|Up to 10 decimal points of precision can be used for values between -100,000,000,000 and -100,000,000,000 can be in this column. You can specify the level of precision and the maximum and minimum values.|
6
+
|Decimal|Up to 10 decimal points of precision can be used for values between -100,000,000,000 and -100,000,000,000 can be in this column.|
7
7
|Enum|Enumerated data type.|
8
-
|FP|Up to 5 decimal points of precision can be used for values between -100,000,000,000 and -100,000,000,000 can be in this column. You can specify the level of precision and the maximum and minimum values. |
8
+
|FP|Up to 5 decimal points of precision can be used for values between -100,000,000,000 and -100,000,000,000 can be in this column.|
9
9
|Lookup.Simple|Allows for a single reference to a specific table. All custom lookups are this type.|
10
-
|Multiple|This column can contain up to 1,048,576 text characters. You can set the maximum length to be less than this. When you add this column to a form, you can specify the size of the column.|
10
+
|Multiple|This column can contain up to 1,048,576 text characters.|
11
11
|MultiSelectOptionSet|You can customize forms (main, quick create, and quick view) and email templates by adding choices columns. When you add choices column, you can specify multiple values that will be available for users to select. When users fill out the form they can select one, multiple, or all the values displayed in a drop-down list.|
12
12
|Object|Object data type. Can only be used with output properties. |
13
13
|OptionSet|This column provides a set of options. Each option has a number value and label. When added to a form, this column displays a control for users to select only one option. |
|SingleLine.TextArea|This format option can be used to display multiple lines of text. But with a limit of 4000 characters, the Multiple Lines of Text column is a better choice if large amounts of text are expected.|
18
18
|SingleLine.Ticker|This stores the string time in the format valid for Ticker. Out-of-the-box Unified Interface controls automatically make them clickable links.|
19
-
|SingleLine.___URL|The text expected to provides a hyperlink to open the page specified. Out-of-the-box Unified Interface controls automatically prepend “https://” to input values that does not begin with a valid protocol . Only HTTP, HTTPS, FTP , FTPS, OneNote and TEL protocols are expected in this column. |
19
+
|SingleLine.___URL|The text expected to provides a hyperlink to open the page specified. Out-of-the-box Unified Interface controls automatically prepend "https://" to input values that does not begin with a valid protocol . Only HTTP, HTTPS, FTP , FTPS, OneNote and TEL protocols are expected in this column. |
20
20
|TwoOptions|This column provides two options. Each option has a number value of 0 or 1 corresponding to a false or true value. Each option also has a label so that true or false values can be represented as "Yes" and "No", "Hot" and "Cold", "On" and "Off" or any pair of labels you want to display.|
21
21
|Whole.None|This option simply displays a number.|
22
22
@@ -38,3 +38,6 @@ Following `of-type` property values are not supported currently:
38
38
|Lookup.Regarding|Allows for a single reference to multiple tables. These lookups are found in the regarding column used in activities.|
39
39
|Status|A system column that has options that generally correspond to active and inactive status. Some system columns have additional options, but all custom columns have only Active and Inactive status options.|
40
40
|Status Reason|A system column that has options that provide additional detail about the Status column. Each option is associated with one of the available Status options. You can add and edit the options.|
41
+
42
+
> [!NOTE]
43
+
> At this time File columns are not supported. More information: [File columns](../../../../maker/data-platform/types-of-fields.md#file-columns)
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/tutorial-create-canvas-dataset-component.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -142,19 +142,19 @@ After the component is built, you'll see that:
142
142
When the code component uses React, there must be a single root component that's rendered within the `updateView` method. Inside the `CanvasGrid` folder, add a new TypeScript file named `Grid.tsx`, and add the following content:
143
143
144
144
```react
145
-
import { DetailsList } from '@fluentui/react/lib/components/DetailsList/DetailsList';
145
+
import { DetailsList } from '@fluentui/react/lib/DetailsList';
146
146
import {
147
147
ConstrainMode,
148
148
DetailsListLayoutMode,
149
149
IColumn,
150
150
IDetailsHeaderProps,
151
-
} from '@fluentui/react/lib/components/DetailsList/DetailsList.types';
152
-
import { Overlay } from '@fluentui/react/lib/components/Overlay/Overlay';
153
-
import { ScrollablePane } from '@fluentui/react/lib/components/ScrollablePane/ScrollablePane';
154
-
import { ScrollbarVisibility } from '@fluentui/react/lib/components/ScrollablePane/ScrollablePane.types';
155
-
import { Stack } from '@fluentui/react/lib/components/Stack/Stack';
156
-
import { Sticky } from '@fluentui/react/lib/components/Sticky/Sticky';
157
-
import { StickyPositionType } from '@fluentui/react/lib/components/Sticky/Sticky.types';
151
+
} from '@fluentui/react/lib/DetailsList';
152
+
import { Overlay } from '@fluentui/react/lib/Overlay';
153
+
import { ScrollablePane } from '@fluentui/react/lib/ScrollablePane';
154
+
import { ScrollbarVisibility } from '@fluentui/react/lib/ScrollablePane';
155
+
import { Stack } from '@fluentui/react/lib/Stack';
156
+
import { Sticky } from '@fluentui/react/lib/Sticky';
157
+
import { StickyPositionType } from '@fluentui/react/lib/Sticky';
158
158
import { IObjectWithKey } from '@fluentui/react/lib/Selection';
159
159
import { IRenderFunction } from '@fluentui/react/lib/Utilities';
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/tutorial-create-model-driven-field-component.md
+43-16Lines changed: 43 additions & 16 deletions
Original file line number
Diff line number
Diff line change
@@ -3,14 +3,14 @@ title: "Create a model-driven app field component in Microsoft Dataverse | Micro
3
3
description: "In this tutorial, learn how to create a model-driven app field component, and deploy, configure, and test the component on a form using Visual Studio Code."
4
4
ms.author: noazarur
5
5
author: noazarur-microsoft
6
-
manager: lwelicki
7
-
ms.date: 05/27/2022
6
+
ms.date: 12/21/2022
8
7
ms.reviewer: jdaly
9
8
ms.topic: tutorial
10
9
ms.subservice: pcf
11
10
contributors:
12
11
- JimDaly
13
12
- v-scottdurow
13
+
- kaushikkaul
14
14
---
15
15
16
16
@@ -30,7 +30,7 @@ In addition to these, you'll also ensure the code component follows best practic
30
30
31
31
Before you start, make sure you've installed all the [prerequisite components](implementing-controls-using-typescript.md#prerequisites).
32
32
33
-
## Code
33
+
## Code
34
34
35
35
You can download the complete sample from [here](https://github.com/microsoft/PowerApps-Samples/tree/master/component-framework/ChoicesPickerControl).
36
36
@@ -42,16 +42,16 @@ To create a new `pcfproj`:
42
42
43
43
1. Open Visual Studio Code and navigate to **File** > **Open Folder** and then select the `ChoicesPicker` folder created in the previous step. If you've added the Windows Explorer extensions during the installation of Visual Studio Code, you can also use the **Open with Code** context menu option inside the folder. You can also add any folder into Visual Studio Code using `code .` in the command prompt when the current directory is set to that ___location.
44
44
45
-
1. Inside the new Visual Studio Code PowerShell terminal (**Terminal** > **New Terminal**), use the following command to create a new code component project:
45
+
1. Inside the new Visual Studio Code PowerShell terminal (**Terminal** > **New Terminal**), use the [pac pcf init](/power-platform/developer/cli/reference/pcf#pac-pcf-init) command to create a new code component project:
46
46
47
47
```CLI
48
-
pac pcf init --namespace SampleNamespace --name ChoicesPicker --template field
48
+
pac pcf init --namespace SampleNamespace --name ChoicesPicker --template field --run-npm-install
49
49
```
50
50
51
51
or using the short form:
52
52
53
53
```CLI
54
-
pac pcf init -ns SampleNamespace -n ChoicesPicker -t field
54
+
pac pcf init -ns SampleNamespace -n ChoicesPicker -t field -npm
55
55
```
56
56
57
57
This adds a new `pcfproj` and related files to the current folder, including a `packages.json` that defines the required modules. The above command will also run `npm install` command for you to install the necessary modules.
@@ -95,8 +95,18 @@ The `ChoicesPicker\ControlManifest.Input.xml` file defines the metadata that des
95
95
Open the `ChoicesPicker\ControlManifest.Input.xml` and paste the following inside the control element (replacing the existing **`sampleProperty`**):
96
96
97
97
```xml
98
-
<propertyname="value"display-name-key="Value"description-key="Value of the Choices Control"of-type="OptionSet"usage="bound"required="true"/>
99
-
<propertyname="configuration"display-name-key="Icon Mapping"description-key="Configuration that maps the choice value to a fluent ui icon."of-type="Multiple"usage="input"required="true"/>
98
+
<propertyname="value"
99
+
display-name-key="Value"
100
+
description-key="Value of the Choices Control"
101
+
of-type="OptionSet"
102
+
usage="bound"
103
+
required="true"/>
104
+
<propertyname="configuration"
105
+
display-name-key="Icon Mapping"
106
+
description-key="Configuration that maps the choice value to a fluent ui icon."
107
+
of-type="Multiple"
108
+
usage="input"
109
+
required="true"/>
100
110
```
101
111
102
112
Save the changes and then use the following command to build the component:
@@ -671,14 +681,31 @@ If you want to support multiple languages, your code component can hold a resour
0 commit comments