Como fazer uma tela de espera (Waiting) para processos demorados?

Boa tarde,

Gostaria de saber se têm como fazer um ProgressBar em um formulário no LATROMI.

Exemplo: Estou fazendo um tela onde há um cálculo que pode demorar para executar e eu gostaria de por um ProgressBar durante este cálculo para que o cliente não fique as cegas enquanto o mesmo está sendo executado.

Boa tarde @bruno.zeferino!

Este bloco de código JavaScript que deve te ajudar.

Crie um arquivo JavaScript no seu Formulário, e insira o código abaixo, substituindo o nome do campo btnLongRun pelo nome do botão que efetua o cálculo.

image

Enquanto o sistema estiver processando o evento Click do botão, será exibido um sinal de processamento com a mensagem “Aguarde enquanto efetuamos o cálculo…”. Você pode modificar o código e mostrar outra mensagem se preferir.

var latromi = latromi || {};

latromi.myForm = function () {

	// Declara loadingPanel
	var loading = new latromi.loadingPanel (document.body);

	function _eventFiring(arguments){

		// Intercepta o evento Click do botão chamado "btnLongRun"
		if (arguments.eventKind == 'Field' 
		    && arguments.eventName == 'Click'
			&& arguments.field.name == 'btnLongRun') 
		{
			// Inicia loading panel, especificando mensagem
			loading.start({ message: 'Aguarde enquanto efetuamos o cálculo...' });	
			
			// Quando o evento for concluido, encerra o loading panel
			arguments.completeCallback = function (args) {
				loading.end();
			};
		}
	}

	return {
		onEventFiring: _eventFiring
	}
};

// Declara o formulário
var myForm = new latromi.myForm();

// Adiciona Callback no Formulário
latromi.formManager.setOnEventFiringCallback( myForm.onEventFiring );
3 curtidas

Boa tarde,

Aproveitando essa solução do @ edenilson.souza seria possível que essa tela de loading ficasse sobreposta a apenas um elemento do form e não a tela inteira? Exemplo, ficar “preto” e com a mensagem apenas em cima da consulta.

@daniel.giacomelli Se puder ajudar…

Bom dia @Rafael

Para colocar o “Loading Panel” sobre o elemento da Grid, seria necessário fazer as seguintes modificações:

  1. No contrutor do objeto LoadingPanel, passar o elemento correspondente ao campo da Grid , ao invés de document.body

  2. Alterar a propriedade style.position do elemento correspondente ao campo da Grid para relative.

  3. Alterar a propriedade style.position do elemento correspondente ao LoadingPanel para absolute.

Segue um exemplo de código completo:

const myForm = (function () {

    // Declara loadingPanel
    let loading;

    // Adiciona Callbacks no Formulário
    latromi.formManager.setOnFormCreatedCallback(onFormCreated);
    latromi.formManager.setOnEventFiringCallback(onEventFiring);
    latromi.formManager.setOnFieldValueChangedCallback(onFieldValueChanged);

    // Ocorre logo após o form ser inicializado
    function onFormCreated(ev) {
        
        // Obtém o elemento do campo do tipo Consulta chamado "qryUUsers'
        const consultaElement = document.getElementById(ev.form.fields['qryUsers'].wrapperClientId);

        // Altera a propriedade "position"
        consultaElement.style.position = 'relative';
        
        // Inicializa o loadingPanel, e altera a propriedade "position" do elemento
        loading = new latromi.loadingPanel (consultaElement);
        loadingElement = consultaElement.lastElementChild;
        loadingElement.style.position = 'absolute'; 
    }

    // Ocorre quando um evento é disparado no Form
    function onEventFiring(ev) { 
        // Intercepta o evento Click do botão chamado "btnLongRun"
        if (ev.eventKind == 'Field' 
            && ev.eventName == 'Click'
            && ev.field.name == 'btnLongRun') 
        {
            // Inicia loading panel, especificando mensagem
            loading.start({ message: 'Aguarde enquanto efetuamos o cálculo...' });    
            
            // Quando o evento for concluido, encerra o loading panel
            ev.completeCallback = function (args) {
                loading.end();
            };
        }
    }

    // Ocorre quando o valor de um campo é alterado no Form
    function onFieldValueChanged(ev) { }
})();

No entanto, eu imagino que você queira que o sinal de carregamento dure até o final do processo de atualização dos dados, certo?

Infelizmente, isso não é possível, pois não temos como interceptar o momento em que o carregamento dos dados é finalizado, e portanto não seria possível ocultar o LoadingPanel.

Boa tarde Daniel,

Na verdade a query foi só um exemplo, eu queria fazer um painel de carregamento para cada card que criei enquanto eles fossem recarregados. Com teu exemplo de código e uma alteração com forEach consegui executar. Segue o resultado visual:
video

Muito obrigado pela ajuda!

2 curtidas

Ficou muito legal @Rafael!!