How To: Start Working with the PowerApps Component Framework

The PowerApps component framework (PCF) lets developers build re-usable code snippets called “Components” for model driven and canvas applications. The components can be used in multiple applications to enhance the user experience and drive a business use case. One of the examples I’ve run into is using the map functionality in the PCF to reuse maps of sales territories across different organizational applications and dashboards. The advantage there is that you can tie the component to the dataset behind the scenes and save yourself hours of work.

This blog post will run through the process of getting you started with the PCF, for more information on building a component with the PCF look out for part 2!

Step 1: Install Node.js

Node.js is a JavaScript framework designed to allow you to build scalable applications by asynchronous calling methods as well as giving you access to a wide variety of additional packages.

1. Download the current version of Node.js here.
   1. Note: Make sure you download the correct version for the computer you are using.
2. Open the MSI file that gets downloaded as a part of the installation.
3. Run through the installer. Selecting the defaults is fine for our purposes.

For more information on Node.js check out their About page here.

Step 2: Install Visual Studio Code

Visual Studio Code is a light-weight IDE that is all we need to develop PowerApps components. Using Visual Studio or another IDE would work as well, but I’ve found that Visual Studio Code is good at what it does and pretty light-weight for its functionality.

1. Download Visual Studio Code from here.
2. Run the installer that gets downloaded. Selecting the defaults is fine for our purposes.

For more information about Visual Studio Code click here.

Step 3: Download the PowerApps CLI

PowerApps CLI is a basic command line editor that gives you more ALM tooling when working with the PCF.

1. Go to this page.
2. Select “Install PowerApps CLI”. See image below.
3. Run the installer that gets downloaded.

Step 4: Update PowerApps CLI

This step is technically optional, but it’s always good to verify that you have the latest version of the PowerApps CLI. In order to verify, do the following:

1. Open the PowerApps CLI
2. Navigate to the directory that PowerApps CLI is stored in
3. Run the following command:

pac install latest 

Common Issues

One of the common issues that I’ve found when running users through the process is that sometimes users will need to install part of the .NET Framework to get started. If you are running into issues try downloading .NET Framework Developer Pack from here.

Next Steps with the PowerApps Component Framework

Now you are all setup to start using the PCF to develop reusable components. Look out for a follow up post on building your first component!

Further Reading

• Microsoft PowerApps Component Framework Overview
• Multi-Line History Field Component Example