CRM 2011 – Informativo de Carregamento(Div Absoluta)

UPDATED: 23/09/2013 (Compatível com Rollup 14)

Em algumas situações temos chamadas a funções JScript que por sua complexidade acabam demorando um certo período para retornarem o resultado, o usuário pode acreditar que ocorreu algum problema ou continuar tentando o procedimento sem sucesso. Na versão 2011, podemos colocar notificadores no todo do formulário, temos um API para essas funcionalidades, mas em alguns momentos são insuficientes ou ainda, quando temos uma chamada JScript de um botão do ribbon, neste caso, não temos nenhuma API para uma mensagem para o usuário.

Sendo assim, eu criei um forma de chamarmos uma “div absoluta” que é inserida no centro da tela com a mensagem que desejarmos, e tem o mesmo design do informativos do CRM:

O resultado é simples e também a codificação:

// DIV Absoluta
// EXEMPLO: Carregando(true, "Carregando...");
function Carregando(visivel, frase) {
    var classeAbsoluta = ".absoluta { ";
    classeAbsoluta += "position:fixed;";
    classeAbsoluta += "left:50%;";
    classeAbsoluta += "top:50%;";
    classeAbsoluta += "width:400px;";
    classeAbsoluta += "height:80px;";
    classeAbsoluta += "color: #000099;";
    classeAbsoluta += "border: 2px solid #000000;";
    classeAbsoluta += "font: bold 16px Arial;";
    classeAbsoluta += "background-color: #ffffee;";
    classeAbsoluta += "padding-top: 58px;";
    classeAbsoluta += "text-align: center;";
    classeAbsoluta += "margin-left: -200px;";
    classeAbsoluta += "margin-top: -40px;";
    classeAbsoluta += " }";

    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = classeAbsoluta;

    //Adiciona o Style no HEADER
    var header = document.getElementsByTagName('head')[0].appendChild(style);

    //Localiza elemento BODY
    var body = document.getElementsByTagName("body")[0];

    //Remove Div Absoluta
    if (document.getElementById("div_absoluta"))
        body.removeChild(document.getElementById("div_absoluta"));

    //Aparecer Div
    if (visivel) {
        //Cria as DIV
        var absoluta = document.createElement("div");

        //Atribui ID
        absoluta.id = "div_absoluta";

        //Cria o Texto da DIV
        var texto = document.createTextNode(frase);

        //Adiciona o Nó TEXTO na DIV
        absoluta.appendChild(texto);

        //Adiciona a DIV Absoluta no BODY
        body.appendChild(absoluta);

        //Atribui Classes CSS na DIV
        document.getElementById('div_absoluta').className = 'absoluta';
    }
}

Para a mensagem aparecer use: Carregando(true, “Carregando…”) e para desaparecer Carregando(false, “Carregando…”)

Att,

Tiago Cardoso