Use code components in portals

Article
10/12/2022
2 minutes to read

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.

Power Apps component framework empowers professional developers and app makers to create code components for model-driven and canvas apps. 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

Note

You can also use code components in Power Pages. More information: What is Power Pages

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.

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

Important

Portals only currently support code components that are added to a field in a model-driven app.

Prerequisites

You must have System Administrator privileges 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 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

The following code component APIs aren’t supported:
The uses-feature element must not be set to true.
Value elements not supported by Power Apps component framework.

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

To learn 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 on a basic form.

To add a code component to a basic form:

Open Portal Management app.
On the left pane, select Basic Forms.
Select the basic form to which you want to add the code component.
Select Related.
Select Basic Form Metadata.
Select New Basic Form Metadata.
Select Type as Attribute.
Select Attribute Logical Name.
Enter Label.
For Control Style, select Code Component.
Save and close the form.

Code components using the portal Web API

A code component can be built and added to a webpage that can use the portal Web API to perform create, retrieve, update, and delete actions. This feature allows greater customization options when developing portal solutions. For more information, go to Implement a sample portal Web API component.

Next steps

Tutorial: Use code components in portals