Step by Step-Create PowerApps Custom Component

6 min readJan 8, 2020

In order to develop PowerApps Component you need to be familiar with the configuration and customization in Dynamics365, in addition to the fact that it is essential that you can develop and understand the framework. And you also need to be familiar with deploying and debugging solution in Dynamisc365.

To get better understanding of how every thing work i will suggest you to first watch the video below, which was really good to look at when I was working on how developing PCF-component works.

How to create a PowerApps PCF control

This video is very good to look at in terms of how to set up solution directories and how to use best practices for code structure. And you get a very walk thrue and useful review of everything from creating the project for development and how to package solutions.

The First ting you need to do is to setup development enviroment:

The first thing we will need is Node.js. Installing it is straight forward — follow the steps described here.
After installing Node, install Visual Studio Code or Visual Studio.
Next, we need to download the PowerApps CLI. To do this, go to https://docs.microsoft.com/en-us/powerapps/developer/component-framework/get-powerapps-cli.

After watching video above you shoul know have understanding on why it is a best practise to setup folder structure as explained in the video.

Your folder structure should look like:

Under folder “Controls” create another folder with the solution Name: PCFStebByStep.
Now open up a command prompt and navigate to your folder:

You can also navigate to your folder from VSC terminal also or from Command Prompt, its up to you….

Run the below command to create a new component project:

pac pcf init — namespace PCFStebByStepNamespace — name PCFStebByStepComponent — template field

After running the command your folder will look like:

All files for the prosject are now generated by running the command. Now you need install all dependencies for the project. And the “package.json” files contains all default dependencies for the prosject to run/start.

Next run npm install command to install the project dependencies.

Now open your project in VSC by running the command.

Run comman “code .” for opening projec in VSC

Open the ControlManifest.Input.xml file created inside the folder created with the control’s name.

ControlManifest.Input.xml

In ControlManifest.Input.xml file you will setup/define your properties, fields, and Datase ect.

Open the index.ts

Add the following line of code in picture below, to add a label control that will display the text ‘Hello World, PCF ROCKS!’.

Run npm run build command to build the control

To test the control run npm run start command

For terminating the job use CTRL + C

Write ‘Y’ and enter.

How to pack solution files for deployment

pac solution init — -publisherName [publisher name] — -customizationPrefix [publisher prefix]

You can also write the comman line like this:

pac solution init -pn developer -pp dev

NOTE: You need to navigate to the “Solution” folder wich you created at the start of this guide and then run the command above.

I have created another folder with the same name as project “PCFStepByStepSolution” in my “Solution” folder.

After running the command you will find these files in your folder:

Run the below command to add reference to our custom control in the solution

pac solution add-reference — -path [path to pcfproj file]

In my case this command will look like:

pac solution add-reference — path C:\PCF\Controls\PCFStebByStepComponent

PATH: The path must be where you have your project files under “Controls” folder:

i.e. reference of the below path.

Now run the command

This creates the file with extension .cdsproj

To generate Zip File run the below command in the Developer Command Prompt for Visual Studio 2019. Or you can find your MSBuild.exe located at PATH: “C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\MSBuild\Current\Bin\amd64\MSBuild.exe”

Run the command :

MSBUILD /t:restore
MSBUILD

/t:restore

MSBUILD

This adds the Solution zip in the bin Debug folder.

To get both managed and unmanaged solution, update the cdsproj file:

Import the solution in Dynamics 365 and open any of the entity’s form. Here we have created a new text field named GUID in the Contact form and have set our custom control for that field.