How to build Power Apps Custom Controls using TypeScript

This article is contributed. See the original author and article here.

I recently learned about 2 exciting ways that you can use your coding skills to extend the functionality of the Power Platform. The 2 ways:

Using your experience of working with APIs to build custom connectors that allow Low Code Applications to connect to external and your favorite data sources

Tools & Concepts: VS Code, Power Platform CLI (pac), Postman, GitHub, APIs

[Focus for this blog] Bringing in your coding skills to build custom controls that will be deployed to the Dataverse to be accessed by citizen developers as drag-and-drop controls for their applications. Learn why you should build custom controls in this 2-minute video:

Tools & Concepts: VS Code, Power Platform CLI (pac), PowerApps Component Framework (PCF), TypeScript, Browser-debugging, Power Platform Tools Extension

Steps to get you started

Good News! Join our LinkedIn community for frequent updates on different ways to use your developer experience & skills to improve the Power Platform.

1. Get yourself a free M365 Developer Account

To access an environment on Power Platform for you to deploy your control, you would need to sign in using a work account. If you already have one, drop to step 2, but if not, click join now on the M365 Developer Program page to create a free E5 Developer Subscription, which will allow you to create your own sandbox and you will forever be able to develop solutions for the Power Platform
Step-by-step to create a free work account

2. Initialize a Custom control

Just like any other developer project, you need to initialize the control-project and you will use the power platform CLI directly on your VS Code terminal, i.e.

pac pcf init --name Control'sName --namespace NameSpace --template TemplateType

Testing will be done on the PowerApps Component Framework Test Environment rendered on your browser, and you can use available browser-debugging tools as well

3. Walkthrough sample TypeScript Code to implement a simple control

Implement your control’s functionality by adding TypeScript code. Watch this short video as I briefly take you through the code that renders a simple Hi [UserName] control. Depending on your skill-level, you can build simple controls such as this one, or more complex ones

4. Deploy Control or Submit it as an Open-Source Sample

Option 1: If you would like to use the control in your own Power App, or perhaps you built the control for a specific organization to utilize for their solutions, you would ideally deploy it to the organization’s environment. Note that every developer with access to that environment will be able to use your control. Watch this short video as it shows how to deploy your control to a specific Dataverse environment.

Option 2: You can build custom controls and submit them to the PCF Gallery. This way, citizen developers from across the world can find your control and import it to use in their solutions.