How to build Power Apps Custom Controls using TypeScript
Tags: typescript, powerfuldevs, beginners, tutorial
Published: 2022-11-28 07:07:31

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](https://techcommunity.microsoft.com/t5/educator-developer-blog/capstone-project-build-an-independent-publisher-connector/ba-p/3655738?WT.mc_id=academic-82025-juliamuiruri) 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
{% embed https://youtu.be/3BPHAOyJnRs %}
 
## Steps to get you started
**Good News!** Join our [LinkedIn community](https://www.linkedin.com/groups/9248828/) 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](https://developer.microsoft.com/en-us/microsoft-365/dev-program/?WT.mc_id=academic-82025-juliamuiruri) 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](https://learn.microsoft.com/en-us/office/developer-program/microsoft-365-developer-program?WT.mc_id=academic-82025-juliamuiruri)

### 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
```
{% embed https://youtu.be/UMVB_t71kCM %}

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

![PCF Test Environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3em6jnsf3q6hq3utgss.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
 
{% embed https://youtu.be/NTq8xxNqUDQ %}

### 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.

{% embed https://youtu.be/xy0dh1VLgJ4 %}

Option 2: You can build custom controls and submit them to the [PCF Gallery](https://pcf.gallery/). This way, citizen developers from across the world can find your control and [import it](https://github.com/microsoft/PowerApps-Samples/tree/master/component-framework#how-to-run-the-sample-components) to use in their solutions.

## Resources you should check out
1. Check out the [Build a Power Apps Component](https://learn.microsoft.com/en-us/training/modules/build-power-app-component/?WT.mc_id=academic-82025-juliamuiruri) module to learn more on these concepts.

1. [Microsoft Power Platform Developer Documentation](https://learn.microsoft.com/en-us/power-platform/developer/?WT.mc_id=academic-82025-juliamuiruri)

1. [Power Apps Component Framework Documentation](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/overview?WT.mc_id=academic-82025-juliamuiruri)

1. [Power Apps for developers documentation](https://learn.microsoft.com/en-us/power-apps/#pivot=home&panel=developer/?WT.mc_id=academic-82025-juliamuiruri)