title | description | author | ms.topic | ms.custom | ms.date | ms.subservice | ms.author | ms.reviewer | contributors | |||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Tutorial: How to use code components in Power Pages |
Walk through example steps for creating a sample code component and adding it to a Dataverse form used to create a form component inside Power Pages. |
sandhangitmsft |
conceptual |
03/02/2023 |
nenandw |
dmartens |
|
In the tutorial, you'll add a custom component to a Microsoft Dataverse form, and enable the custom control to be visible on a webpage.
This tutorial will use the Feedback table and the Contact us webpage that is available in the Starter layout templates.
- Your portal version must be 9.3.3.x or higher.
- Your starter portal package must be 9.2.2103.x or higher.
- A site using one of the Starter layout templates.
To create a sample component, follow the steps in the tutorial Create your first component. At the end of that tutorial, you'll have the component named TSLinearInputComponent packaged and uploaded to your Dataverse environment which you can use in Power Pages.
You can also use some of the out of the box controls that are available. In our example we will use the number input control.
-
In the design studio, select the Data workspace.
-
Select the Feedback table.
-
Select Forms and then choose to edit the simple contact us form.
-
Select + Add field and choose the Rating field.
-
Position the Rating field on the form.
-
With the Rating field selected, choose + Component and select the Number input component.
:::image type="content" source="media/component-framework/add-component-to-form.png" alt-text="Add component to form.":::
-
Configure the control to have a Type of Whole Number and a Static value of 1.
-
Select Done.
-
Select Save and Publish form.
In the following steps we will configure the existing feedback page, you can also create your own page and add your own form component.
-
In the Pages workspace, select the Contact us page.
-
The ratings field should appear on the form with the message Enable custom component to see this field in preview.
-
Select the field and choose Edit field.
-
Select the Enable custom component field.
:::image type="content" source="media/component-framework/enable-code-component.png" alt-text="Enable custom component in design studio.":::
-
Select OK.
-
When you preview the site, you should see the custom component enabled.
:::image type="content" source="media/component-framework/custom-component-on-form.png" alt-text="Custom component on a form.":::