Over the past year we have seen the Power Apps Component Framework (PCF) evolve into a robust development framework for end user experiences.

Today the evolution continues with the official PCF support on Microsoft Portals with the Public Preview. I will be providing a first look at the upcoming PCF on Portals in this article and showing how you can get started with a quick start tutorial.

PCF Controls on Portals

Introduction to Power Apps Component Framework

The Power Apps Component Framework (PCF) was initially released for public preview in 2019 and enabled pro developers to build reusable components and deploy them onto the Power Apps platform.

The framework is currently in GA for Model Driven Apps and still in Public Preview for Canvas Apps.

Now the framework is entering its third phase with the announcement of Portal support with a Public Preview starting in March 2021.

Source: Microsoft 2020 Release Wave 2 Plan
Source: Microsoft 2020 Release Wave 2 Plan

When will this roll out?

The staggered rollout will occur from 31st of March, and not all geographies will receive the update immediately. Officially the update will appear with build version 9.3.3.X+.

What PCF components are supported in Portals?

To run, we must first learn to crawl and walk. The Microsoft Product team will focus initially on supporting Field Data Types only, and ensuring that all bugs and issues are rectified before moving onto Datasets and other types such as Value Elements, or Device inputs and WebAPI.

To understand what is available within Public Preview today, I have constructed the following table.

DescriptionMore InfoSupported in Public Preview
Field Data Types
e.g. Currency, DateTime, Decimal, Enum, FP, Multiple Line, OptionSet, SingleLine, Two Options, Whole

Yes
Data Set ComponentsNo
Value Elements

e.g. Lookups, MultiSelect, Status, Status Reason
No
Component APIs

e.g.
Device.captureAudio, Device.captureImage,
Device.captureVideo, Device.getBarcodeValue,
Device.getCurrentPosition, Device.pickFile, Utility, WebAPI		No
Portal Component Support as of March 2021

Changes to the Portal Solution

An update will be rolled out to Portal solutions that will include an additional Choice type called “Code Component” that will appear in the Entity Form Metadata table and the Web Form Metadata table. Note: Microsoft have announced some future naming changes to Entity Form (to Basic Form) and Web Form (to Advanced Form).

New OptionSet value – Code Component

Updated Pro-Dev Editing Tools

There will be a new PowerApps CLI and VS Code Plugin. This update will have a separate preview to this, so may not be out by the time of reading this, I will keep you posted. Reminder to update the CLI, run:

pac install latest

From within Visual Studio Command Line.

Quick Start Guide to PCF on Portals

Microsoft have made the process of deploying a component to the portal relatively straight forward. The following is a quick start guide of implementing PCF Components within Microsoft Portals.

The following assumes you have the following:

  • A Model Driven App (to configure a Portal Form)
  • A Portal App (updated April 2021 version – Build 9.3.3.X+, which has the required “Code Component” option)

Step 1 – Creating a Form for the Portal

  • Within make.powerapps.com, go to Data > EntityName > Forms > Add form > Main Form
  • Drag a field type attribute to your form, and select a component you wish to use on the portal (Expand Components, + Component)
  • Save your form as “Portal Form”.
  • Create Main Form
  • Add Component

Step 2 – Portal Configuration (Entity Permissions – One Time)

This is a one-time configuration to enable users to access webresources (which are a requirement of PCFs on the Portal).

  • Open the Portal Management App (Apps > Portal Management)
  • Create a new Entity Permission record (Entity Permissions > + New)
    • Name: Web Resource Permission Set
    • Entity Name: webresource
    • Scope: Global
    • Privileges: Read (on)
  • Save
  • Next add the following Web Roles
    • Administrators
    • Anonymous Users
    • Authenticated Users
  • Create Entity Permission
  • Add Web Roles

Step 3 – Portal Configuration (Entity Forms, creating Meta Data)

Next, we need to create the entity forms we wish to display on the Portal, and associate meta data to the attributes which we wish to have the PCF component displayed.

  • Still within Portal Management, Click on Entity Forms
  • Create or Edit an Existing Form. In this instance I already have an Entity form pointed to my Widget entity and using the Portal Form created earlier.
  • Next click on the Entity Form Metadata tab, and click + New Entity Form Metadata
    • Type: Attribute
      Attribute Logical Name: yourfieldname
      Label: yourfieldlabel
      Control Style : Code component
  • Click Save.
  • Create Entity Metadata
  • Add Attribute

(Repeat this step for as many PCFs you wish to display on the portal).

Step 4 – Add a Form to your Portal

Now that we’ve defined our meta data, lets create a data entry form for our Portal.

  • Go back to make.powerapps.com
  • Edit your portal app (Apps>YourPortalName>…>Edit), this will open the Portal maker experience
  • Create a new blank page (+ New Page > Blank)
  • Add a Form component (Components tab on left hand side > Form)
  • Configure to Use Existing (on Right hand property, select Use Existing, select the form you created in previous step)
  • Now click Sync Configuration, and then Browse website to test.

Conclusion

PCF for Portals has been one of the most discussed topics online since the release of the original PCF for Model Driven Apps in 2019. This latest release by Microsoft will enable better B2B and B2C experiences delivered through Microsoft Portals and PCF.

It is a small stepping stone towards full parity with Model-driven PCF, and we are all eagerly awaiting support for Datasets, Value types, and WebAPI. But first we must achieve 100% compliance with the existing Attribute controls, and that’s where you all can support this effort.

There is a huge library of over 300 controls on the pcf.gallery maintained by Guido Preite. Many of these controls will require re-testing and/or refactoring for Portal support. I encourage developers and consultants to help with the testing of these controls, and to report any issues to component authors so that we can build a stronger component eco-system on Portals.

Also note, as this is still in public preview, we do not encourage use in a production environment. If you do discover a bug or have a suggestion, please make sure you submit to Power Apps Ideas.