Add PCF controls to form fields

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.
Click on Download, which will lead you to a github repository for the control’s files.
Now, click on Code to expand the contents and then Download ZIP.
Once downloaded, extract the zip folder.
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.
Now, open the terminal in that folder

Enter the command pac auth create --url https://xyz.crm.dynamics.com, the bold text refers to the url of your environment.
Sign in with your credentials to connect the terminal to the environment.
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.
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.
Now, adding a demo table to the solution.
Adding the field which will contain the Colour Picker control.
Now navigate to Forms -> Main form
Switch to the classic mode as the new interface doesn’t support the custom control fields yet.
Add the field we just created above by dragging and dropping it below the Name and Owner fields.
Now select the field and select the Change Properties button and go to the controls tab.

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.
To see the colour picker added, we go to Data tab and then select the Add record button.
Colour Picker control is now added, which saves a Hex value in the field corresponding to the selected colour.

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.

---