Quick guide to use PCF Controls (Custom Code Components) in PowerApps Portals


Introduction

Hi Everyone,

I hope you are well, staying safe and healthy.
Today I am extremely happy to share the recent Microsoft update, that Custom Code Components (PowerApps Component Framework Controls) or PCF Controls are now supported in PowerApps Portals.
For those who do not know about Custom Code Component or PCF Controls, Please bear with me, because In today\’s PowerGuideTip29, I am going to share a quick guide to use the custom code components in PowerApps Portals.
What is Custom Code Component or PCF Controls?
  • Custom controls let you transform fields that traditionally contain text into visualizations. Similarly, you can use custom controls to transform datasets, such as a view, to display in a more visual rendering rather than a list of records. 
  • Custom controls can appear as visualizations on forms, dashboards, views, and homepage grids. You can set one type of custom control to appear in the web browser client while having a different custom control appear in your Dynamics 365 for Customer Engagement phone or tablet mobile apps. For example, you could use a number input custom control for a field in web browser clients and a slider custom control for the phone app. 
  • After the customization is published, users can fully interact with the control to change the value, such as by sliding the control when using the linear slider custom control. Changes are automatically saved when the form is closed just as they are when the user changes a traditional field on a form.
How many types of Custom Controls are available in the Model-driven app?
  • You can use a rich set of additional controls to create a more touch-friendly experience on model-driven apps. These include sliders, switches, multimedia players, input masks, calendars, and other controls.
  • You can find the list of all OOB Custom Controls here.
Can I create my own Custom Control (PCF Controls)?

Yes, of course, you can create your own Custom Controls as well based on your business needs. There are few PCF Champs out there, who have designed so many useful and wonderful custom controls. You can download these controls and can start using them.
You can find the PCF Gallery here

Check this article for step by step guide to create your own custom controls.

How to use Custom Control in PowerApps Portals?
You need to perform the following steps in order to use the Custom Control in PowerApps Portals.
Pre-requisites:
  • PowerApps License or Trial Instance
  • System Admin rights
  • Portal version must be  9.3.3.x or higher.
  • Your starter portal package must be 9.2.2103.x or higher.
Step 1 – Build and package your code component. Check here
or
Step 1 – Use the existing custom control

Step 2 – Add the custom control to a field in the Model-driven app

Step 3 – Create Basic Form in Portals
  • For demonstration, I have created a new weblink (My Account) under Profile Navigation Web Link sets and associated it with My Account Web Page. Anf finally I have associated the My Account web page with the My Account Basic form.
  • In My Account Basic Form, I am displaying the portal logged-in user account details. Hence, I have chosen Record Associated to Current Portal User  as RecordSource Type and took form in Edit mode, so that the portal user could update their account details

Step 4 – Create Basic Form Metadata for each Custom Control field in Basic Form

For demonstration, I have used custom controls on the following highlighted fields.

To display the custom control applied on the model-driven app forms field, you need to create a Basic Form metadata for each field and set its Control Style property to \’Code Component\’ as highlighted below 

Step 5 – Configure Entity Permission for Web Resource table
Associate appropriate Web Role to the Table Permission. I want to display the Custom Controls to all Authenticated Users. Hence I have associated Authenticated Web Roles to the Table Permission.

Step 6 – Clear Portal Cache (or Sync Configuration) and Test Custom Controls on Portals.

Useful Source & References


Hope you found this article helpful.

Stay tuned for the next PowerGuideTip30.

Published by arpitpowerguide

My name is Arpit Shrivastava, who is a Microsoft MVP in the Business Applications category. I am a Microsoft Dynamics 365 and Power Platform enthusiast person who is having a passion for researching and learning new things and acquiring immense knowledge. I am providing consistent help, support, and sharing my knowledge through various Social Media Channels along with my Personal Blog, Microsoft Community, conducting online training and attending various 365 Saturday Events worldwide and sharing the best Solutions to the readers helping them achieve their goals and objectives in Customer Relationship Space.

4 thoughts on “Quick guide to use PCF Controls (Custom Code Components) in PowerApps Portals

  1. Special thanks to (hackingsetting50@gmail.com) for exposing my cheating husband. Right with me i got a lot of evidences and proofs that shows that my husband is a fuck boy and as well a cheater ranging from his text messages, call logs, whats-app messages, deleted messages and many more, All thanks to (hackingsetting50@gmail.com), if not for him i will never know what has been going on for a long time. Contact him now and thank me later.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: