Objetivo
O objetivo deste guia é descrever algumas personalizações no desenvolvimento de formulários avançados no fluig, abordando conteúdos como a configuração de máscaras dos campos, utilização de campos combo e zoom, utilização de serviços de dados e utilização de regras de formulário.
Antes de iniciar, é importante que já tenha visto a documentação de Desenvolvimento de Formulários.
Serviços de Dados
O fluig possui integração com dois tipos de serviços de dados, são eles: Dataset e Serviços Externos. Ambos podem ser usados em todos os eventos disponíveis para customização de definição de formulário.
Ao construir formulários utilizando a antiga técnica (formulário avançado) onde se faz o uso de datasets, é necessário atenção quanto aos dados incluídos no mesmo, pois ao marcar o formulário como Documento público o dataset respeitará a condição do formulário se tornando público também. Com isso, orientamos o uso da nova técnica de construção de formulário, muito mais prática e dinâmica facilitando o uso e a construção dos formulários. Confira nossa documentação sobre a nova técnica de construção de formulário. |
É um serviço de dados que fornece acesso às informações, independente da origem dos dados. O fluig fornece Datasets internos que permitem acesso as entidades, como Usuários, Grupos de Usuários, entre outros.
Os exemplos abaixo utilizam a função getDatasetValues, disponível somente para os Datasets de entidade e definição de formulário(quando informado o número da definição de formulário). Para a utilização de Datasets customizados consulte o Guia de Referência Customização de Datasets. |
Na função getDatasetValues, NÃO são retornados os valores de todos os campos por questões de segurança. Para obter todos os dados é utilizado o DatasetFactory, exemplificado em Desenvolvimento de Datasets.
Por exemplo, para acessar o Dataset de usuários do fluig no evento displayFields de uma definição de formulário:
function displayFields(form,customHTML) { // Obtendo o usuario via dataset filter = new java.util.HashMap(); filter.put("colleaguePK.colleagueId","adm"); usuario = getDatasetValues('colleague',filter); form.setValue('RNC_colab_abertura',usuario.get(0).get("colleaguePK.colleagueId")); } |
Também é possível fazer uma chamada aos Datasets dentro da definição de formulário através de funções JavaScript.
O acesso aos Datasets também pode ser realizado diretamente no formulário da definição de formulário. Por exemplo, para acessar o Dataset de usuário e inserir os valores nos campos do HTML:
<html> <head> <title> Teste XMLRPC </title> <script language="javascript"> function init(){ var filter = new Object(); filter["colleaguePK.colleagueId"] = "adm"; var colleagues = DatasetFactory.getDatasetValues("colleague", filter); if(colleagues.length > 0){ document.getElementById("colleagueName").value = colleagues[0].colleagueName; document.getElementById("colleagueId").value = colleagues[0].colleagueId; document.getElementById("login").value = colleagues[0].login; document.getElementById("extensionNr").value = colleagues[0].extensionNr; document.getElementById("groupId").value = colleagues[0].groupId; document.getElementById("mail").value = colleagues[0].mail; }else{ alert("Nenhum Usuário Encontrado"); } } </script> </head> <script type="text/javascript" src="/webdesk/vcXMLRPC.js"></script> <body onload="init()"> <form id="form1"> <b> Nome do Usuário: </b> <input type="text" name="colleagueName" id="colleagueName" /> <br><br> <b> Matricula do Usuário: </b> <input type="text" name="colleagueId" id="colleagueId" /> <br><br> <b>Login do Usuário:</b> <input type="text" name="login" id="login" /> <br><br> <b> Ramal do Usuário: </b> <input type="text" name="extensionNr" id="extensionNr" /> <br><br> <b> Grupo do Usuário: </b> <input type="text" name="groupId" id="groupId" /> <br><br> <b> E-mail do Usuário: </b> <input type="text" name="mail" id="mail" /> <br><br> </form> </body> </html> |
Para atualizações anteriores ao fluig 1.5.6, utilizar da seguinte maneira:
|
O Dataset para definição de formulário utiliza a mesma chamada do Dataset de entidades, como no caso do usuário. Entretanto ao invés de passarmos como parâmetro o nome do Dataset passaremos o número da definição de formulário, por exemplo:
function displayFields(form,customHTML) { // Obtendo o usuario via dataset filter = new java.util.HashMap(); filter.put("RNC_nr_solicitacao",new java.lang.Integer(20)); registrosform = DatasetFactory.getDatasetValues(Number(676),filter); log.info("Usuário de Abertura: "+ registrosform.get(0).get("RNC_colab_abertura")); } |
Para atualizações anteriores ao fluig 1.5.6, utilizar da seguinte maneira:
|
Download de exemplo de Formulário Combobox e Dataset: form.html.
Apresentação de dados com componentes com múltiplos valores: Os campos possíveis de selecionar mais de um valor posteriormente são armazenados em um array. Quando são recuperados esses valores, é feito um tratamento para apresentar os valores separados por colchetes. Exemplo: [valor1] [valor2]. |
É um serviço de dados que permite o acesso de aplicações de terceiros através do fluig. Este serviço de dados suporta dois tipos de conexão, são eles: AppServer do Progress® e Web Services.
Os serviços de dados são cadastrados e configurados a partir da função Visualização de Serviços do fluig Studio.
Para mais informações sobre o cadastro dos serviços consulte: Integração Com Aplicativos Externos. E para informações de utilização dos serviços nos eventos consulte: Desenvolvimento de Workflow.
A técnica Pai X Filho foi modificada e agora a posição da tag tablename é feita dentro da tag "table" do código html.
No novo modelo implementado agora o parser do formulário aplicará as mudanças do pai filho da seguinte forma:
<table tablename="teste"> - A propriedade tablename determina que Agora abaixo dessa tabela será implementado um sistema de pai filho dentro da definição de formulário. A tag <table> terá seus parâmetros varridos na busca de outros parâmetros relacionados à técnica que serão explicados mais adiante nesse texto. Será criada uma outra <table> ao redor da tabela principal que conterá um botão que permite adicionar novos filhos. Isso não ocorrerá apenas em casos em que a propriedade noaddbutton também seja informada em conjunto com a propriedade tablename.
<TR> (primeiro abaixo do table) - A primeira tag de <TR> encontrada dentro da tabela é visualizada como uma tag que conterá os labels da tabela pai filho a esta tag será adicionada uma coluna <TD> contendo o ícone e a função de eliminar filhos existentes em tela. Está nova coluna será a primeira coluna a esquerda da tabela.
<TR> (Segundo abaixo do table) - A técnica pai filho irá ocultar a linha <TR> original e transforma lá no seu “template mestre” para criação dos filhos daquela tabela. Cada vez que o botão “novo” for acionado todo o conjunto de campos existentes dentro desse segundo <TR> será replicado em tela com os dados iniciais definidos para estes campos.
</table> - Fim do escopo da técnica.
Não é recomendada a utilização de underscore - "___" - na propriedade name de uma coluna (tag <td>) em formulário que utilizem Pai x Filho pois não é renderizada no Mobile. |
A técnica também suporta novos atributos que podem ser passados eu usados para customizar a técnica pai e filho. São elas:
noaddbutton - Remove o botão “adicionar” da tela no momento da edição do formulário. Isso permite ao desenvolvedor escolher aonde ele vai colocar a função que criará os filhos em tela podendo amarrar a chamada da função em um link texto ou uma figura ou outro objeto do html.
<table tablename="teste" noaddbutton=true> |
nodeletebutton - Remove o botão “lixeira” da tela no momento da edição do registro de formulário. Isso permite ao desenvolvedor impedir a eliminação dos registros ou definir outra forma de executar a função que removerá os filhos da tabela.
<table tablename="teste" nodeletebutton=true> |
addbuttonlabel - Determina que texto será posto no botão de adicionar filhos da técnica. Caso não seja informado o botão virá com o texto padrão (novo).
<table tablename="teste" addbuttonlabel="Adicionar novo ingrediente"> |
addbuttonclass - Permite definir qual classe css será utilizada pelo botão. Essa classe css deverá estar disponível no documento html do formulário.
<table tablename="teste" addbuttonclass="wdkbuttonClass"> |
deleteicon - Permite determinar qual será a imagem que funcionará como ícone da eliminação de filhos em tela. Essa imagem deverá ser um anexo da definição de formulário e deverá ser informada na classe como uma imagem qualquer utilizada como anexo na definição de formulário.
<table tablename="teste" deleteicon="teste.jpg"> |
customFnDelete - Permite a customização da função que é chamada ao clicar no botão que elimina um filho da tabela. A função customizada deverá estar disponível no documento html da definição de formulário e, obrigatoriamente, chamar a função padrão.
<table tablename="teste" customFnDelete="fnCustomDelete(this)"> function fnCustomDelete(oElement){ //Customização alert ("Eliminando filho!"); // Chamada a funcao padrao, NAO RETIRAR fnWdkRemoveChild(oElement); //Customização alert ("Filho eliminado!"); } |
É possível usar a combinação de um ou mais atributos na mesma tabela pai filho. Contudo se a propriedade noaddbutton for utilizada os valores das propriedades addbuttonlabel e addbuttonclass serão ignoradas. Não será gerada uma mensagem de erro na publicação ou versionamento dessa definição de formulário, porém no momento da edição do formulário a mesma não irá apresentar o botão padrão que permite cadastrar novos filhos na definição de formulário. A propriedade deleteicon não é afetada pela propriedade noaddbutton. Exemplo de uso combinado de parâmetros:
<table tablename="teste" addbuttonlabel="Adicionar novo ingrediente" addbuttonclass="wdkbuttonClass" deleteicon="teste.jpg"> |
Sobre os campos de uma tabela pai e filho: não estão disponíveis para serem utilizados como descrição dos registros de formulários na configuração do formulário; não devem ser colocados no "head" ou "footer" de um HTML pois eles não serão considerados, coloque os campos apenas no "body". |
Para mais informações sobre os eventos de formulários PaixFilho acesse Eventos Formulários. |
O índice de formulário pai e filho é utilizado da seguinte forma ex: indice___1. Em input dinâmicos não é recomendado adicionar valores no atributo name após o indice. |
A técnica 2.0 do pai Filho não permite o uso de todos os componentes HTML. É possível utilizar apenas:
Expanda a macro e veja o exemplo:
<html> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="/portal/resources/style-guide/css/fluig-style-guide.min.css"> <link rel="stylesheet" type="text/css" href="/portal/resources/style-guide/css/fluig-style-guide-filter.min.css"> <script src="/portal/resources/js/jquery/jquery.js"></script> <script src="/portal/resources/js/jquery/jquery-ui.min.js"></script> <script src="/portal/resources/js/mustache/mustache-min.js"></script> <script src="/portal/resources/style-guide/js/fluig-style-guide.min.js"></script> <script src="/portal/resources/style-guide/js/fluig-style-guide-filter.min.js"></script> <title>Formulario pai e filho</title> <body> <span class="NumSecao"> <strong> Cadastro</strong></span> <HR> <br> <form> <table> <tr> <td align="right" width="100" class="Labels"><b>Data:</b></td> <td class="Normal"><strong><input type="text" size="30" name="data"></strong></td> </tr> <tr> <td align="right" width="100" class="Labels"><b>Solicitação:</b></td> <td class="Normal"><strong><input type="text" size="30" name="num_solic"></strong></td> </tr> <tr> <td align="right" width="100" class="Labels"><b>Atividade:</b></td> <td class="Normal"><input type="text" size="30" name="num_ativ"></td> </tr> <tr> <td align="right" width="100" class="Labels"><b>Processo:</b></td> <td class="Normal"><input type="text" size="30" name="cod_proc"></td> </tr> <tr> <td align="right" width="100" class="Labels"><b>Versão:</b></td> <td class="Normal"><p><input type="text" size="30" name="ver_proc"></p></td> </tr> <tr> <td align="right" width="100" class="Labels"><b>Usuário:</b></td> <td class="Normal"><p><input type="text" size="30" name="usuario"></p></td> </tr> <tr> <td align="right" width="100" class="Labels"><b>Empresa:</b></td> <td class="Normal"><p><input type="text" size="30" name="empresa"></p></td> </tr> <tr> <td align="right" width="100" class="Labels"><b>Observações:</b></td> <td class="Normal"><p><input type="text" size="30" name="obs"></p></td> </tr> <td class="label"> Autoriza? <input type="radio" name="aut" id="aut" value="branco" style="display:none"> Sim: <input name="aut" type="radio" value="aut_yes" checked> Não: <input name="aut" type="radio" value="aut_no"> </td> </table> <table> <tr> <td><b>Responsáveis:</b></td><br></br> <table border="1" tablename="teste" addbuttonlabel="Adicionar Responsável"> <thead> <tr> <td> <b>Responsável:</b> </td> <td> Check </td> <td> Observação </td> </tr> </thead> <tbody> <tr> <td> <select name="colaboradores" dataset="colleague" datasetkey="colleagueName" datasetvalue="colleagueName"></select> </td> <td> <input type="checkbox" name="validado" value="a"> </td> <td> <input type="text" name="mat_er_ial" id="mat_er_ial"> </td> </tr> </tbody> </table> </tr> </table> </form> </body> </html> |
Clique aqui e baixe um exemplo de formulário Pai e Filho usando o fluig Style Guide.
Para utilizar campos radio button, além da definição padrão do componente html, é necessário que seja utilizado o atributo ‘value’ para os dados serem salvos corretamente.
<table border="1" tablename="teste" addbuttonlabel="Adicionar Filho" nodeletebutton="true"> <thead> <tr> <td><b>Nome</b></td> <td><b>Idade</b></td> <td><b><font face = "arial" size=5 color ="blue">Sim:</b></td> <td><b><font face = "arial" size=5 color ="blue">Não:</b></td> </tr> </thead> <tr> <td><input type="text" name="nomefilho"></td> <td><input type="text" name="idadefilho"></td> <td><input type="radio" name="nameradiofilho" id = "idsimfilho" value="ant_yes"></td> <td><input type="radio" name="nameradiofilho" id = "idnaofilho" value="ant_no"></td> </tr> </table> |
Os formulários renderizados dentro da plataforma vão respeitar a skin do Style Guide selecionada na configuração de tema da empresa, conforme a FAQ FORM 011 - Como utilizar a skin flat em formulários?.
<!-- Hotjar Tracking Code for http://tdn.totvs.com/display/fb --> <script> (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:1280165,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); </script> |