Histórico da Página

...

Os eventos de formulários são um conjunto de scripts carregados pela API de Formulários, os quais são desenvolvidos utilizando Javascript e são chamados durante a execução de ação em formulários ou em momentos específicos de interação em formulários.

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

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

...

Para ocultar o os botões Imprimir e Imprimir em nova Janela, deve-se utilizar o método setHidePrintLink.

Exemplo de visualização sem a utilização dos métodos:

...

Formulário funcional com exemplos de utilização 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.

...

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>");
}

...

Carregar dados em tela com evento displayFields

...

Bloco de código

language	js

 function enableFields(form) { 
    if ( form.getFormMode() != 'ADD' ){    
        form.setEnabled("rnc_cod_ocorrencia",false, true);
    }
}

Também é possível utilizar o método setEnhancedSecurityHiddenInputs, que faz com que todos os campos desabilitados pelo método setEnabled fiquem protegidos:

...

É executado quando o usuário pressiona o botão Movimentar antes de serem exibidas as opções de movimentação do formulário.

Parâmetros da função

Propriedade	Descrição	Tipo
numState	número da atividade atual	int

Exemplo de implementação

...

Bloco de código

language	js

<script>
var beforeMovementOptions = function(numState) {
console.log("_________________ beforeMovementOptions");
console.log("numState: " + numState);
console.log("valor campo: " + document.form.c7_total.value);
if (document.form.c7_total.value == '') {
throw ("Erro: nenhum valor selecionado!");
}
return true;
}
</script>

beforeSendValidate

Ocorre antes da solicitação ser movimentada, após já ter sido selecionada a atividade destino, o usuário e demais informações necessárias à solicitação.

Nota

title	Fique atento!

Ao utilizar o evento beforeSendValidate, o mesmo será executado apenas em solicitações de processos.

O beforeSendValidate possui eventos que são ativados somente na tela de movimentações workflow. E seus eventos precisam ser descritos dentro do próprio arquivo HTML do formulário.

Parâmetros da função

Propriedade	Descrição	Tipo
numState	número da atividade atual	int
nextState	número da atividade destino	int

Exemplos de implementação

...

Bloco de código

language	js

<script>
var beforeSendValidate = function(numState,nextState){
    console.log("-beforeSendValidate-");
    console.log("numState: " + numState);
    console.log("nextState: " + nextState); 
    throw("Erro Xyz");
}
</script>

Bloco de código

language	js

<script>
var beforeSendValidate = function(numState,nextState){
    console.log("-beforeSendValidate-");
    console.log("numState: " + numState);
    console.log("nextState: " + nextState); 
    var isOk = confirm("Deseja realmente enviar o processo ?");
    return isOk;
 }
</script>

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

language	java
theme	Eclipse

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";
    }
}

...

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 21

Nova versão 22

Chave

afterSaveNew

displayFields

Carregar dados em tela com evento displayFields

beforeSendValidate

Eventos de Formulário Pai Filho

getChildrenFromTable

getChildrenIndexes