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:

image

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:

image

First off, head to getbootstrap.com and download the files.

image

Extract the files, and you will get this structure:

image

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:

image

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);
    $("head").append(_cssref);

    // 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>";

    $("h2.ms-crm-Form").prepend(_innerHTML);
}

 

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:

image

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

image

Enjoy!

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

Xrm.Page.ui.getCurrentControl

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:

setNotification(“message”);

and

clearNotification();

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)
    {
        field.setNotification(controlMessage);
    }
    else
    {
        field.clearNotification();
    }
}

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:

image

Enjoy!

MVP Reconnect

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

Join 617 other followers

Follow Dynamics 365 Wizardry on WordPress.com