How To: Create A Custom Component with PowerApps Custom Framework

Before building a custom component with PowerApps Component Framework make sure that you have Node.js, Visual Studio Code (or another IDE), and the most recent version of the PowerApps CLI downloaded. If you are missing any of these items please refer to Part 1 of this blog series which walks you through the steps of downloading each of these components.

In addition to the items listed above, a folder will be needed to contain the project workspace of the PowerApps component that is being developed. This blog post will start assuming that this folder has been created prior to running through these steps.

Step 1: Open up Command Prompt as an Admin

1. Navigate to the directory that will hold your project.
   • If you need help navigating through directories in Command Prompt please refer to this DigitalCitizen blog post.
2. Run the following command to create the PCF project:
   • pac pcf init –namespace <specify your namespace here> –name <put component name here> –template <component type>

3. After the project gets created successfully be sure to run npm install to install all of the project dependencies. The response will be something like the below image:

Step 2: Open Up Visual Studio Code

1. Open up your project directory from Visual Studio Code.
2. Open up the folder named *YOURPROJECT* and underneath it open up the generated folder. Inside you will find a file called ControlManifest.Input.xml. This is where the files containing the code will be referenced from, and provides the details of the component.

Inside of the ControlManifest.Input.xml file there are a few things to note:

1. Inside of the resource tag towards the end of the file are 3 child tags:
   • Code – Contains the relative path to the file that will contain the code
   • CSS – Contains the relative path of the CSS file that the custom control will use
   • ResX – Contains the relative path of the ResX file that contains the localized string
2. Do not change the control-type of the control tag at the top.
3. The name, display-name-key, and description-key values are customizable and these are what will show to the end user when the components get installed.

Step 3: Implement the Custom Logic

This blog post won’t dive into how to actually write the logic for a PowerApps component, however it will explain the out-of-the-box methods that are used to build the component in TypeScript.

For more information about TypeScript, please refer to the TypeScript website.

Out of the box the following methods are inside the index.ts file:

1. init – the first method that the component invokes when running
2. updateView – method that gets invoked when the property bag is changed.
3. getOutputs – method called before receiving data
4. destroy – Any cleanup code that is needed

Step 4: Run the Custom Component in a Sandbox

1. Right click on the node_modules object in the explorer

1. In the Terminal window that opens type:
   1. npm run build
2. Then enter:
   1. npm start
   2. If you get blocked by a firewall, select Allow Access to let the IDE run the project framework.

This should open a web browser to a local IP address hosted on your machine. The browser window will contain your component and enable you to easily play around with the width/height as well as test the aspects of your component.

Summary

After reading this blog post, you should have an understanding of how to begin developing and testing a custom component with PowerApps Component Framework. Look our for further blog posts on how to install the custom component inside of an Office 365 tenant!

Further Sources

• Canvas PowerApps Custom Component for Navigation