Histórico da Página
...
A seguir serão detalhados os eventos disponíveis para a customização de uma definição de formulário no fluig.
...
afterProcessing
É o último evento a ser disparado para o formulário. O evento recebe como parâmetro uma referência ao formulário da definição de formulário.
...
No contexto deste evento a variável form pode ser usada somente para consulta aos campos da definição de formulário, seus valores e estado de apresentação.
...
afterSaveNew
Esse evento é disparado após a criação de um novo formulário. O evento recebe como parâmetro uma referência ao formulário da definição de formulário.
...
A consulta aos campos do formulário é case insensitve. No exemplo acima, poderíamos obter o valor do campo usando rnc_colab_abertura.
...
beforeProcessing
Esse evento é o primeiro a ser disparado. Ocorre antes de qualquer outro evento da definição de formulário. O evento recebe como parâmetro uma referência ao formulário da definição de formulário.
...
Bloco de código | ||
---|---|---|
| ||
function beforeProcessing(form){ } |
No contexto deste evento a variável form pode ser usada somente para consulta aos campos da definição de fromulárioformulário, seus valores e estado de apresentação.
...
displayFields
Esse evento é disparado no momento em que os objetos do formulário são apresentados. O evento recebe como parâmetro uma referência ao formulário da definição de formulário e a referência para saída de apresentação do formulário.
...
Bloco de código | ||
---|---|---|
| ||
function displayFields(form, customHTML) { if ( form.getFormMode() == “MOD” ) { form.setValue('RNC_colab_abertura', new java.lang.Integer(1)); } } |
Ainda no evento DisplayFields displayFields é possível utilizar três métodos de forma independente ou conjunta para alterar a forma de como é apresentada a renderização do formulário, eliminar linhas de um formulário filho e ocultar os botões “Imprimir” e “Imprimir em nova Janela”.
...
Bloco de código | ||
---|---|---|
| ||
function displayFields(form, customHTML) { form.setVisible("campoA", false); form.setVisibleById("linha___1", false); } |
Formulário funcional com exemplos de utilização de setVisible, setVisibleById, setHideDeleteButton e setHidePrintLink:
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<html> <head> <script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script> <link type="text/css" rel="stylesheet" href="/portal/resources/style-guide/css/fluig-style-guide.min.css"/> <script type="text/javascript" src="/portal/resources/style-guide/js/fluig-style-guide.min.js" charset="utf-8"></script> </head> <body> <div class="fluig-style-guide"> <form name="form" role="form"> <h1>Ao Salvar <small> escolha o que ocultar ao salvar o formulário</small></h1> <p> <div class="checkbox"> <label> <input type="checkbox" name="ocultarTabela" value="on" > Ocultar toda tabela </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="ocultarCampoA"> Ocultar campo A </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="ocultarCampoN1"> Ocultar campo N da primeira linha </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="ocultarCampoM2"> Ocultar campo M da segunda linha </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="ocultarLinha1"> Ocultar linha 1 </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="ocultarExclusao"> Ocultar botão de excluir </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="ocultarImpressao"> Ocultar botão de imprimir </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="ocultarLoremIpsum"> Ocultar Lorem Ipsum </label> </div> <p><br><p> <input type="text" name="campoA" placeholder="Campo A" class="form-control" ></input><br> <p> <h2>Tabela de registros</h2> <table class="table table-bordered" tablename="tabelaTeste" addbuttonlabel="Novo Registro" cellspacing="0" width="100%" id="minhaTabela"> <thead> <tr class="tableHeadRow"> <td class="tableColumn">N</td> <td class="tableColumn">M</td> </tr> </thead> <tbody> <tr class="tableBodyRow" id="linha"> <td><input class="form-control" name="campoN" type="text"></td> <td><input class="form-control" name="campoM" type="text"></td> </tr> </tbody> </table> <p> <div id="loremIpsum"> Lorem Ipsum: Proin eget purus non mauris vehicula aliquam vitae sed est </div> </form> </div> </body> </html> |
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
function displayFields(form,customHTML){ var ocultarTodaTabela = form.getValue("ocultarTabela") == "on"; // Ocultar toda tabela var ocultarCampoA = form.getValue("ocultarCampoA") == "on"; // Ocultar campo A var ocultarCampoN1 = form.getValue("ocultarCampoN1") == "on"; // Ocultar campo N da primeira linha var ocultarCampoM2 = form.getValue("ocultarCampoM2") == "on"; // Ocultar campo M da segunda linha var ocultarLinha1 = form.getValue("ocultarLinha1") == "on"; // Ocultar linha 1 var ocultarExclusao = form.getValue("ocultarExclusao") == "on"; // Ocultar botão de excluir var ocultarImpressao = form.getValue("ocultarImpressao") == "on"; // Ocultar botão de imprimir var ocultarLoremIpsum = form.getValue("ocultarLoremIpsum") == "on"; // Ocultar a div Lorem Ipsum if ( ocultarTodaTabela ) { form.setVisibleById("minhaTabela", false); // bloqueia o campo, tabela ou div cujo id seja "minhaTabela" } if ( ocultarCampoA ) { form.setVisible("campoA", false); // bloqueia o campo com name "campoA" } if ( ocultarCampoN1 ) { form.setVisible("campoN___1", false); // bloqueia o campo com name "campoN___1" } if ( ocultarCampoM2 ) { form.setVisible("campoM___2", false); // bloqueia o campo com name "campoM___2" } if ( ocultarLinha1 ) { form.setVisibleById("linha___1", false); // bloqueia o campo, tabela ou div cujo id seja "linha___1" } if ( ocultarLoremIpsum ) { form.setVisibleById("loremIpsum", false); // bloqueia o campo, tabela ou div cujo id seja "loremIpsum" } if ( ocultarExclusao ) { form.setHideDeleteButton(true); // bloqueia o botão de exclusão de linha } if ( ocultarImpressao ) { form.setHidePrintLink(true); // bloqueia botão de imprimir } } |
É importante destacar que este evento é o único que permite a alteração dos valores a serem apresentados nos campos formulário antes da renderização deste.
...
Bloco de código | ||
---|---|---|
| ||
customHTML.append('<script>'); customHTML.append('$(function(){'); customHTML.append("loadProdutos();"); customHTML.append('});'); customHTML.append('</script>'); |
...
enableFields
Esse evento é disparado no momento em que os objetos do formulário são habilitados, permitindo desabilitar alguns campos, caso haja a necessidade. O evento recebe como parâmetro uma referência ao formulário da definição de formulário.
...
Bloco de código | ||
---|---|---|
| ||
document.forms['nomeForm'].nomeCampo.setAttribute('readonly',true); |
...
Nota | ||
---|---|---|
| ||
Mesmo utilizando a função |
...
setEnable, ainda existe a possibilidade de algum usuário conseguir visualizar informações do campo formulário |
...
oculto, utilizando de recursos como a ferramenta |
...
de inspeção de código dos navegadores. |
Protegendo campos desabilitados
...
Nota | ||
---|---|---|
| ||
O método setEnhancedSecurityHiddenInputs só protegerá campos desabilitados após a sua executação no evento. |
...
inputFields
Esse evento é disparado no momento em que os dados do formulário são passados para a BO responsável por formulário do fluig. O evento recebe como parâmetro uma referência ao formulário da definição de formulário. Exemplo:
...
Nota | |||||||
---|---|---|---|---|---|---|---|
| |||||||
Este evento pode ser usado para que as datas persistidas por formulários customizados sejam salvas corretamente. Hoje no sistema as datas salvas através de formulários pelo navegador Chrome são salvas com padrão americano (yyyy-mm-dd), enquanto as datas nos demais navegadores são salvas com padrão brasileiro (dd/mm/yyyy). Para empresas que utilizam múltiplos navegadores e querem que os dados de data estejam padronizados, recomendamos a utilização do evento inputFields com o seguinte trecho de código.
|
...
setEnable
Esse evento pode ser executado em diferentes eventos das definições de formulário. Este evento não é implementado automaticamente na customização da definição de formulário.
...
Bloco de código | ||
---|---|---|
| ||
function setEnable() { log.info(“Teste de chamada de função”); } function displayFields(form, customHTML) { setEnable(); } |
...
validateForm
Esse evento é executado antes da gravação dos dados do formulário no banco de dados. O evento recebe como parâmetro uma referência ao formulário da definição de formulário. Em caso de erros de validação dos dados do formulário, esse evento retornará uma mensagem de erro para o usuário, através de uma modal do fluig, com a mensagem definida no evento.
...
Eventos de Formulário Pai Filho
Para facilitar a manipulação dos dados em uma customização de formulário que faz uso da técnica Pai Filho, foram disponibilizados os métodos listados a seguir. Ambos são chamados a partir do objeto form que é passado como parâmetro nas funções de customização de formulários.
getChildrenFromTable
Esse evento retorna um mapa com todos os campos filhos de um Pai Filho a partir do seu tablename.
getChildrenIndexes
Esse evento retorna os índices dos registros (linhas) contidos em um Pai Filho a partir do seu tablename.
Bloco de código | ||||
---|---|---|---|---|
| ||||
function validateForm(form){ var indexes = form.getChildrenIndexes("tabledetailname"); var total = 0; for (var i = 0; i < indexes.length; i++) { var fieldValue = parseInt(form.getValue("valor___" + indexes[i])); if (isNaN(fieldValue)){ fieldValue = 0; } total = total + fieldValue; log.info(total); } log.info(total); if (total < 100) { throw "Valor Total da requisição não pode ser inferior a 100"; } } |
enableFields
Para utilizar o evento enableFields em um formulário Pai x Filho, é necessário ter o índice da linha a qual o campo a ser desabilitado pertence.
Uma forma de obter essa informação é através do método getChildrenIndexes conforme exemplo a seguir:
Bloco de código | ||||
---|---|---|---|---|
| ||||
function enableFields(form){ var indexes = form.getChildrenIndexes("ingredientes"); for (var i = 0; i < indexes.length; i++) { form.setEnabled("quantidade___" + indexes[i], false); form.setEnabled("unidade___" + indexes[i], false); form.setEnabled("produto___" + indexes[i], false); } } |
...