Customização de Formulários

Devemos utilizar a ferramenta para desenvolvedores existente na maioria dos navegadores. Este manual foi escrito utilizando o navegador Google Chrome como base.

Para acessar as ferramentas do desenvolvedor, clique no menu, “Mais opções”, “Ferramentas do Desenvolvedor”. (Saiba mais neste link)

Uma das ferramentas é o “Console”, nele podemos digitar códigos Java Script. Outra ferramenta importante na customização de formulários é a “Sources”, que irá exibir todos os arquivos carregados pelo navegador.

Em um evento de um formulário, na aba console ou em qualquer código javascript executado no Next BP, podemos utilizar alguns comandos nos ajudar a “debugar” nosso código:

Comando Função
console.log(variavel) Exibe no log o conteúdo de alguma variável (texto, numero, array, objeto, etc)
debugger; Define um break point no código, utilizar nos eventos dos formulários. Obs: só funciona quando o F12 estiver habilitado

Para facilitar a customização, utilize seletores jQuery nos elementos do formulário. Obs: para conhecer mais sobre a jQuery, acesse www.jquery.com

Exemplos:

Comando Função
.find(‘…’) Para encontrar um elemento
.parent() Para acessar o elemento anterior
.val() Para obter o valor do elemento
.val(‘novo valor’).trigger(‘change’) Para alterar o valor
.maskMoney(‘mask’, parseFloat(novo valor)) Para alterar valor de campos numéricos
.maskMoney(‘unmasked’)[0] Para para obter o valor (float) de um campo numerico

Agora que conhecemos estas duas ferramentas e alguns comandos básicos, vamos à customização de um formulário.

Somar campos

Adicione em um grupo do formulário três campos tipo “Número Decimal”: edtValor1, edtValor2 e edtSoma.
Adicione no mesmo grupo um campo tipo “Botão”, btnSomar, posicione o botão entre o edtValor2 e edtSoma.
No evento “Ao Clicar” do btnSomar, adicione o código:

var valor1 = edtValor1.maskMoney('unmasked')[0];
var valor2 = edtValor2.maskMoney('unmasked')[0];
edtSoma.maskMoney('mask', parseFloat(valor1 + valor2));

Bloquear Edição

Altere a propriedade disabled do elemento, veja exemplo:

edtSoma.prop('disabled', true);

Caso o bloqueio do campo deva ser realizado na inicialização do formulário, adicione o código acima no evento “Ao Iniciar” do formulário.

Ocultar e exibir campo

Utilize os métodos show() e hide() da jQuery para exibir ou ocultar um elemento, veja exemplo:

txtCPF.show();
txtCNPJ.hide();

Preencher campos do formulário com resultado de consulta de integração

Para exemplificar, elaboramos uma “Consulta de Integração” que realiza listagem em uma tabela de usuários através da SQL:

SELECT id, nome, email, idioma FROM usuario

Criamos o formulário com os campos:

No campo “Usuário” vinculamos a consulta de integração citada acima, no evento “Ao Selecionar”, adicionamos o código javascript:

var usuario_selecionado = JSON.parse(txtUsuario.attr('objeto'));

txtID.val(usuario_selecionado.id).trigger('change');
txtNome.val(usuario_selecionado.nome).trigger('change');
txtIdioma.val(usuario_selecionado.idioma).trigger('change');

O resultado após a seleção do usuário é a seguinte:

Criar suas funções javascript específicas

O Next BP possui um arquivo padrão para declaração de funções específicas. Tudo que for declarado neste arquivo estará no escopo global do aplicativo, podendo ser acessado à qualquer momento.
Na pasta [Diretório Next BP]/webservice/peJS/ crie o arquivo especificos.pe.js, ou renomeie o arquivo especificos.pe.js.sample.
Para exemplificar, neste arquivo vamos declarar o uma função que poderá ser utilizada por qualquer formulário de processo.

function multiplicar(valor1, valor2) {
    return valor1*valor2;
}

Após alterar o arquivo especificos.pe.js o aplicativo deverá ser recarregado pelo navegador (F5), se necessário limpe o cache.
Após o arquivo ser recarregado pelo navegador, você poderá utilizar a função multiplicar, e qualquer outra função declaradas, em qualquer evento do formulário e de seus campos, e em gateways automatizados (modelagem de processo).