If you are looking for a place to get started with PowerApps Component Framework (PCF) – don’t worry, I have got your back on this.

Let’s begin with setting up the environment where we will see the components needed for the PCF development, how to install them, run the default application, debug it in the browser. Getting things booted up.

You will require a couple of items to be installed such as npm (node package manager), Powerapps CLI, .net framework 4.6.2 Developer pack, IDE of your choice to start creating your first custom control.

Node.js

Node.js is an opensource and cross-platform runtime environment for executing Javascript code outside of your browser(allows you to run javascript in your machine). It is used to build Highly-scalable and real-time applications.

You can install Node from below link

https://nodejs.org/en/

NPM – Node Package Manager

npm is a package manager for the JavaScript programming language. It is the default package manager for Node.js. So once you get Node.js installed it automatically installs npm for you.

For better understanding you could match npm with NuGet package manager – But there are a couple of differences. It consists of a command-line interface. Which is loved by CLI users.

https://www.npmjs.com/

You would require .net framework 4.6.2 Developer pack, which you could install from below link

https://dotnet.microsoft.com/download/dotnet-framework/net462

What is PowerApps CLI? Why do I need it?

Microsoft PowerApps CLI is a command-line interface. which is used to create custom components where you can create, debug and deploy using PowerApps component framework(PCF).

PowerApps CLI is also the first step towards a comprehensive ALM(Application Lifecycle Management) for PowerApps and Dynamics 365 for Customer Engagement apps

You can install Powerapps CLI from below link

https://aka.ms/PowerAppsCLI

To Make sure NPM and Powerapps CLI is installed

open command prompt and type

  • “npm -v” To check if npm is installed.
  • “pac help” To check if pac is installed and what version of Powerapps CLI is used.

Code Editor

You can install code editor of your choice. But personally would prefer installing visual studio code or visual studio 2017 or higher because if you run into problems you will be able to contact the Microsoft team for your backup.

Please make sure to install the .Net core 2.2 SDK before installing Visual Studio code.

https://dotnet.microsoft.com/download/dotnet-core/2.2

To create a PCF component project create a folder in your local directory. For example, let’s name our control as SampleInputControl

open the local directory folder that you created and type “cmd” in the command bar.

or you can use cd –path to move to the created folder directory from the command line.

To create a new project run the below code

pac pcf init --namespace <specify your namespace here> --name <put component name here> --template <component type> 
pac pcf init --namespace PCFControls --name SampleControl --template field
  • pac – Calling the PowerApps command-line interface to kick start
  • pcf init – To initialize the PCF to create a project
  • namespace – namespace that you want to provide for your custom control. I have Used PCFControls.
  • name – It is the name of the custom control and the component you are about to create.
  • Template – We have got two templates for now “field” and “dataset”.

Note – PCF currently allows us to create custom controls for field or a view.

Run “npm install” or “npm i” to install the node modules

Once done you can open the project in any IDE of your choice, use “npm start” to run your project …

Tada, there you go, amazing, isn’t it?

Hope this helped you. Add your comments if you have any challenges in the above steps feel free to reach me out. I’ll respond as soon as possible.

Let me know your feedback in the comments section. Also, kindly don’t forget to like and share.

Happy Learning!!!

References

  1. node & npm – https://nodejs.org/en/
  2. PowerAppsCLI – https://aka.ms/PowerAppsCLI
  3. .net framework 4.6.2 Developer pack – https://dotnet.microsoft.com/download/dotnet-framework/net462
  4. .Net core 2.2 SDK for VS code. –https://dotnet.microsoft.com/download/dotnet-core/2.2

You can refer the below link for a detailed explanation on the control manifest file.

PCF – Exploring ControlManifest File In Detail

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