TypeScript and Dynamics CRM 2013 – Part 2

Last time I gave a brief introduction to getting TypeScript and Dynamics CRM 2013 client extension to play well together. In this post I’m going to describe a way to utilize TypeScript for structuring and modularizing the client extension code.
A great benefit from TypeScript is, that it has semantics and syntax that is similar to that C#. TypeScript has classes with methods, properties and inheritance. There are modules, which are similar to namespaces. However, there are some quirks, that makes TypeScript behave differently to what a C#-coder would expect. Lets get back to those and start with a simple example.

Modularize the code

For this first example, lets recall the code snippet for previous post doing a simple field hide/show. The obvious would be to create a method in a class within a module, like below.

///<reference path="Xrm.d.ts">
module DKCRM {
    class HideField {
        hideField() {
            ...
        }
    }
}

There are two reason why that would not work.

1. The class is internal to the module. Compare it to a private class in C#
2. In CRM form events it is only possible to execute function by name, i.e. a class cannot be instantiated.

Luckily it is simple to fix those to issues. Just add export keyword for the class and add a static method to execute the logics.

///<reference path="Xrm.d.ts">
module DKCRM {
    export class HideField {
        static execute() {
            var instance = new HideField();
            instance.hideField();
        }

        hideField() {
            var phone: string = Xrm.Page.getAttribute('telephone1').getValue();

            if (phone == null) {
                Xrm.Page.getControl('fax').setVisible(false);
            } else {
                Xrm.Page.getControl('fax').setVisible(true);
            }
        }
    }
}

Getting it to work in CRM is then only a matter of uploading the generated JavaScript-file as a web resource and call DKCRM.HideField.execute function from the form event.

TypeScript and Dynamics CRM 2013 – Part 1

This post is intended to be the first in a series of post about using TypeScript with Dynamics CRM 2013. It will focus on the very basics to get started.

TypeScript definition for CRM2013

One might wonder why Microsoft didn’t include a guideline to using TypeScript for writing Dynamics CRM 2013 client extensions. Afterall, TypeScript is a language they invented in an attempt to overcome some of the annoyances of Javascript for .NET developers. And it is an incredibly great attampt, I might add :)
Luckily a TypeScript definition file for CRM 2011 has been created by Damian Sinay (see it here http://crm2011typescript.codeplex.com/). That required only minor reworking to become CRM2013 compatible. The CRM2013 definition file is on GitHub (https://github.com/sduck/Crm2013TypeScript).

Using TypeScript for CRM client extensions

Lets say we want to create a small script, that hides the fax field if phone number is empty. This would pretty much end up in this little code snippet

///<reference path="Xrm.d.ts" />

function hideField() {
    var phone: string = Xrm.Page.getAttribute('telephone1').getValue();

    if (phone == null) {
        Xrm.Page.getControl('fax').setVisible(false);
    } else {
        Xrm.Page.getControl('fax').setVisible(true);
    }
}

In this simple example there are very little differences between TypeScript and JavaScript. Only the first line with a reference to the definition file and the type definition of the variable sets it out.

However, writing the code reveal one huge benefit of using TypeScript over JavaScript. I had nice intellisense to help autocomplete the code. This alone makes writing code faster and finding the right  methods easier.

Deploying a TypeScript client extension

When writing TypeScript, the output will eventually be a JavaScript file. Depending on your IDE and setup this file will be created automatically and it will be named the same as the TypeScript-file. Only will the extension of the compiled file be .js.

Locate that file and deploying to CRM2013 is just as deploying any other JavaScript extension.


In the next post, I will be discussing how to use TypeScript for structuring the code.