I found one question in CRM Development form where user asked to show some processing message during long function execution, we have done this in many projects, so I thought to write this post so that it can be help CRM developers. if you are doing some processing or calling any webservice which is taking time to execute and you want to show loading messsage to user you can use below function
function showLoadingMessage() {
tdAreas.style.display = ‘none’;
var newdiv = document.createElement(‘div’);
newdiv.setAttribute(‘id’, “msgDiv”);
newdiv.valign = “middle”;
newdiv.align = “center”;
var divInnerHTML = “<table height=’100%’ width=’100%’ style=’cursor:wait’>”;
divInnerHTML += “<tr>”;
divInnerHTML += “<td valign=’middle’ align=’center’>”;
divInnerHTML += “<img alt=” src=’/_imgs/AdvFind/progress.gif’/>”;
divInnerHTML += “<div/><b>Working…</b>”;
divInnerHTML += “</td></tr></table>”;
newdiv.innerHTML = divInnerHTML;
newdiv.style.background = ‘#FFFFFF’;
newdiv.style.fontSize = “15px”;
newdiv.style.zIndex = “1010”;
newdiv.style.width = document.body.clientWidth;
newdiv.style.height = document.body.clientHeight;
newdiv.style.position = ‘absolute’;
document.body.insertBefore(newdiv, document.body.firstChild);
document.all.msgDiv.style.visibility = ‘visible’;
}
it will display message like below
once processing is done you can hide this message using below code
document.all.msgDiv.style.visibility = ‘hidden’;
Enjoy !!!
hi there , great work
I had some problems with the above code (crm 2011 /roll up 12 ) so I changed it to:
function showLoading() {
//document.getElementById(‘tdAreas’).parentElement.style.opacity = ‘0.1’;//use it to change opacity of main content
document.getElementById(‘tdAreas’).parentElement.style.display = ‘none’;//use it to hide main content
var newdiv = document.createElement(‘div’);
newdiv.setAttribute(‘id’, ‘msgDiv’);
newdiv.valign = ‘middle’;
newdiv.align = ‘center’;
var divInnerHTML = “”;
divInnerHTML += “”;
divInnerHTML += “”;
divInnerHTML += “”;
divInnerHTML += “Please wait…“;
divInnerHTML += ”;
newdiv.innerHTML = divInnerHTML;
newdiv.style.background = ‘#FFFFFF’;
newdiv.style.fontSize = ’15px’;
newdiv.style.zIndex = ‘1010’;
newdiv.style.margin = ‘0 auto’;
newdiv.style.width = getBrowserWidth()+’px’;
newdiv.style.height = getBrowserHeight()+’px’;
newdiv.style.position = ‘relative’;
document.body.insertBefore(newdiv, document.body.firstChild);
document.getElementById(‘msgDiv’).style.visibility = ‘block’;
//setTimeout(disableLoading, 500); //use it to define ms for disable loading
}
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’;
}
}
Hi Mahender,
Nice!!!
I am eagerly waiting to apply this on my project. 🙂
Pingback: Executing workflow from command button using Web API | HIMBAP