Import PowerApps Component Framework (PCFx ) Into Model Driven PowerApps

Introduction

In this article, we are going to see what PowerApps is and why it is popular in the market. PowerApps is, basically, a development platform for mobile and web apps. It allows “citizen developers” to reach capabilities that were once only reserved for high-end development tools.

If you are PowerApps developer and wanted to extend the capabilities by bringing in third party or community driven PCF (Power Apps Component Framework) components, you can find lot of samples from the Power Apps community website

for Model driven and Canvas apps.

For more details about what is PowerApps? Please read my previous article. What is PowerApps?

Download PCF components

Here I have downloaded some sample component to test them in my Model Driven App.

Click the Sample App and you will get the below screen to download the component.

A Control to show a Yes / No field as a checkmark image instead. Perfect for those fields that only show information if a certain requirement has been fulfilled. This control is non-interactable by design.

Click the download button and will take you into git repository to download the file,

Click Download

Extract the solution

Let’s install it in our PowerApps Environment

Go to PowerApps at https://make.powerapps.com/ and select your environment, then Solutions and Import:

Click import

I have used unmanaged code and getting this error and I downloaded managed solution from git repository.

And trying to import the solution

After few mins the component has been imported successfully,

Click Publish All Customizations before you start the next steps

Ok. we have added the component and let's use this control in our model Driven App for our testing.

Open your Solution and create a table with few columns for testing,

If you don’t have an existing model driven for Testing use the below steps

Let's move into the actual topics adding component into the form,

Open the Main form of our Table

Create Yes/no Field Type Column in our table and our fields into the Form “Toggle Yes/No” then switch it back to classic view,

In the form editor, double-click the column where you want to add a code component, such as the Toggle Test1 column on the opportunity main form

Go to Controls and Add Control

Click OK, then Save and Publish the form:

Now go back to your Model Driven app and add a new item the form will render with toggle control (PCF )Component).

You can check the backend at the table side the values are rendered properly.

Output

Conclusion

PowerApps gives you the ability to connect with all kinds of data, which is not only available with your Tenant but connected to it via the Data Management Gateways.

PowerApps is truly the future of building custom forms and then making them available on mobile devices for your organization.

Now, in some cases, the PCF.Gallery component will not contain a ZIP solution. We will look at how to install these in a future post. We have to use PowerApps CLI to import the component in upcoming videos.

Was my article helpful? If yes, please let me know and if not, please explain what was confusing or missing. I’ll use your feedback to double-check the facts, add info and update this article.