Part 2: SET up development environment for PowerApps Component Framework (PCF) Project

Follow my blog for more interesting topics on Dynamics 365, Portals and Power Platform. For training and consulting, write to us at info@xrmforyou.com

The article is a part of series of blog posts on Custom component framework topic. Please start from beginning to get the context.

For this article I will use Visual studio 2017 for development purpose. All the steps mentioned below will assume that you have Visual studio 2017 as your development environment. Also please note that of the current pre-release, you can set-up your development environment for machines on Windows 10

For this article

Machine OS: Windows 10

IDE: Visual studio 2017

Local directory for control development: c:\debajit\blog\powercontrols

Please follow the below steps:

Step 1: Install NPM

npm is the world’s largest software registry and open source developers use npm to share software. node.js come with npm. In order to install NPM, please follow the below procedure.

Navigate to site – https://nodejs.org/en/

Dowload the LTS one. You can even use the current version (12). Once you have downloaded, install it.

Step 2: Install Power Apps CLI (command line interface)

You can download the CLI from – http://download.microsoft.com/download/D/B/E/DBE69906-B4DA-471C-8960-092AB955C681/powerapps-cli-0.1.51.msi. This will download a MSI file. Once downloaded, install it.

Step 3: Set-up your Power Apps custom component project

The next step is to set-up the PCF project framework. In order to accomplish this, please flow the below steps.

1. Open Visual studio 2017 command prompt

2. Navigate to your local directory where you want to set-up your component project

3. To create a new component project, run the below command

pac pcf init --namespace <specify your namespace here> --name <put component name here> --template <component type>

Now that you have completed some critical steps, a explanation is the need of the hour.

“namespace” is the namespace that you want to provide for your controls. For example if you are an ISV and want to develop custom components, may be you want all your controls within a namespace that identifies your company. In my case I would use – “XrmforyouControls”.

“componentname” is the name of the control. Since I will be building a file input control here, I will use the component name as “FileControl”.

“template” – As of the current pre-release only two values are supported for this field and dataset

So my command line would be

pac pcf init --namespace XrmforyouControls --name FileControl --template field

As you can see, my project is created successfully.

4. The next step is to install project dependencies. Your component project would required lots of external files to build successfully. To install the dependencies, run the command “npm install”

It may take some time to install the dependencies. Your screen would resemble above while installing. Once installation is done, your project environment is ready and we will start building the control.

The first step as we discussed earlier in to build the manifest file which is explained in the next article.

You will also like the below posts

• Improving User Experience with Delayed filter or Search in Power Apps
• {Solved} How to clear a DatePicker control in Canvas apps
• How to convert a local datetime to UTC in Power Apps
• PowerApps Tutorial: Extracting Dynamic JSON Schema Properties and Values
• How to get the Power Automate flow run id