If I were to write everything out on integrating TypeScript and PowerApps in one post, it would drag on forever, and I’m not too keen on that. That said, I don’t know how many parts there are going to be to this implementation, and am going where it takes me.

Using the client-side code in TypeScript.

The biggest thing we do in client-side JavaScript is interact with the form, and the biggest pain can often be the lack of intellisense and structure. In our previous post, we installed the latest XrmTypes into our solution (and didn’t use them).

For reference, to install all Xrm types into your solution, you’ll use the following syntax.

npm install @types/xrm --save-dev

From here, you’ll now have access to instantiate calls from the client just as you would if you were writing them with JavaScript.

Retrieving Records

I won’t go through every Xrm.WebApi call, but in the following example, you can see how I retrieve the accountid ID from our contact page and simply log it to the console for later work. If you are not familiar with the .then syntax, I’d definitely recommend reading up on Promises as an async implementation framework.

const accountid = formContext.getAttribute("parentcustomerid")?.getValue()?.[0]?.id;

        console.log(`Account ID: ${accountid}`);

        Xrm.WebApi.retrieveRecord("account", accountid, "?$select=name").then(

            function (result) {                        

console.log(`Account Name: ${result.name}`);

            }

        );

Just like in JavaScript, I’m interacting with the API in the same way.

Interacting with the UX

Getting data behind the scenes is one thing, but perhaps what we want to do is interact with the UX a bit more. Just like the XRM JavaScript Framework, all implementations are made available to you, including form notifications.

In the below example, I go a bit further with our code and push the notification to the client so we can see the information retrieved.

        const accountid = formContext.getAttribute("parentcustomerid")?.getValue()?.[0]?.id;
        console.log(`Account ID: ${accountid}`);

        Xrm.WebApi.retrieveRecord("account", accountid, "?$select=tickersymbol").then(
            function (result) {
                        console.log(`Account Name: ${result.name}`);
                formContext.ui.setFormNotification(
                    `Ticker Symbol: ${result.tickersymbol}`,"INFO", "tickerSymbolNotification1")
            }   
        );

And like that, I have client-side interactions being written from VsCode.