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 getbootstrap.com 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);
$("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:
Now, open a Case form, and find your new progress bar rendered as such:
Enjoy!
thatcrm.com 