Tutorial: Use code components in portals
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.
Prerequisites
- 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.
Step 1. Add the code component to a field in a form
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.
Configure the control to have a Type of Whole Number and a Static value of 1.
Select Done.
Select Save and Publish form.
Step 2. Configure form component on webpage
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.
Select OK.
When you preview the site, you should see the custom component enabled.
Next steps
Overview: Use code components in Power Pages