You are currently browsing the tag archive for the ‘JScript’ tag.

Continuing with THIS series of posts, today we are looking at using the Flot JScript library for visual rendering of data. Flot is a great little library for charting. It is available from HERE.

The Flot library has a few graphing variations available, and we can easily change the CSS as needed to make it look even more appealing. The idea is that presenting information visually will make our users so much faster, and more inclined to quickly glance to see what’s going on, rather than deep dive.

In this short article we focus on the Flot pie charts. What we will achieve is this:


Notice how, for the purpose of this demo, I have left the available rendering option buttons on the form. You can change the rendering type as needed, until you figure out which is the best to use. I like to do that with customers because giving them choice empowers them and engages them in the discussion.
Read the rest of this entry »


Keeping in line with a previous article about using the Bootstrap library with Dynamics CRM, in this article we will look at using another JScript library.

This mini-series of articles relates to the topic I’ve presented at eXtreme CRM this year. It all revolves around visual presentation at the record level. While Dashboards are nice, humans are “visual animals”, and as such, presenting information visually at the record level is not only eye-candy, but also can make a user of the system more productive, and more eager to adopt a new tool.

The previous articles in this mini-series are:

HTML Web Resource in Dynamics CRM

HTML Web Resource in Dynamics CRM [2]

Bootstrap Progress Bar in CRM

We’re going to be looking now at Easy Pie Chart. There are two reasons I like this library. First off, it is very light. Second, I like the animation. Makes it more “look here first” like. I’ll be using it as is, with no visual customizations, but if you want, feel free to tinker with the CSS.
Read the rest of this entry »

With Dynamics CRM 2013 now we have even more opportunities to play with the UI. We have more choice with regards to layout, more choice with regards to user experience, and implicitly more opportunities to make it better for the user. But, once we start to analyze the user experience, we could find that we’re missing a lot by not being able to do everything we can do on a regular web page. Or, can we?

NOTE: some of the items presented in this post are not officially “supported”, and should only be used with that in mind.

A previous post was describing the proper way to use jQuery in the context of Dynamics CRM. See more details HERE.

In this post I’m going to be talking about Twitter Bootstrap, and how we can leverage it in the context of Dynamics CRM 2013. We want to add a progress bar to our Case form, to show graphically how far we are in resolving this case. It should look something like this:


First off, head to and download the files.


Extract the files, and you will get this structure:


Go in the css folder, and get the bootstrap.min.css file. also, from the js file get the bootstrap.min.js file. We will be using the min files for better performance.

Now, in your CRM environment, load these as web resources.

In addition, create a new JScript web resource that will hold our custom script. Let’s name this one new_bootstrap_case as we want to make our modifications on the Case form. The structure should look as follows:


Now, let’s add the following script to the OnLoad of the Case form:

function AddProgressBar() {
    // add the CSS reference

    var _css = "WebResources/new_bootstrap_css";
    var _cssref = document.createElement("link");
    _cssref.setAttribute("rel", "stylesheet");
    _cssref.setAttribute("type", "text/css");
    _cssref.setAttribute("href", _css);

    // add the progress bar
    var _innerHTML = "";

    _innerHTML += "<div class=’progress progress-striped’ width=’100%’>";
    _innerHTML += "<div class=’progress-bar progress-bar-success’ role=’progressbar’ aria-valuenow=’40’ aria-valuemin=’0′ aria-valuemax=’100′ style=’width: 40%’>";
    _innerHTML += "<span class=’sr-only’>40% Complete (success)</span>";
    _innerHTML += "</div>";
    _innerHTML += "</div>";



Basically, we are doing two things here:

In the first part, we are adding our CSS web resource to the page. This will help us with the rendering of the progress bar.

The second part of the function simply generates the HTML required to render the progress bar. In this example I am setting it to 40% by default, but you can define the value as needed based on your current business rules.

Your form properties will look as such when done:


Now, open a Case form, and find your new progress bar rendered as such:



Just a quick note, for those implementations taking advantage of script customizations, if you are using


when upgrading to UR2, remember to check your scripts. This method is now deprecated.

For more details see HERE.

Happy scripting!

This is another new feature of Dynamics CRM 2013. While in previous versions, we used to use JScript alerts to bring up field specific messages on forms, now we have two new functions available:




So how do we use then, and what do they do?

First off, let’s bring up a message on a field if a condition is met, or clear it otherwise:

function SetCustomNotification(controlName, controlMessage)
    var field = Xrm.Page.getControl(controlName);
    var condition = [evaluate your condition here];
    if (condition)

Pass in strings for controlName and controlMessage.

Set your function on either the onChange event of the field, or on the onSave event of the form. If you set it on form save, it’s a good idea to stop the save if the condition fails and the message comes up.

And the end results is your custom message showing as below:



This quick snippet comes in handy every now and then, and now it’s also tested for Dynamics CRM 2013.


I have a bunch of organizations, and a set of Organization Types. Let’s say, we have various client types, with various SLA’s.

In the Case entity, I want to show only the Organizations of specific type(s), that I can support through Cases.


First off, create a new web resource if one is not already created for the Case entity.

Then, from the form load event, call this function which uses addPreSearch.

function preFilterLookupOrganization() {   
    Xrm.Page.getControl("control_name").addPreSearch(function () {

This is from the SDK:


Use this method to apply changes to lookups based on values current just as the user is about to view results for the lookup.


Type: Function to add.
This method is only available for Updated Entities.

The argument is a function that will be run just before the search to provide results for a lookup occurs. You can use this handler to call one of the other lookup control functions and improve the results to be displayed in the lookup.


Next let’s build the handler. We’re building the filter query and add the filter to our control as such:

function addLookupFilter() {
    var myControl = Xrm.Page.getAttribute("control_name").getValue();

    if (myControl != null) {
        fetchXml = "<filter type=’and’><condition attribute=’customertypecode’ value=’1′ operator=’eq’/></filter>";

Now, it’s all in the filter, and the current example only looks for one specific Organization type. You can build that fetchXml filter as complex as needed, either by pulling if from an advanced find, creating it by hand, or using a 3rd party tool.


I’ve been asked recently about namespacing in JScript, if I use it, and how I use it. This is a loaded question, with no simple answer. I probably never paid too much attention to all the details around this topic, and I am guilty of mixing styles and sometimes not even using namespacing. I guess it all depends on how fast I need something done, and how much time I have to plan this process. But here’s a quick overview.

First off, not using namespacing. We all know the risks, as we can easily have another dev coming in and creating a function with the same name. If you reference all libraries in your form, then how is the system going to know which one to use? Here comes namespacing.

A function without namespacing can look like:

function foo()


   alert(“Here we go!”);


By default, JScript is not a language built with the complexities of the .NET framework (as an example). So, in order to introduce namespacing, we have to a little manual work. Don’t worry, you can keep it simple.

Static Namespacing

Now, probably the simplest way to namespace is using static namespacing. With this approach, you better have a clear plan from the beginning, and stick with it to the end. Renaming a namespace can be a painful process.

The simplest way to define a namespace is using a syntax similar to the following:

var myNamespace = {};

Next step, you define your variables and functions:

myNamespace.CONSTANT = “AAA”;

myNamespace.myVariable = 0;

myNamespace.myFunction = function()


   alert(“The value of my constant is: “ + myNamespace.CONSTANT);


so now you see how renaming the namespace can become a tedious job (I don’t ever trust the find and replace).

This is the format used in the Dynamics CRM 2011 SDK examples. It is effective, simple to read, and can also be nested as such:

myNamespace = {};

myNamespace.mySubNamespace = {};

You check for the namespace at the beginning and create it if it’s missing:

if(typeof(myNamespace) == “undefined”)

{ myNamespace = {}; }

Object Literal Notation

Another approach is using object literal notation. Now, this makes renaming the namespace later less of a tedious job. The syntax would look like so:

var myNamespace = {


   myVariable: 0,

   myFunction: function() {

      alert(“The value of my constant is: “ + myNamespace.CONSTANT);



This can take a little bit of getting used to, but once you get the hang of it it’s just as simple.

Next you can go into patterns, but that is the subject of another article.

Dynamic Namespacing Approaches

In this approach, you create your namespace as before, but you use the context:

var myNamespace = {};



   var CONSTANT = “AAA”;

   var myVariable = 0;

   context.myFunction = function()


      alert(“Alert message!”);



This is the approach used in some popular frameworks out there. The advantage is that you can set the context to the global object easily.

Nesting Namespaces

Now, if you think .NET, you will be thinking, I need to nest namespaces. Something similar to Microsoft.Xrm.Sdk.Messages; but in JScript, how do I go about it?

You can simply declare your nested namespaces as follows:

var myNamespace = {};

myNamespace.subNamespace = {

   myFunction: function(){

      alert(“Your message here!”);



You would call this as such:


At this point I would look at patterns, and there are some good patterns out there to investigate (AMD, CommonJS, MV*, etc.)


Microsoft Business Solutions MVP

Reviewed Book

Implementing Microsoft Dynamics 365 for Finance and Operations

Implementing Microsoft Dynamics 365 for Finance and Operations

Reviewed Book

Microsoft Dynamics 365 Extensions Cookbook

Microsoft Dynamics 365 Extensions Cookbook

Check out my Book

Microsoft Dynamics CRM 2016 Customization - Second Edition

Microsoft Dynamics CRM 2016 Customization - Second Edition

Check out my Book

Microsoft Dynamics CRM Customization Essentials

Microsoft Dynamics CRM Customization Essentials

Check out my Book

Microsoft Dynamics CRM 2011 Scripting Cookbook

Microsoft Dynamics CRM 2011 Scripting Cookbook

Reviewed Book

Microsoft Dynamics CRM 2011: Dashboards Cookbook

Microsoft Dynamics CRM 2011: Dashboards Cookbook

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 466 other followers

Follow TheCRMwiz on