Part 2: Setting up development environment and Custom Component Project

The article is a part of series of blog posts on Custom component framework topic. In order to get the context I would suggest to get started from beginning.

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.

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

Dowload the LTS one. You can even use the current version (12). Once 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. Install it.

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

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>

An explanation is in order here.

“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.