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/

image

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

image

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

image

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

image

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”

image

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.

 

Advertisements

One thought on “Part 2: Setting up development environment and Custom Component Project

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s