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/add-custom-controls-to-a-field-or-entity.md
+13-13Lines changed: 13 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -14,21 +14,21 @@ ms.topic: "article"
14
14
15
15
# Add code components to a field or entity in model-driven apps
16
16
17
-
code components let you transform fields that traditionally contain text into visualizations. Similarly, you can use code components to transform datasets, such as a view, to display in a more visual rendering rather than a list of records. code components can appear as visualizations on forms, dashboards, views, and homepage grids.
17
+
Code components let you transform fields that traditionally contain text into visualizations. Similarly, you can use code components to transform datasets, such as a view, to display in a more visual rendering rather than a list of records. code components can appear as visualizations on forms, dashboards, views, and homepage grids.
18
18
19
19
20
20
> [!div class="mx-imgBorder"]
21
21
> 
22
22
23
-
## Add a custom component to a field
23
+
## Add a code component to a field
24
24
25
-
Following the steps in this procedure will change the default label and text box field of the **Budget Amount** field to the slider custom component on the Opportunity entity. You can use similar steps to replace an existing field with a custom component or configure a custom component for a custom field.
25
+
Following the steps in this procedure will change the default label and text box field of the **Budget Amount** field to the slider code component on the Opportunity entity. You can use similar steps to replace an existing field with a code component or configure a code component for a custom field.
26
26
27
27
1. Open solution explorer.
28
28
29
29
2. Expand **Entities**, expand the entity that you want, such as the **Opportunity** entity, select **Forms**, and then open a form such as the **Main** form.
30
30
31
-
3. In the form editor, double-click the field where you want to add a custom component, such as the **Budget Amount** field on the opportunity main form. Alternatively, you can create a custom field.
31
+
3. In the form editor, double-click the field where you want to add a code component, such as the **Budget Amount** field on the opportunity main form. Alternatively, you can create a custom field.
32
32
33
33
4. On the **Field Properties** page, select the **Controls** tab, and then select **Add Control**.
34
34
@@ -39,11 +39,11 @@ Following the steps in this procedure will change the default label and text box
39
39
40
40
6. Choose the client where you want the component to appear.
41
41
42
-
-**Web**. To make the custom component available from any web browser, select the Web option next to the component. Notice that setting the Web option includes rendering the component in web browsers on PCs, Macs, and mobile devices.
42
+
-**Web**. To make the code component available from any web browser, select the Web option next to the component. Notice that setting the Web option includes rendering the component in web browsers on PCs, Macs, and mobile devices.
43
43
44
-
-**Phone**. To make the custom component available on phones running Dynamics 365 for phones, select the Phone option next to the component.
44
+
-**Phone**. To make the code component available on phones running Dynamics 365 for phones, select the Phone option next to the component.
45
45
46
-
-**Tablet**. To make the custom component available on tablet devices running Dynamics 365 for tablets, select the Tablet option next to the component.
46
+
-**Tablet**. To make the code component available on tablet devices running Dynamics 365 for tablets, select the Tablet option next to the component.
47
47
48
48
> [!div class="mx-imgBorder"]
49
49
> 
@@ -63,28 +63,28 @@ Following the steps in this procedure will change the default label and text box
63
63
64
64
-**Step**. This represents the unit to increment or decrement when adding to or subtracting from the current value. For example, for budget amount you can select 100 dollar increments\decrements.
65
65
66
-
-**Hide Default Control**. Selecting this option hides the component so neither the component or the data is displayed in any of the clients that don't support the custom component.
66
+
-**Hide Default Control**. Selecting this option hides the component so neither the component or the data is displayed in any of the clients that don't support the code component.
67
67
68
68
8. Select **OK**, to close the Field Properties page.
69
69
70
70
9. To activate the customization, on the entity form select **Save**, and then select **Publish**.
71
71
72
72
10. Select **Save and Close** to close the form editor.
73
73
74
-
## Add custom component to an entity
74
+
## Add code component to an entity
75
75
76
-
To add a custom component like data-set component or simple table component to a grid or view, follow the steps below:
76
+
To add a code component like data-set component or simple table component to a grid or view, follow the steps below:
77
77
78
78
- Navigate to **Settings > Customizations** and click on **Customize the System**.
79
-
- Click on the arrow next to **Entities** tab a select the entity you want to add the custom component.
79
+
- Click on the arrow next to **Entities** tab a select the entity you want to add the code component.
80
80
- Click on the **Controls** tab and click on **Add a control**.
81
81
- On the Add Control page, select the component that you want, such as Simple Table component and then select **Add**.
82
82
- Choose the client where you want the component to appear.
83
83
84
84
85
-
## See the custom component in action
85
+
## See the code component in action
86
86
87
-
Open a record that includes the field with the custom component, such as the Opportunity form from the previous example, and view how the field is changed. The field is now rendered as a slider component instead of the text field.
87
+
Open a record that includes the field with the code component, such as the Opportunity form from the previous example, and view how the field is changed. The field is now rendered as a slider component instead of the text field.
88
88
89
89
> [!div class="mx-imgBorder"]
90
90
> 
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/component-framework-for-canvas-apps.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -23,7 +23,7 @@ PowerApps component framework enables app makers to create code components to us
23
23
In this experimental preview, PowerApps component framework enables app makers to create code components, debug, import and add them to canvas apps using the PowerApps CLI tooling. Only certain APIs are supported in this experimental preview. It is recommened to check each individual API whether it supports canvas apps or not.
24
24
25
25
> [!WARNING]
26
-
> Code components contain code that may not be generated by Microsoft and can potentially access security tokens and data. When adding code components to an app, make sure that the custom component solutions are from trusted source.
26
+
> Code components contain code that may not be generated by Microsoft and can potentially access security tokens and data. When adding code components to an app, make sure that the code component solutions are from trusted source.
27
27
28
28
## Prerequisites
29
29
@@ -73,7 +73,7 @@ To add code components to a canvas app:
73
73
> To add code components to a field or an entity for model-driven apps, see [Add code components to model-driven apps](add-custom-controls-to-a-field-or-entity.md)
74
74
75
75
1. Navigate to PowerApps Studio.
76
-
2. Create a new canvas app or edit an existing app that you want to add the custom component to.
76
+
2. Create a new canvas app or edit an existing app that you want to add the code component to.
77
77
78
78
> [!IMPORTANT]
79
79
> Make sure the code components solution zip file is already [imported](https://docs.microsoft.com/en-us/powerapps/maker/common-data-service/import-update-export-solutions) into Common Data Service before you go onto the next step.
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/control-implementation-library.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ ms.topic: "article"
13
13
ms.assetid: 5d100dc3-bd82-4b45-964c-d90eaebc0735
14
14
---
15
15
16
-
Implementing the component library is one of the key step when you are developing code components using PowerApps component framework. Developers can implement component library using TypeScript. Each custom component must have a library that includes the definition of a function which returns an object that implements the methods described in the custom component interface.
16
+
Implementing the component library is one of the key step when you are developing code components using PowerApps component framework. Developers can implement component library using TypeScript. Each code component must have a library that includes the definition of a function which returns an object that implements the methods described in the code component interface.
17
17
18
18
The object implements the following methods:
19
19
@@ -22,5 +22,5 @@ The object implements the following methods:
@@ -33,14 +33,14 @@ To get started, open a new Developer Command Prompt for VS 2017 after installing
33
33
> Currently, PowerApps CLI supports two types of components: **field** and **dataset**. For canvas apps, only field type is supported for experimental preview.
34
34
35
35
4. To retrieve all the required project dependencies, run the command `npm install`.
36
-
5. Open your project folder (`C:\Users\<your name>\Documents\My_PCF_Component\<component name>`) in any developer environment of your choice and get started with your custom component development.
36
+
5. Open your project folder (`C:\Users\<your name>\Documents\My_PCF_Component\<component name>`) in any developer environment of your choice and get started with your code component development.
37
37
38
38
## Build your component
39
39
40
40
To build the component project, open the project folder in Visual Studio Code and use the (Ctrl-Shift-B) command, then select the build options. Alternatively, you can also build the component quickly using the `npm run build` command in the Developer Command Prompt for VS 2017 window.
41
41
42
42
> [!TIP]
43
-
> To debug the component during or after the build operation, see [Debug a custom component](debugging-custom-controls.md).
43
+
> To debug the component during or after the build operation, see [Debug a code component](debugging-custom-controls.md).
44
44
45
45
## Known Configuration issues and Workarounds
46
46
@@ -77,7 +77,7 @@ To build the component project, open the project folder in Visual Studio Code an
|context| Contains all the information about how the component is configured and all the parameters that can be used within the component along with the [framework APIs](reference/index.md). For example, the `context.parameters.["property name from manifest"]` can be used to access the input property.|
66
-
|notifyOutputChanged |Alerts the framework whenever the custom component has new outputs ready to be retrieved asynchronously.|
66
+
|notifyOutputChanged |Alerts the framework whenever the code component has new outputs ready to be retrieved asynchronously.|
67
67
|state|Contains component data from the previous page load in the current session if component explicitly stored it earlier using `setControlState API`.|
68
68
|container|An HTML div element to which you can append the HTML elements for the UI that defines your component. To display the value in the UI, you must get the data from `context.parameters.controlValue object`.|
69
69
@@ -77,13 +77,13 @@ If the platform changes the data, it calls out the [updateView](reference/contro
77
77
78
78
### Page close
79
79
80
-
Whenever a user goes away from the page, custom component loses the scope and all the memory allocated in that page for the objects in the component will be cleared. However, some methods based on the browser implementation mechanism might stay and consume memory. Typically, these are event handlers. If the user wants to store the information, they should implement the `setControlState` method so that the information is given next time within the same session.
80
+
Whenever a user goes away from the page, code component loses the scope and all the memory allocated in that page for the objects in the component will be cleared. However, some methods based on the browser implementation mechanism might stay and consume memory. Typically, these are event handlers. If the user wants to store the information, they should implement the `setControlState` method so that the information is given next time within the same session.
81
81
82
82
Developers should implement the [destroy](reference/control/destroy.md) method which is called when the page closes, and use it to remove any cleanup code such as removing any event handlers.
83
83
84
84
## Resources
85
85
86
-
Each custom component should have a resource file to construct its visualization. You can define a resource file in the manifest. The resource node in the manifest file refers to the resources that the component requires to implement its visualization. More information: [Resources](manifest-schema-reference/resources.md)
86
+
Each code component should have a resource file to construct its visualization. You can define a resource file in the manifest. The resource node in the manifest file refers to the resources that the component requires to implement its visualization. More information: [Resources](manifest-schema-reference/resources.md)
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/debugging-custom-controls.md
+4-4Lines changed: 4 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
2
title: "Debug code components | MicrosoftDocs"
3
-
description: "How to debug a custom component using Fiddler and Native debugging"
3
+
description: "How to debug a code component using Fiddler and Native debugging"
4
4
manager: kvivek
5
5
ms.date: 04/23/2019
6
6
ms.service: "powerapps"
@@ -11,14 +11,14 @@ author: Nkrb
11
11
---
12
12
# Debug code components
13
13
14
-
Once you're done implementing the custom component logic, get started with testing and debugging the custom component using the `npm start` command. This builds the custom component and opens it in the local test harness.
14
+
Once you're done implementing the code component logic, get started with testing and debugging the code component using the `npm start` command. This builds the code component and opens it in the local test harness.
As shown in the image above, the browser window opens with 4 sections. The custom component is rendered in the left pane while the right pane has **Context Inputs**, **Data Inputs** and **Outputs** sections.
19
+
As shown in the image above, the browser window opens with 4 sections. The code component is rendered in the left pane while the right pane has **Context Inputs**, **Data Inputs** and **Outputs** sections.
20
20
21
-
-**Context Inputs** provides a way to specify the form factor and test the custom component with each form factor (web, tablet, phone). This is especially helpful when the custom component is dependent on a particular form factor capability. In the coming release, you can have the ability to specify the height and width.
21
+
-**Context Inputs** provides a way to specify the form factor and test the code component with each form factor (web, tablet, phone). This is especially helpful when the code component is dependent on a particular form factor capability. In the coming release, you can have the ability to specify the height and width.
22
22
-**Data Inputs** is an interactive UI that displays all the properties and their types or type-groups defined in the manifest file. It allows you to key in the mock data for each property.
23
23
-**Outputs** renders the output whenever a component's `getOutputs` method gets called.
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/get-powerapps-cli.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -45,7 +45,7 @@ To use Microsoft PowerApps CLI, do the following:
45
45
46
46
47
47
> [!NOTE]
48
-
> - To deploy your custom component using PowerApps CLI, you must have a Common Data Service environment with system administrator or system customizer privileges.
48
+
> - To deploy your code component using PowerApps CLI, you must have a Common Data Service environment with system administrator or system customizer privileges.
49
49
> - Currently, PowerApps CLI is supported only on Windows 10.
50
50
51
51
## Update Microsoft PowerApps CLI to the latest version
0 commit comments