Rajeev Pentyala – Microsoft Power Platform

What is TypeScript:

• TypeScript extends JavaScript by adding types to the language. TypeScript sits as a layer on-top of JavaScript, this layer is the TypeScript type system.
• In a layman terms, TypeScript allows C# way of writing jScript.

In this article, lets see how to leverage TypeScript capability while writing client scripts in Dynamics 365.

Key Notes:

• TypeScript’s file extension is ‘.ts‘.
• Dynamics 365 cannot understand TypeScript, it only understands jScript (i.e., .js)
• So we write the script in TypeScript, and use ‘Transpile’ technique to convert TypeScript to jScript.
  • Transpiling is taking source code written in one language and transforming into another language. In our case its from .ts to .js
  • Don’t worry about Transpiling as Visual Studio will take care of this.

Now we know the basics of TypeScript, lets get started.

Setting up project in Visual Studio:

• Create a new Web Site project in Visual Studio.

• As we are going to Transpile TypeScript files to jScript files, create a new folders ‘ts’ and ‘js’ for code manageability.
  • ‘ts’ folder is where we write the TypeScript, ‘js’ folder is where the transpiled jScript resides.

• Next, to transpile TypeScript to jScript, add a new json file with name ‘tsconfig.json‘.

• Paste following statements and save.

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

• Your ‘tsconfig.json’ should look like below.

• If you observe the ‘tsconfig.json’ statements, they state that whenever you save ‘.ts’ file compile (i.e., compileOnSave’) and save the transpiled ‘.js’ file under ‘js’ folder (i.e., outDir).
• Next, lets install the ‘xrm’ npm package for intellisence to your project. Refer this article for more details.

• Run ‘–save @types/xrm‘ command.

• You would see a new folder ‘node_modules’ with ‘index.d.ts’ file.
  • If you are wondering what is ‘index.d.ts’, ‘*.d.ts’ files are used to provide typescript ‘Type’ information.

Write your first TypeScript file:

Now that we got the project setup, lets write a simple ‘TypeScript’ file with ‘onload’ function on ‘Contact’ entity.

• Add a new file ‘contact.ts’ under ‘ts’ folder.
• Lets adding following basic structure contains ‘interface’ and ‘onload’ function.
  • A namespace is a way that is used for logical grouping of functionalities. It allows us to organize our code in a much cleaner way.

• Now, lets extend the onload function by reading Contact Name from ‘name’ field and popup.

• Lets extend further by registering ‘onchange’ event on ‘Contact Name’ field.

• Save the ‘contact.ts’ file and you would get transpiled ‘contact.js’ jScript file under ‘js’ folder.

• Following the TypeScript code if you want to use.

namespace Pract {
export function onload(executionContext: Xrm.Events.EventContext) {
let formContext = executionContext.getFormContext();

// Define ‘String Attribute’ variable to read Contact Name Attribute
let attrContactName: Xrm.Attributes.StringAttribute;
attrContactName = formContext.getAttribute<Xrm.Attributes.StringAttribute>(“firstname”);

// Register onchange event
attrContactName.addOnChange(this.contactName_onchange);

// Read Attribute Value
let contactName = attrContactName.getValue();

var alertStrings = { confirmButtonLabel: “Yes”, text: contactName, title: “Onload Event” };
var alertOptions = { height: 120, width: 260 };
Xrm.Navigation.openAlertDialog(alertStrings, alertOptions).then(
function success(result) {
console.log(“Alert dialog closed”);
},
function (error) {
console.log(error.message);
}
);
}

function contactName_onchange(executionContext: Xrm.Events.EventContext) {
alert(“OnChange triggered!”);
}
}

Register and test the script:

• Add the transpiled ‘contact.js’ file as web resource to Dynamics application.
• On ‘Contact’ form register the ‘onload’ event. Convention should be ‘namespace.functionname’ (i.e.,Pract.onload).

• Open the ‘Contact’ record and you would get the ‘Name’ value as pop-up.

🙂