Progress Bar in CRM Forms

With new Dynamics CRM versions 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.

In this post I’m going to be talking about adding a progress bar to our Case form, to show the loading of the form. It should look something like this:

NOTE: some of the items presented in this post are not officially “supported”.

Now, let’s add the following script to the to the form and call it from OnLoad event of the form:

function showLoading() {
        //use it to change opacity of main content
document.getElementById('tdAreas').parentElement.style.opacity = '0.1';
        //use it to hide main content
//document.getElementById('tdAreas').parentElement.style.display = 'none';
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'msgDiv');
newdiv.valign = 'middle';
newdiv.align = 'center';
var divInnerHTML = "";
divInnerHTML += "";
divInnerHTML += "";
divInnerHTML += "";
divInnerHTML += "Please wait…";
newdiv.innerHTML = divInnerHTML;
newdiv.style.background = '#FFFFFF';
newdiv.style.fontSize = '15px';
newdiv.style.zIndex = '1010';
newdiv.style.margin = '0 auto';

newdiv.style.width = document.body.clientWidth;
newdiv.style.height = document.body.clientHeight;
newdiv.style.position = 'relative';
document.body.insertBefore(newdiv, document.body.firstChild);
document.getElementById('msgDiv').style.visibility = 'block';
        //use it to define ms for disable loading
//setTimeout(disableLoading, 500); 
}

function disableLoading() {
if (document.readyState === "complete") {
document.getElementById('msgDiv').style.display = 'none';
document.getElementById(‘tdAreas’).parentElement.style.opacity = ”;
//document.getElementById("tdAreas").parentElement.style.display = 'block';
}

}

Play with CRM!! 

Enjoy!