Getting started with TypeScript

TypeScript is an open-source programming language developed and maintained by Microsoft.

TypeScript adds Type support to JavaScript, which makes sure type checking is done resulting in fewer bugs, adds autocomplete supports in the TypeScript editor, supports Object Orientation and structuring and packing of the code, etc.

The code written in TypeScript transpiles to JavaScript by TSC i.e. TypeScript Compiler.

The easiest way to install TSC is to install it as a Node.js package using NPM i.e. Node Package Manager at the command line.

Download and install Node.js first if it is not already installed.

Make sure to include Node.js runtime and npm package manager.

Now to install TSC, open the terminal and type the below command

npm install -g typescript

g makes sure that it is installed globally and not just in the directory from which we are running the command.

There are different editors available for TypeScript

Let us see how to configure TypeScript for Visual Studio Code.

Download link for Visual Studio Code (if not already installed)

Open Visual Studio Code and select the working folder or

in Node.js command prompt, create the directory and open the visual studio code from there

From file explorer in Visual Studio Code, create the new .ts file

Create the typescript file with the extension .ts and add the JavaScript code

To compile the TypeScript code, open the integrated Terminal in Visual Studio Code and type

tsc <<FileName.js>>

This creates a new corresponding JavaScript file for the TypeScript file.

To run it use the node command

node <<filename>>

We can also modify the TypeScript compiler’s default behavior by adding tsconfig.json.

Here we have added tsconfig.json file in the project with the following code

Check below link for different compilerOptions

To configure the build, execute Run Build Task…

As we have created the tsconfig.json file earlier, we will be presented with the following option

Select tsc: build to run the build task.

If tsc: watch is selected the compiler will watch for the changes in TypeScript files and runs the transpiler whenever the changes are saved.

To set the build or watch task as default, select Configure Default Build Task from the Terminal menu.

On selecting tsc: build task, tasks.json file is added inside .vscode

This sets build task as default, so now when we run the Run Build Task, we are not prompted to select a task.

This completes the basic environment setup for using TypeScript with Visual Studio Code.

Hope it helps..

Showing Total in Footer in jqGrid.


We recently had a requirement to show total for 2 of our decimal columns in jqGrid.

We need to set the following properties footerrow and userDataOnFooter and the a function on loadComplete of grid

Hope it helps..

Fixed – Grid can not be used in this (‘quirks’) model in jqGrid

We got the above error in an HTML Web Resource which was using jqGrid. The page was working fine in IE 10 browser only in IE 8 we got that error.

The solution was to use the following meta tag inside the HEAD tag of the html page.


More details on this meta tag

Hope it helps.

Fixed – Expected identifier, string or number error in HTML Web Resource in IE.

We recently developed an html web resource which was using jqGrid. The web resource was working properly on machines having IE 10 browser, but got the above error in case of IE 8.

As it turned out extra “,” i.e. trailing comma was the reason for the error.

Removing it fixed the issue. IE 10 was more forgiving.

Hope it helps.

‘_formHierarchy’ is undefined error in CRM 2011


We recently faced this issue while opening one of our entity’s form.

This issues comes if we have specified bracket while defining JavaScript function on form.

For e.g. CheckFinancialStatus()

Changing it back to
CheckFinancialStatus resolved the issue.

Hope this helps.

Sample JavaScript Code to retrieve all the members of a Static Marketing List in CRM 2011


We recently had a requirement to retrieve all the members of a particular static marketing list through Jscript. The difficult part was to fetch all the records in case of more than 5000 records. Here we had to repeatedly check the soap result to see if there are any more records and if so create the fetch xml query in runtime and again execute it till we get all the members.

This particular post was of immense help

// call this function and pass the id of the static marketing list to it
 function GetAllMembers(listGuid)

 _sOrgName = "";
 memberArray = new Array();
 morePages = 'true';
 pageNumber = 1;
 pageCookie = '';

 context = typeof (Xrm) == "undefined" ? GetGlobalContext() : Xrm.Page.context;
 var _sServerUrl = context.getServerUrl();
 if (_sServerUrl.match(/\/$/)) {
 _sServerUrl= _sServerUrl.substring(0, serverUrl.length - 1);



function GetMarketingListMembers(listGuid) {

 fetchOnLoad(pageNumber, pageCookie, listGuid);

for (var i = 0; i < memberArray.length; i++) {

 // Iterates over numeric indexes from 0 to 5, as everyone expects

function fetchOnLoad(pageNumber, pageCookie, listGuid) {

 recordGuid = listGuid;

var sFetch = "<fetch mapping='logical' page='" + pageNumber + "' count='5000' paging-cookie='" + pageCookie + "' version='1.0'>" +
 "<entity name='listmember'>" +
 "<attribute name='entityid' />" +
 "<filter>" +
 "<condition attribute='listid' operator='eq' value='" + recordGuid + "' />" +
 "</filter>" +
 "</entity>" +

_oService = new FetchUtil(_sOrgName, _sServerUrl);
 _oService.Fetch(sFetch, myCallBack);

 function myCallBack(results) {

// add all the member in the array

for (i in results) {

if (morePages == 'true') {
 fetchOnLoad(pageNumber, pageCookie, recordGuid);


function FetchUtil(sOrg, sServer) { = sOrg;
 this.server = sServer;
 if (sOrg == null) {
 if (typeof(ORG_UNIQUE_NAME) != "undefined") { = ORG_UNIQUE_NAME;
 if (sServer == null) {
 this.server = window.location.protocol + "//" +;

FetchUtil.prototype._ExecuteRequest = function(sXml, sMessage, fInternalCallback, fUserCallback) {
 var xmlhttp = new XMLHttpRequest();"POST", this.server + "/XRMServices/2011/Organization.svc/web", false);
 xmlhttp.setRequestHeader("Accept", "application/xml, text/xml, */*");
 xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
 xmlhttp.setRequestHeader("SOAPAction", "");
 if (fUserCallback != null) {
 //asynchronous: register callback function, then send the request.
 var crmServiceObject = this;
 xmlhttp.onreadystatechange = function() {, xmlhttp, fUserCallback)
 } else {
 //synchronous: send request, then call the callback function directly
 return, xmlhttp, null);
 FetchUtil.prototype._HandleErrors = function(xmlhttp) {
 /// <summary>(private) Handles xmlhttp errors</summary>
 if (xmlhttp.status != XMLHTTPSUCCESS) {
 var sError = "Error: " + xmlhttp.responseText + " " + xmlhttp.statusText;
 return true;
 } else {
 return false;
 FetchUtil.prototype.Fetch = function(sFetchXml, fCallback) {
 /// <summary>Execute a FetchXml request. (result is the response XML)</summary>
 /// <param name="sFetchXml">fetchxml string</param>
 /// <param name="fCallback" optional="true" type="function">(Optional) Async callback function if specified. If left null, function is synchronous </param>
 var request = "<s:Envelope xmlns:s=\"\">";
 request += "<s:Body>";
 request += "<Execute xmlns=''>" + "<request i:type=\"b:RetrieveMultipleRequest\" " + ' xmlns:b="" ' + ' xmlns:i="">' + '<b:Parameters xmlns:c="">' + '<b:KeyValuePairOfstringanyType>' + '<c:key>Query</c:key>' + '<c:value i:type="b:FetchExpression">' + '<b:Query>';
 request += CrmEncodeDecode.CrmXmlEncode(sFetchXml);
 request += '</b:Query>' + '</c:value>' + '</b:KeyValuePairOfstringanyType>' + '</b:Parameters>' + '<b:RequestId i:nil="true"/>' + '<b:RequestName>RetrieveMultiple</b:RequestName>' + '</request>' + '</Execute>';
 request += "</s:Body></s:Envelope>";
 return this._ExecuteRequest(request, "Fetch", this._FetchCallback, fCallback);

FetchUtil.prototype._FetchCallback = function(xmlhttp, callback) {
 ///<summary>(private) Fetch message callback.</summary>
 //xmlhttp must be completed
 if (xmlhttp.readyState != XMLHTTPREADY) {
 //check for server errors
 if (this._HandleErrors(xmlhttp)) {
 var moreRecordsXML = xmlhttp.responseXML.selectSingleNode("//a:MoreRecords").text;
 if (moreRecordsXML == 'true') {
 morePages = 'true';
 pageCookie = xmlhttp.responseXML.selectSingleNode("//a:PagingCookie").text;
 pageCookie = pageCookie.replace( /\"/g , '\'');
 pageCookie = pageCookie.replace( /</g , '&lt;');
 pageCookie = pageCookie.replace( />/g , '&gt;');
 pageCookie = pageCookie.replace( /'/g , '&quot;');
 pageNumber = pageNumber + 1;
 } else {
 morePages = 'false';

// get the value of the morerecords

var sFetchResult = xmlhttp.responseXML.selectSingleNode("//a:Entities").xml;
 var resultDoc = new ActiveXObject("Microsoft.XMLDOM");
 resultDoc.async = false;
 //parse result xml into array of jsDynamicEntity objects
 var results = new Array(resultDoc.firstChild.childNodes.length);
 for (var i = 0; i < resultDoc.firstChild.childNodes.length; i++) {
 var oResultNode = resultDoc.firstChild.childNodes[i];
 var jDE = new jsDynamicEntity();
 var obj = new Object();
 for (var j = 0; j < oResultNode.childNodes.length; j++) {
 switch (oResultNode.childNodes[j].baseName) {
 case "Attributes":
 var attr = oResultNode.childNodes[j];
 for (var k = 0; k < attr.childNodes.length; k++) {
 // Establish the Key for the Attribute
 var sKey = attr.childNodes[k].firstChild.text;
 var sType = "";
 // Determine the Type of Attribute value we should expect
 for (var l = 0; l < attr.childNodes[k].childNodes[1].attributes.length; l++) {
 if (attr.childNodes[k].childNodes[1].attributes[l].baseName == 'type') {
 sType = attr.childNodes[k].childNodes[1].attributes[l].text;
 switch (sType) {
 case "a:OptionSetValue":
 var entOSV = new jsOptionSetValue();
 entOSV.type = sType;
 entOSV.value = attr.childNodes[k].childNodes[1].text;
 obj[sKey] = entOSV;
 case "a:EntityReference":
 var entRef = new jsEntityReference();
 entRef.type = sType;
 entRef.guid = attr.childNodes[k].childNodes[1].childNodes[0].text;
 entRef.logicalName = attr.childNodes[k].childNodes[1].childNodes[1].text; = attr.childNodes[k].childNodes[1].childNodes[2].text;
 obj[sKey] = entRef;
 var entCV = new jsCrmValue();
 entCV.type = sType;
 entCV.value = attr.childNodes[k].childNodes[1].text;
 obj[sKey] = entCV;
 jDE.attributes = obj;
 case "Id":
 jDE.guid = oResultNode.childNodes[j].text;
 case "LogicalName":
 jDE.logicalName = oResultNode.childNodes[j].text;
 case "FormattedValues":
 var foVal = oResultNode.childNodes[j];
 for (var k = 0; k < foVal.childNodes.length; k++) {
 // Establish the Key, we are going to fill in the formatted value of the already found attribute
 var sKey = foVal.childNodes[k].firstChild.text;
 jDE.attributes[sKey].formattedValue = foVal.childNodes[k].childNodes[1].text;
 results[i] = jDE;
 //return entities
 if (callback != null) callback(results);
 else return results;

function jsDynamicEntity(gID, sLogicalName) {
 this.guid = gID;
 this.logicalName = sLogicalName;
 this.attributes = new Object();

function jsCrmValue(sType, sValue) {
 this.type = sType;
 this.value = sValue;

function jsEntityReference(gID, sLogicalName, sName) {
 this.guid = gID;
 this.logicalName = sLogicalName; = sName;
 this.type = 'EntityReference';

function jsOptionSetValue(iValue, sFormattedValue) {
 this.value = iValue;
 this.formattedValue = sFormattedValue;
 this.type = 'OptionSetValue';

Hope it helps.

Showing custom warning message on an entity form in CRM


I was searching for a way to show custom warning message in an entity’s form and came across these two helpful posts

For CRM 4 :-

For CRM 2011 : –

Hope it helps.


Showing related entity information in Header as Hyperlink – CRM 2011

We recently had requirement to show the Case Information in one of its related (related) entity’s header. The information should appear as a hyperlink so that users can open the case directly from that entity’s form.

Case entity was having 1-n relationship with this other entity say Entity A and Entity A was related 1-n with Entity B. In Entity A we had moved the lookup of Case in the header. So from Entity A’s form user could click the lookup in header (as lookup appeared as hyperlink in Header) and open the Case.

Now they wanted the similar kind of functionality in Entity B. However as Entity B was not directly related to Case entity it had no lookup or any other field having Case information in it.

So this is what we did :-

  1. Created a new HTML Web Resource.
  2. Added an anchor tag in it.
  3. Used JavaScript to get the Case Information from the lookup of the Entity A in the form.
  4. Dynamically setting the href and innerHTML of the anchor tag so that it provides case information and link clicking on which should open the case record.
  5. Add the Web Resource in the header of the Entity B form.
  6. As we were using JSON here, added the JSON library in the form load.

    Case Information in the header and the hyperlink:-

Sample Code of the HTML Web Resource:-

<html xmlns="">
 <title>Case Information</title>
 <script src="ClientGlobalContext.js.aspx"></script>
 <script type="text/javascript" src="new_json2"></script>
 <style type="text/css">
 font-family: Segoe UI, Tahoma, Arial;
 font-size: 13px;
 text-align: left;

 <meta charset="utf-8">
<body style="background-color: #f7fbff; margin: 10px" onload="GetCaseInformation()"
 <a id="anchorCase" href="#" target="_blank" class="ms-crm-Field-Normal"></a>


 var ODataPath;
 var serverUrl;
 var entityName = "";
 var id = "";
 var entity;

function GetCaseInformation() {

function init() {

 serverUrl = document.location.protocol + "//" + + "/" + Xrm.Page.context.getOrgUniqueName();
 ODataPath = serverUrl + "/XRMServices/2011/OrganizationData.svc";
 if (parent.Xrm.Page.ui.getFormType() == FORM_TYPE_UPDATE ||
 parent.Xrm.Page.ui.getFormType() == FORM_TYPE_READ_ONLY ||
 parent.Xrm.Page.ui.getFormType() == FORM_TYPE_DISABLED) {

// get the lookup control and its guid and entity type
 var value = parent.Xrm.Page.ui.controls.get('new_casemedicalconditionid').getAttribute().getValue();

if (value != null) {
 id = value[0].id.replace('{', '').replace('}', '');
 entityName = value[0].entityType;
 // get the case information

function retrieveRecord(Id) {
 var retrieveReq = new XMLHttpRequest();
 var url = ODataPath + "/" + entityName + "Set(guid'" + Id + "')";"GET", ODataPath + "/" + entityName + "Set(guid'" + Id + "')", true);
 retrieveReq.setRequestHeader("Accept", "application/json");
 retrieveReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
 retrieveReq.onreadystatechange = function () {

function retrieveReqCallBack(retrieveReq) {

 if (retrieveReq.readyState == 4 /* complete */) {
 if (retrieveReq.status == 200) {

 entity = JSON.parse(retrieveReq.responseText).d;
 if (entity.new_CaseId != null) {
 var caseGuid = entity.new_CaseId.Id;
 var caseName = entity.new_CaseId.Name;
 var serverUrl = document.location.protocol + "//" + + "/" + Xrm.Page.context.getOrgUniqueName();
 if (document.getElementById('anchorCase').innerHTML == "") {
 document.getElementById('anchorCase').innerHTML = caseName;
 document.getElementById('anchorCase').href = serverUrl + "/CS/cases/edit.aspx?id={" + caseGuid + "}";



Things to consider while using getServerUrl() in CRM 2011


We recently faced an issue after we configured our CRM 2011 site for SSL\HTTPS.

While using context.getServerUrl() method in our web resources we were getting the url value having http instead of https. And the other issue that we regularly faced was the Access Denied one if we access our CRM server either through localhost or through IP address.

These two wonderful posts talk about how to deal with these issues

getServerUrl() method returns  the url according to the configured values in the Deployment Manager, not based on the url you have used to navigate to the page

and using

var customServerURL = document.location.protocol + “//” + +“/” + Xrm.Page.context.getOrgUniqueName();

Update : It works for on premise scenario only

Check this most helpful post on how to get the server url

Hope it helps

Issues while setting value for the field in Header of the form in CRM 2011


We recently had a requirement to show in header of one of the form, the value from its related entity. So we thought that we will create a new custom field, move it to the header and populate it’s value using JScript in the onload event.

However as we were writing the JScript we realized that the field that is in the header of the form is not accesible using

So the next thought was to add that field in the body of the form as well.

So now we had that field in header as well as in the body. Now when we were setting the value of the field that was in the body, it was getting set properly as expected. But that value was not getting reflected in the same field in the header till we save the form.

We finally used document.getElementById to set the value for the field in the header.

Hope it helps.

querySelector and querySelectorAll – Selectors API


Apart from our usual document.getElementsById and document.getElementsByTagName method to select element from the DOM we can now make use of document.querySelector and document.querySelectorAll .

With them we can use the same selectors that we use in CSS to select elements for styling.

A simple example

    <title>Selectors API</title>
        window.onload = function () {

            // select div element with id myDivId
            var myDiv = document.querySelector("#myDivId");

            // select p element with text "Paragraph 1"
            var paragraph1 = myDiv.querySelector("span>p");

            // select p element having class as p1Class
            var paragraph2 = document.querySelector("p.p2Class");

            // select all p element
            var allParagraph = document.querySelectorAll("div>span>span>p");

    <div id="myDivId" class='divClass'>
        <span><span class='spanClass'>
                Paragraph 1</p>
            <p id="p2" class="p2Class">
                Paragraph 2</p>

More details

Browser supported

Making cross domain call using JSONP (JSON with padding)


Just created a simple html page that uses JSONP to make cross domain call to twitter’s API.

Source Code:-

<!DOCTYPE html>
    <title>JSONP Example</title>

        function getTweets(tweets) {

            var tweetDiv = document.getElementById("tweet");

            for (var i = 0; i < tweets.results.length; i++) {
                var tweet = tweets.results[i];

                // create div element for each result
                var div = document.createElement("div");
                div.innerHTML = "<img src= " + tweet.profile_image_url + "></img> ";
                div.innerHTML += tweet.from_user + " : <b><i>" + tweet.text + "</b></i>";

                // append it to tweet div
<div id="tweet">
<!--Specifying search term and callback function-->
<script src=""></script>


Error: ‘VEMap’ is undefined

If we get the above error while working with Virtual Earth first thing we need to check is whether the internet connection is working or not.

Next thing to check is whether JavaScript is disabled for the browser. And if this is the case, to enable it in case of IE.

Go to Tools à Internet Options à Security Tab

Find the entry Active Scripting and enable it.

Hope it helps.

Get QueryString values in JavaScript


We can make use of the following functions to get the value of querystring parameters through JavaScript

// helper function to get the query string
function Querystring() {

var querystring =,;

var args = querystring.split(‘&’);

for (var i = 0; i < args.length; i++) {

var pair = args[i].split(‘=’);

 temp = unescape(pair[0]).split(‘+’);

 name = temp.join(‘ ‘);
temp = unescape(pair[1]).split(‘+’);
value = temp.join(‘ ‘);
this[name] = value;
this.get = Querystring_get;


function Querystring_get(strKey, strDefault) {
var value = this[strKey];
if (value == null) {
value = strDefault;
return value;

Suppose our current page url is


To get the value for id we’ll do this

var qs = new Querystring();

var idValue=qs.get(“id”, “”);