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 PCF.gallery, Power Apps Community and from Microsoft for Model driven and Canvas apps.
Sample components from Microsoft
If you are new to component framework, I recommend going through the documentation from the following link:
The PowerApps component framework enables the developers to create code components for model-driven and canvas apps. I have recently used a control from the PCF gallery community site, let’s see how to package and deploy a sample control to the Power Apps environment and then consume it on your Canvas app. There are two methods to deploy a code component:
- Import the solution in to CDS
- Power Apps CLI
To follow along the blog post, have the following available and installed on your environment
- Install Power Apps CLI and Node.js
- Access to Power Apps CDS Environment
- Developer Command prompt for Visual Studio 2017 or 2019
- Power Platform Administrator
- Enabling the PowerApps component framework on canvas applications
Method 1: Import the solution in to CDS:
For this post, I have chosen the React Face pile component from Microsoft Power Apps samples github repo. Follow the steps to create the solution ZIP file to be imported on the solutions gallery. If you already have the solution package, directly proceed to the Step 10.
Step 1: Download as a ZIP package and extract to a folder on your computer or git clone from the Microsoft Github repository. I have downloaded on C:\ PCF\Controls\sample-controls
git clone https://github.com/microsoft/PowerApps-Samples.git
Step 2: Open the Developer command prompt and navigate to the folder on the computer where you have downloaded the React Face pile component using the cd folder-path-react-facepile-component command e.g folder-path: C:\ PCF\Controls\sample-controls\PowerApps-Samples\component-framework\TS_ReactStandardControl
Step 3: Install all the required dependencies by running the command
npm installStep 4: Create a folder (e.g ReactStandardControlSolution) on the root of the React face pile component project (e.g C:\ PCF\Controls\sample-controls\PowerApps-Samples\component-framework\TS_ReactStandardControl) either manually or using the command mkdir ReactStandardControlSolution
Step 5: Navigate to the created folder by using the command cd ReactStandardControlSolution
On your command prompt, you should now be on e.g C:\ PCF\Controls\sample-controls\PowerApps-Samples\component-framework\TS_ReactStandardControl\ ReactStandardControlSolution
Step 6: Create a new solution project using the following command. The solution project is used for bundling the code component into a solution zip file that is used for importing into Common Data Service.
pac solution init --publisher-name developer --publisher-prefix devThe Published-name and publisher-prefix values should be unique to your environment
Step 7: Add the reference using the command shown below. This reference informs the solution project about which code components should be added during the build. The path should to the root of the downloaded react face pile component and not to the newly created solution folder
pac solution add-reference --path C:\ PCF\Controls\sample-controls\PowerApps-Samples\component-framework\TS_ReactStandardControl\Step 8: To generate the ZIP package, enter the following command
msbuild /t:build /restoreStep 9: The generated ZIP file will be available on \bin\debug\ folder once the build is successful
Note: Make sure there is no spaces on the folders you create to avoid deployment issues
Reference:
https://docs.microsoft.com/en-us/powerapps/developer/component-framework/import-custom-controls
https://docs.microsoft.com/en-us/powerapps/developer/component-framework/use-sample-components
Step 10: Now it’s time to import the solution to the solutions gallery by signing into Power Apps and select Solutions from the left navigation. On the command bar, select import and then browse to the Zip file solution created from the above steps. After the solution is imported successfully, the solution is available to use in Power Apps canvas and Model driven apps.
Reference: https://docs.microsoft.com/en-us/powerapps/maker/common-data-service/import-update-export-solutions
Let’s see the next method to deploy the code component
Method 2: Power Apps CLI:
In the previous method Power Apps CLI was used to generate the solution package and then the solution was imported to the gallery, on this method the code component will be directly pushed to the CDS service instance using the CLI push command.
Step 1: Create an authentication profile to the CDS instance by executing the following command on a command prompt, it’s not necessary to open a VS command prompt.
pac auth create --url https://xyz.crm.dynamics.comTo get the url sign into Power Apps and select your environment which has CDS in the top right corner and the environment you are planning to deploy the code component. Select the settings button in the top right corner and select Advanced settings. Now copy the URL from the webbrowser which should look like below
https://orgchangedhere.crm4.dynamics.com/main.aspx?settingsonly=true
The URL is https://orgchangedhere.crm4.dynamics.com/
Once your profile is successfully created, you should see the following message on your command prompt
Step 2: Navigate to the root folder of the custom component project using the cd folderpath command which has the .pcfproj file (e.g C:\ PCF\Controls\sample-controls\PowerApps-Samples\component-framework\TS_ReactStandardControl)
Step 3: Install all the required dependencies by running the command
npm installStep 4: Run the following command to push the code components to the CDS instance
pac pcf push --publisher-prefix contosoNote: The publisher prefix that you use with the push command should match the publisher prefix of your solution in which the components will be included.
Reference:
The component is now ready to be used in the Canvas or a Model driven app after the code deployment using Method 1 or Method 2.
To add the component in a Canvas App:
Follow along then the documentation from Microsoft
Find below the sample controls I’ve added on the Power App canvas app
To add the component in a Model Driven app:
Summary: You can also create a custom component from scratch or extend the functionality from the available samples based on your needs. Hope you have found this informational & helpful in some way. Let me know any feedbacks or comments on the comment section below
Mohamed Ashiq Faleel 