Tutorial: Use code components in portals

Note

Effective October 12, 2022, Power Apps portals is Power Pages. More information: Microsoft Power Pages is now generally available (blog)
We will soon migrate and merge the Power Apps portals documentation with Power Pages documentation.

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.

Slider control added to the Budget Amount field in model-driven app form.

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

  1. Open Portal Management app.

  2. On the left pane, under Content, select Basic Forms.

  3. Select New.

  4. Enter Name. For example, Opportunities basic form with code component.

  5. Select Basic Name as Opportunity.

  6. For Form Name, select the model-driven app form that you added the code component to earlier in this tutorial.

  7. Select the Tab Name.

  8. Select your portal Website.

    Configure basic form using Portal Management app.

  9. Select Save & Close.

Step 4.2. Add code component to the basic form

  1. Open Portal Management app.

  2. On the left pane, under Content, select Basic Forms.

  3. Select the basic form you created in the previous step.

  4. Select Related.

  5. Select Basic Form Metadata.

  6. Select New Basic Form Metadata.

  7. Select Type as Attribute.

  8. Select Attribute Logical Name as Budget Amount (budgetamount).

    Budget Amount attribute logical name.

  9. Enter Label. For example, Budget Amount.

  10. For Control Style, select Code component.

    Control Style.

  11. Select Save & Close.

Step 5. Create a webpage in portals with the basic form

  1. Open your portal in Power Apps portals Studio.

  2. On the top-left corner, select New page.

  3. Select Blank.

  4. On the right-side property pane, update the webpage name. For example, Opportunities.

  5. Update partial URL. For example, opportunities.

  6. Expand Permissions.

  7. Disable Page available to everyone.

  8. Select the web roles that should be allowed access to this page.

  9. Inside the page editor, below the Header section, select the Column section.

  10. On the left pane, select Components.

  11. Under Portal components, select Form.

  12. On the right-side property pane, select Use existing.

  13. 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.

  14. 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.

Example preview of the Budget Amount slider control on portals page.

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