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

Anúncios

Sobre Tiago Michelini Cardoso

I have been working with IT since 2006, almost of this time using Microsoft Dynamics CRM/365 as a source of solutions. I graduated in Bachelor of Information Systems at FIAP (Brazil) in 2012. I really love what I do! Technology has been my interest since always. Even in a tool different world of the current. When we didn't have internet, tablets, smartphones e social networks! Although I have worked in some roles, I can't give up "the developer life". Even so far of the greatest developers. Development in general is the thing that I love to work! I started my contributions about Dynamics in 2010. At the beginning, I used to help at MSDN and TechNet forums. But now, I'm dedicating all my time in my personal blog! Currently, I have the enormous honour of being the only Brazilian who got the award for Microsoft MVP (Most Valuable Professional) for Microsoft Dynamics CRM/365 product. I have been receiving the award since 2012.
Esse post foi publicado em Dynamics CRM e marcado , , . Guardar link permanente.

3 respostas para CRM 2011 – Informativo de Carregamento(Div Absoluta)

  1. Daniel disse:

    Muito bom trabalho, parabéns..

    Curtir

  2. Daniel disse:

    Tiago, com o a ultima atualização a DIV perdeu a cor de fundo, você poderia atualizar seu código por favor.

    Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s