Add PCF controls to form fields

| Ijlal Monawwar

PCF stands for PowerApps Control Framework are components that can be used across full breadth of Powerapps capability. The PowerApps component framework enables the developers to create code components for model-driven and canvas apps that are not present out of the box. Code components can be reused many times across different entities and forms. Some developers can build their own PCF components to provide some custom functionality but most citizen developers can utilize the resources available of pcf.gallery website which has a slew of prebuilt components that can be used according to the needs and requirements of the customer. An example would be a color picker control which does not have out of the box availability in PowerApps.

Let’s see how to package and deploy a sample control to the Power Apps environment and then consume it on our Model-Driven app. There are two methods to deploy a code component:

  • Import the solution in to CDS
  • Power Apps CLI

In this tutorial, I’ll be discussing the second method, as it’s faster to deploy and easier to understand.

Requirements
  • We must have to install Node.js, and this will also install NPM. Node.js is the framework used to create server-side applications in JavaScript using an engine called V8, and NPM (Node.js Package Manager). This tool allows us to include, remove, and update the libraries in the project. Link for download https://nodejs.org/en/
  • Visual Studio Code.

In order to get started, we navigate to pcf.gallery website and pick a control that we want to apply on the field. For this demonstration, I will pick the Fluent Color Picker control.
PCF Control
Click on Download, which will lead you to a github repository for the control’s files.
PCF Control
Now, click on Code to expand the contents and then Download ZIP.
PCF Control
Once downloaded, extract the zip folder.
PCF Control
After extraction is completed, open the Visual Studio Code and then navigate to the directory of the extracted folder where the PCFPROJ file is located.
PCF Control
Now, open the terminal in that folder
PCF Control

PCF Control
Enter the command pac auth create --url https://xyz.crm.dynamics.com, the bold text refers to the url of your environment.
PCF Control
Sign in with your credentials to connect the terminal to the environment.
PCF Control
To install the remaining dependencies use the command npm install after this step. Then write the command pac pcf push --publisher-prefix contoso where the bold text refers to the publisher of the solution. The publisher is usually the first part of the schema name of a table or any other component before the underscore in the solution, for example new_testtable, where new is the publisher for this solution.
PCF Control
I will now create a demo solution but if you already have a solution with your project resources, you don’t need to move forward with the following step.
PCF Control
Now, adding a demo table to the solution.
PCF Control
Adding the field which will contain the Colour Picker control.
PCF Control
Now navigate to Forms -> Main form
PCF Control
Switch to the classic mode as the new interface doesn’t support the custom control fields yet.
PCF Control
Add the field we just created above by dragging and dropping it below the Name and Owner fields.
PCF Control
Now select the field and select the Change Properties button and go to the controls tab.
PCF Control

PCF Control
Select the Colour picker control and then select all the radio buttons for Web, Phone and Tablet experience. Click on OK then Add. Then Save and Publish the form.
PCF Control
To see the colour picker added, we go to Data tab and then select the Add record button.
PCF Control
Colour Picker control is now added, which saves a Hex value in the field corresponding to the selected colour.
PCF Control

Conclusion
Thus, we learned how deploy PCF control in Table forms in PowerApps.

Join us next time, as we continue our journey of learning canvas apps.Click here to learn more about Imperium's Power Apps Services. We hope this information was useful, and we look forward to sharing more insights into the Power Platform world.


M
Chief Architect, Founder, and CEO - a Microsoft recognized Power Platform solution architect.

About The Blog

Stay updated with what is happening in the Microsoft Business Applications world and initiatives Imperium is taking to ease digital transformation for customers.


More About Us

We provide guidance and strategic oversight to C-Suite and IT Directors for on-going implementations. Feel free to give us a call.

1 331 250 27 17
Send A Message

Ready to Start?

Get a personalized consultation for your project.

Book a Meeting