|
| 1 | +--- |
| 2 | +title: Add Custom Components to a field or entity | Microsoft Docs |
| 3 | +description: Process to import custom components |
| 4 | +keywords: |
| 5 | +ms.author: nabuthuk |
| 6 | +manager: kvivek |
| 7 | +ms.date: 04/23/2019 |
| 8 | +ms.service: "powerapps" |
| 9 | +ms.suite: "" |
| 10 | +ms.tgt_pltfrm: "" |
| 11 | +ms.topic: "article" |
| 12 | +--- |
| 13 | + |
| 14 | +# Add custom components to a field or entity |
| 15 | + |
| 16 | +Custom components let you transform fields that traditionally contain text into visualizations. Similarly, you can use custom components to transform datasets, such as a view, to display in a more visual rendering rather than a list of records. Custom components can appear as visualizations on forms, dashboards, views, and homepage grids. |
| 17 | + |
| 18 | +## Add a custom component to a field |
| 19 | + |
| 20 | +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. |
| 21 | + |
| 22 | +1. Open solution explorer. |
| 23 | + |
| 24 | +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. |
| 25 | + |
| 26 | +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. |
| 27 | + |
| 28 | +4. On the **Field Properties** page, select the **Controls** tab, and then select **Add Control**. |
| 29 | + |
| 30 | +5. On the Add Control page, select the component that you want, such as the **Linear Slider** component, and then select **Add**. |
| 31 | + |
| 32 | +6. Choose the client where you want the component to appear. |
| 33 | + |
| 34 | + - **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. |
| 35 | + |
| 36 | + - **Phone**. To make the custom component available on phones running Dynamics 365 for phones, select the Phone option next to the component. |
| 37 | + |
| 38 | + - **Tablet**. To make the custom component available on tablet devices running Dynamics 365 for tablets, select the Tablet option next to the component. |
| 39 | +7. Select the pencil icon next to **Min**, **Max**, and **Step**, set the property option, and then select **OK**. |
| 40 | + |
| 41 | + - **Min**. Set the minimum accepted value. You can bind a static value that you enter or bind the value to an existing field. In this example **Bind to static value** is **Currency** and the minimum value that can be entered is *zero*. |
| 42 | + |
| 43 | + - **Bind to a static value**. Select the data type, such as a whole number (Whole.None), currency, floating point (FP), or decimal. Next, enter a number that represents the minimum accepted value for the field. |
| 44 | + |
| 45 | + - **Bind to values on a field**. Select a field from the list that will be used as the minimum accepted value. |
| 46 | + |
| 47 | + - **Max**. Set the maximum accepted value for the field. Similar to the Min value, you can bind a static value that you enter or bind the value to an existing field as described earlier. In this example, **Bind to static value** is **Currency** and the maximum value that can be entered is **1 billion**. |
| 48 | + |
| 49 | + - **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. |
| 50 | + |
| 51 | + - **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. |
| 52 | + |
| 53 | +8. Select **OK**, to close the Field Properties page. |
| 54 | + |
| 55 | +9. To activate the customization, on the entity form select **Save**, and then select **Publish**. |
| 56 | + |
| 57 | +10. Select **Save and Close** to close the form editor. |
| 58 | + |
| 59 | +## Add custom component to an entity |
| 60 | + |
| 61 | +To add a custom component like data-set component or simple table component to a grid or view, follow the steps below: |
| 62 | + |
| 63 | + - Navigate to **Settings > Customizations** and click on **Customize the System**. |
| 64 | + - Click on the arrow next to **Entities** tab a select the entity you want to add the custom component. |
| 65 | + - Click on the **Controls** tab and click on **Add a control**. |
| 66 | + - On the Add Control page, select the component that you want, such as Simple Table component and then select **Add**. |
| 67 | + - Choose the client where you want the component to appear. |
| 68 | + |
| 69 | + |
| 70 | +## See the custom component in action |
| 71 | + |
| 72 | + 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. |
| 73 | + |
| 74 | +### See also |
| 75 | + |
| 76 | +[Implementing components in TypeScript](implementing-controls-using-typescript.md)<br/> |
| 77 | +[PowerApps component framework API Reference](reference/index.md)<br/> |
| 78 | +[PowerApps component framework Overview](overview.md) |
0 commit comments