Show Loading message during function execution in CRM Form

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 !!!

 

3 thoughts on “Show Loading message during function execution in CRM Form

  1. eleana

    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';
    }
    }

    Reply
  2. Pingback: Executing workflow from command button using Web API | HIMBAP

Leave a Reply