How to build Power Apps Custom Controls using TypeScript

Posted by

This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Community Hub.

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

 

Julia_Muiruri_0-1669376728924.png

 

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.

 

Resources you should check out

  1. Check out the Build a Power Apps Component module to learn more on these concepts.

  2. Microsoft Power Platform Developer Documentation

  3. Power Apps Component Framework Documentation

  4. Power Apps for developers documentation

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.