Home > Dynamics 365 > [Step by Step] Using TypeScript in Dynamics 365 9.x

[Step by Step] Using TypeScript in Dynamics 365 9.x

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.

TS_4

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

TS_5

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

TS_6

  • Paste following statements and save.

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

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

TS_7

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

TS_8

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

TS_9

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

TS_10

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.

TS_13

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

TS_14

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

TS_15

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

TS_16

  • 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).

TS_1

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

TS_3

🙂

 

Categories: Dynamics 365 Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: