Histórico da Página

...

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. Para obter o valor de um determinado campo do formulário:

Bloco de código

language	javajs

form.getValue("nome-do-campo")

...

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. Nesse evento é possível alterar os valores a serem apresentados no campo do formulário. Para isto basta usar o seguinte procedimento:

Bloco de código

language	js

form.setValue(“nome-do-campo”, “valor”);

Exemplo:

Bloco de código

language	js

function displayFields(form, customHTML) {
   if ( form.getFormMode() == “MOD” ) {
     form.setValue('RNC_colab_abertura', new java.lang.Integer(1));
   }
}

...

Exemplo de utilização dos métodos setShowDisabledFields e setHidePrintLink:

Bloco de código

language	js

function displayFields(form, customHTML) {
   form.setShowDisabledFields(true);
   form.setHidePrintLink(true);
}

...

Exemplo de utilização do método setHideDeleteButton:

Bloco de código

...

code

language

js

function displayFields(form, customHTML) {
   form.setHideDeleteButton(false);
}

...

Exemplo de utilização dos métodos setVisible e setVisibleById:

Bloco de código

language	js

function displayFields(form, customHTML) { 
   form.setVisible("campoA", false);
   form.setVisibleById("linha___1", false);
}

Formulário funcional com exemplos de utilização de de setVisible, setVisibleById, setHideDeleteButton e setHidePrintLink:

Bloco de código

language	xml
title	Formulário - Clique para expandir
linenumbers	true
collapse	true

<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

language	js
title	displayFields.js - Clique para expandir
linenumbers	true
collapse	true

 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.

Abaixo um exemplo para usar a saída de apresentação do formulário:

Bloco de código

language	js

if(form.getFormMode() != "VIEW")  {
    customHTML.append("<script>");
    customHTML.append("function MostraEscondeBtn_zoom()");
    customHTML.append("{");
    customHTML.append("document.getElementById(\'zoomUsuario\').className = \'show\';");
    customHTML.append("document.getElementById(\'zoomModulo\').className = \'show\';");
    customHTML.append("}");
    customHTML.append("</script>");
}

...

Nota

title	Atenção!

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.

Bloco de código

language	coldfusionjs
title	Código para Datas

function inputFields(form) {
	if (form.getValue("NOME_DO_CAMPO_DATA").match("^[0-3]?[0-9]/[0-3]?[0-9]/(?:[0-9]{2})?[0-9]{2}$")) {
		var split = form.getValue("NOME_DO_CAMPO_DATA").split('/');
		form.setValue("NOME_DO_CAMPO_DATA", split[2] + '-' + split[1] + '-' + split[0]);
	}
}

...

É 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.

Exemplo:

Bloco de código

language	js

function afterProcessing(form){
}

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

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. Exemplo:

Bloco de código

language	js

function beforeProcessing(form){
}

...

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 8

Nova versão 9

Chave

beforeProcessing