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.
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 );
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:
No contrutor do objeto LoadingPanel, passar o elemento correspondente ao campo da Grid , ao invés de document.body
Alterar a propriedade style.position do elemento correspondente ao campo da Grid para relative.
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:
Muito obrigado pela ajuda!