Tutorial: Use code components in portals
In this tutorial, you'll create a sample component using Power Apps component framework. You'll package this component to a Dataverse environment and add the component to a model-driven app. You'll then configure Power Apps portals to add the component to a basic form and add the basic form to a webpage. Finally, you'll visit the portals webpage and interact with the component.
Prerequisites
- Your portal version must be 9.3.3.x or higher.
- Your starter portal package must be 9.2.2103.x or higher.
Note
This tutorial is based on the existing Power Apps component framework tutorial that walks you through creating the TSLinearInputComponent for the Opportunity table on the Main form. You can also use any existing or new component, and any other table for this tutorial. In this case, be sure to use your component and form when following the steps in this tutorial.
Step 1. Create your first component
To create a sample component, follow the steps in the tutorial Create your first component. At the end of this tutorial, you'll have the component named TSLinearInputComponent packaged and uploaded to your Dataverse environment.
Step 2. Add the code component to a field in a model-driven app
Now that you have the TSLinearInputComponent uploaded to your Dataverse environment, follow the steps in the tutorial Add a code component to a field in model-driven apps to add the component to the Opportunity table on the Main form.
Step 3. Verify the model-driven app with the new component
You can update an existing model-driven app or create a new app with the form to which you added the component. For example, the following image shows how the Opportunity table Main form looks when using the code component in this tutorial.

Step 4. Add code component to a basic form in portals
In this step, you’ll create a new basic form in portals and then add the component to the created basic form. You can also use an existing basic form instead.
Step 4.1. Create a new basic form
Open Portal Management app.
On the left pane, under Content, select Basic Forms.
Select New.
Enter Name. For example, Opportunities basic form with code component.
Select Basic Name as Opportunity.
For Form Name, select the model-driven app form that you added the code component to earlier in this tutorial.
Select the Tab Name.
Select your portal Website.

Select Save & Close.
Step 4.2. Add code component to the basic form
Open Portal Management app.
On the left pane, under Content, select Basic Forms.
Select the basic form you created in the previous step.
Select Related.
Select Basic Form Metadata.
Select New Basic Form Metadata.
Select Type as Attribute.
Select Attribute Logical Name as Budget Amount (budgetamount).

Enter Label. For example, Budget Amount.
For Control Style, select Code component.

Select Save & Close.
Step 5. Create a webpage in portals with the basic form
Open your portal in Power Apps portals Studio.
On the top-left corner, select New page.
Select Blank.
On the right-side property pane, update the webpage name. For example, Opportunities.
Update partial URL. For example, opportunities.
Expand Permissions.
Disable Page available to everyone.
Select the web roles that should be allowed access to this page.
Inside the page editor, below the Header section, select the Column section.
On the left pane, select Components.
Under Portal components, select Form.
On the right-side property pane, select Use existing.
Under Name, select the basic form that you created earlier in this tutorial.
Tip
If you don’t see the form available, try Sync Configuration to synchronize changes from Dataverse.
On the top-right corner, select Browse website.
The webpage will now show the basic form for the Opportunities table with the code component as the slider, similar to how it appears using the model-driven app for the same form.

Next steps
Overview: Use code components in portals
See also
Power Apps component framework overview
Create your first component
Add code components to a field or table in model-driven apps