I’ve been working with TypeScript and Powerapps for quite a bit, but never built up the system myself from scratch, and wanted to take a shot at it. I’m surprised when I hear people scoff at this idea since it can ease your workload substantially, reducing bugs and complexity in code.

To get started, how does this look in a “barely there” implementation?

For this work, you’ll need VsCode.

Install TypeScript

To install TypeScript, open a Terminal in VsCode and execute the following command.

npm i typescript --save-dev

Initialize TypeScript

Now we are going to initialize our folder to use TypeScript, execute the following command to set up your environment

tsc --init

Initialize Xrm Types

You’ll be wanting to interact with PowerApps and, as a result, need to know things like the “ExecutionContext” as outlined here in this example. In order to do this, you can install the Xrm types library into your project.

npm install @types/xrm --save-dev

You should see a file called tsconfig.json now show up in your folder.

Configure your Application

In your folder structure, you are going to create a directory called “entities” and another one called webresources\js (js being a sub-directory). At this point, your high-level directory structure should look something like this.

Open up the tsconfig.json file. Here, we are going to update what is included in the file generation and where the output of these files will go.

What this says;

1. Include all ts files when we build our solution.
2. Output all files into webresources/js

Writing Code

At this point, our environment is set up and ready to go. To see things in action, we are going to generate an onLoad EventHandler for Account and Contact, respectively, to use. Create a new ts file for the account and contact, respectively.

Next, I’m going to add the following code snippets into each file

namespace AccountForm {
/**
* This function is triggered when the form loads.
* It retrieves the account's name and logs it to the console.
* @param executionContext - The execution context of the form.
*/
export function onLoad(executionContext: Xrm.Events.EventContext): void {
const formContext = executionContext.getFormContext();
const nameAttribute = formContext.getAttribute("name");
const accountName = nameAttribute ? nameAttribute.getValue() : null;
console.log(Account Name: ${accountName});
}
}

In this example for account, we are outputting the name of the account to the console, in the onLoad function. The same applies to our contact, as indicated below.

Once you’re all done with that, all you need to do is run “tsc”, and your application will build. In your WebResources\js folder, you should see 2 additional JavaScript files, one for account and contact, respectively.

When you open them, you will see all the TypeScript code now in JavaScript. These output files are what we are going to upload to PowerApps. You will upload these files as you would any other JavaScript resources, and when you’re done, you’ll add our onLoad event handler to your form so they are triggered when the form loads.

Don’t forget that when connecting your JavaScript library, you don’t omit the Namespace from your TypeScript file.

When you go to the Contact Form, you’ll see our onLoad event triggered, showing our First Name in the console.

That is the basic use case for using TypeScript and JavaScript together.

Is this production-ready? Not a chance – I’ve barely saved myself any time, and if I look at what is currently there, I’d be introducing a number of the same issues we have now with Web Resource files.

But now you know you can do it.