Goal

To use TypeScript to write form scripts for model-driven Power Apps forms.

Assumptions

  • This article assumes you have access to an instance of a Dataverse database and Power Apps
  • Basic understanding of form scripting with JavaScript
  • Reader is using VS Code
  • Reader has NPM installed: NPM

Steps

First, create a new directory on your local machine called PPTypeScript.

Open this directory and create 2 sub-folders called js and ts.

So your folder structure should look like this:

- PPTypeScript
    - js
    - ts

Now open the PPTypeScript directory in VS Code.

Within the PPTypeScript directory create a file called tsconfig.json.

Copy the following JSON into this file and save it:

{
    "compileOnSave": true,
    "compilerOptions": {
        "outDir": "js",
        "target": "es5",
        "sourceMap": true
    },
    "include": [
        "./ts/**/*"
    ]
}

Now we need to create a package.json file, to do this simply run the following command in the terminal in the PPTypeScript directory:

npm init

Use the default suggested or empty values when asked by the terminal. This will result in a new package.json being created in the project’s root directory:

{
  "name": "pptypescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Delete the following line from the package.json file:

"main": "index.js",

Next, we need to install the XRM NPM package which can be found here:

XRM NPM Package

To do so, within VS Code open a new terminal and type:

npm install --save @types/xrm

This will create new sub-folder in PPTypeScript called node_modules as well as a new JSON file called package-lock.json.

Under the ts directory create a new file called Contact.ts. This is where we are going to write our TypeScript code.

In Contact.ts copy the following code snippet:

namespace NDXC {

    export function onLoad(executionContext: Xrm.Events.EventContext) {

        let formContext = executionContext.getFormContext();

        alert("Hello TypeScript! The Contact's GUID is: " + formContext.data.entity.getId());
    }
}

We’ll register the above function on-load of the Contact form, it will simply display an alert to the user that also contains the record’s GUID.

Model-driven apps still require that we leverage JavaScript for form scripting, but TypeScript transpiles down to JavaScript, so we’ll do that now.

In the toolbar along the top of VS Code, click Terminal and then Run Build Task…

You’ll be presented with the following:

Run Build Task

Select the option:

tsc: build - tsconfig.json

Doing so will transpile your TypeScript into JavaScript, you should see 2 new files created under the js directory called:

  • Contact.js
  • Contact.js.map

We are interested in Contact.js, it should look like the below snippet:

var NDXC;
(function (NDXC) {
    function onLoad(executionContext) {
        var formContext = executionContext.getFormContext();
        alert("Hello TypeScript! The Contact's GUID is: " + formContext.data.entity.getId());
    }
    NDXC.onLoad = onLoad;
})(NDXC || (NDXC = {}));
//# sourceMappingURL=Contact.js.map

Now we need to create our script web-resource in Power Apps, so go ahead and do that now (remember to publish). My web-resource looks like the below:

Form Script Creation

Once your JavaScript web-resource has been created, we need to register our function on the On-Load event of the Contact form. Navigate to your form and open it in the Classic editor.

Select Form properties and add your new library:

Add library

Then, in the Event handlers, select Add and then configure it as follows (remembering to check Pass execution context as first parameter):

Handler properties

Click OK and then OK again on the Form Properties screen. Save the form, and publish.

Now navigate to one of your existing Contact records and open it up, you should be presented with an alert similar to the following:

Alert

Congratulations! You’ve successfully deployed a JavaScript form script to your model-driven app!

0 Comments

Leave a reply

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

©2021 TDG - We Are Back Baby!

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending
or

Log in with your credentials

or    

Forgot your details?

or

Create Account