Use code components in portals (Preview)

[This article is pre-release documentation and is subject to change.]

Power Apps component framework empowers professional developers and app makers to create code components for model-driven and canvas apps (public preview) to provide enhanced user experience for the users to work with data on forms, views, and dashboards. More information: Power Apps component framework overview

Power Apps portals now supports controls for model-driven apps created using Power Apps component framework. To use code components in portals webpages, follow these steps:

Create code component using component framework, then add the code component to a model-driven app form, and configure the code component field inside the basic form for portals and allow Read permission to the Web Resource table.

After following these steps, your users can now interact with the code component using the portal page that has the respective basic form.

Important

  • This is a preview feature.
  • Preview features aren’t meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.
  • Portals only supports code components that are added to a field in a model-driven app currently.

Prerequisites

  • User must have a valid Power Apps license. More information: Power Apps component framework licensing

  • System Administrator privileges are required to enable the Power Apps component feature in the environment.

  • Your portal version must be 9.3.3.x or higher.

  • Your starter portal package must be 9.2.2103.x or higher.

Create and package code component

To learn about creating and packaging code components created using Power Apps component framework, go to Create your first component.

Supported field types and formats

Portals supports restricted field types and formats for using code components. The following table lists all supported field data types, and formats.

Currency

DateAndTime.DateAndTime

DateAndTime.DateOnly

Decimal

Enum

Floating Point Number

Multiple

OptionSet

SingleLine.Email

SingleLine.Phone

SingleLine.Text

SingleLine.TextArea

SingleLine.Ticker

SingleLine.URL

TwoOptions

Whole

More information: Attributes list and descriptions

Unsupported code components in portals

Add a code component to a field in model-driven app

To learn about how to add code component to a field in model-driven app, go to Add a code component to a field.

Important

Code components for portals are available for web browsers using the client option of Web.

Configure portal for code component

After the code component is added to a field in model-driven app, you can now configure portals to use the code component in the basic form. Once you configure the code component on an basic form, ensure you configure table permission to allow Read access to Web Resource table for the portal users before they can see the component on the portal page.

To add code component to an basic form:

  1. Open Portal Management app.

  2. On the left-pane, select Basic Forms.

  3. Select the basic form you want to add the code component to.

  4. Select Related.

  5. Select Basic Form Metadata.

  6. Select New Basic Form Metadata.

  7. Select Type as Attribute.

  8. Select Attribute Logical Unit Name.

  9. Enter Label.

  10. For Control Style, select Code Component.

  11. Save and close the form.

Allow Read access to Web Resource table

Portals requires Read permission to be set on Web Resource table before users can see the code component on the web page with the basic form.

To configure Read access on Web Resource table:

  1. Open Portal Management app.

  2. On the left-pane, select Table Permission.

  3. Select New.

  4. Enter Name.

  5. Select Web Resource (webresource) for Table Name.

  6. Select your website record.

  7. Select Global for Scope.

  8. In Privileges, select Read.

  9. Select Save.

  10. Under Web Roles section, select Add Existing Web Role.

  11. Select the web role for the users that you want to see the code component in portals.

    For example, Anonymous Users for anonymous users, Authenticated Users for users authenticated by portals, or a custom web role.

  12. Select Save & Close.

Once you add the basic form to a web page, users assigned to the selected web role can now see the code component on the portal page having the selected basic form.

Next steps

Tutorial: 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