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). These code components can provide an enhanced experience for users working 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 currently supports code components that are added to a field in a model-driven app.

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 a model-driven app

To learn about how to add a 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 a model-driven app, you can configure portals to use the code component in the basic form. Once you configure the code component on a basic form, ensure you configure table permission to allow portal users Read access to the Web Resource table before they can see the component on the portal page.

To add a code component to a basic form:

  1. Open Portal Management app.

  2. On the left pane, select Basic Forms.

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

  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 a Web Resource table

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

To configure Read access on a 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 the Web Roles section, select Add Existing Web Role.

  11. Select the web role for the users that should 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 webpage, 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