Índice

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.

Pré-requisitos

Antes de iniciar, é importante que já tenha visto a documentação de Desenvolvimento de Formulários.

Personalização de formulários

Neste capítulo será demonstrado como interagir com alguns tipos de controles do formulário que possuem características especiais, como por exemplo, o preenchimento do conteúdo de um ComboBox através da utilização de Datasets.

O fluig, por padrão realiza a importação da biblioteca JavaScript jQuery em todos os formulários, exceto nos casos onde o formulário já a realize. Nestes casos o fluig identificará que o jQuery já está definido e não realizará a importação novamente. Caso o formulário utilize outra biblioteca que possa entrar em conflito com o jQuery,  será necessário definir no formulário a variável javascript fluigjQuery, com valor false, que o fluig deixará de fazer tal importação, porem algumas outras funcionalidades como a máscara de campos do fluig, também serão desabilitadas.

Máscara de Campos

Muitos campos em um formulário possuem uma formatação específica para o seu conteúdo, como  datas, CEP, CPF entre outros. 

Para auxiliar o desenvolvedor de formulários, o fluig permite habilitar máscaras por campo, bastando informar o atributo "mask" e a máscara desejada aos objetos input do tipo text.

<input name="cep" type="text" mask="00000-000">

Para elaborar a máscara é possível utilizar:

                     
                     Data: "00/00/0000"
                  Horário: "00:00:00"
              Data e Hora: "00/00/0000 00:00:00"
                      CEP: "00000-000"
                 Telefone: "0000-0000"
            Telefone(ddd): "(00) 0000-0000"
Telefone(ddd + 9ºdígitos): "(00) 90000-0000"
           Placa de carro: "SSS 0000"
                      CPF: "000.000.000-00"
                     CNPJ: "00.000.000/0000-00"
                       IP: "099.099.099.099"
              porcentagem: "#00.000,00%"
				    Valor: "#00.000.000.000.000,00"

ComboBox

Geralmente é necessário popular um ComboBox de um formulário com um determinado grupo de valores.

No fluig isto é possível através da utilização de Datasets. Os Datasets são serviços de dados padrão disponibilizados pelo fluig, como por exemplo, o serviço de “Volumes” do produto.

Para habilitar o Dataset no ComboBox basta usar a seguinte construção:

<select name="RNC_volume" id="RNC_volume" dataset="nome-dataset" datasetkey="chave" datasetvalue="valor" addBlankLine=”false”></select>

Onde:

• dataset: é o nome do Dataset.
• datasetkey: é a chave do registro.
• datasetvalue: é o valor de um determinado campo do registro.
• addBlankLine: é o que define se a primeira linha do combo será um valor em branco.

Exemplo:

<select name="RNC_volume" id="RNC_volume" dataset="destinationVolume" datasetkey="volumeID" datasetvalue="volumeDescription"></select>

No exemplo acima estamos listando em um ComboBox todos os Volumes cadastrados no fluig.

Caso necessário a ordenação dos dados provindos de um dataset interno, indicamos a criação de um dataset (simples ou avançado) que execute o interno e ordene os dados, antes de alimentar o componente combobox.

Para utilizar um ComboBox com somente uma opção não deve ser utilizado caracteres especiais e espaço no value da tag option.

Exemplos:

• Forma correta

<select>
  <option value="te">Teste</option>
</select>

• Forma Incorreta

<select>
  <option value="te te te">Teste</option>
</select>

Zoom

Permite a consulta de entidades e outros formulários criados no fluig para seleção de dados pelo usuário. Para utilizar este componente basta inserir um campo de texto com alguns parâmetros específicos.

<input
    type="zoom"
    id = "c7_total"
    name="c7_total"
    data-zoom="{
        'displayKey':'colleagueName',
        'datasetId':'colleague',
        'maximumSelectionLength':'2',
        'placeholder':'Escolha o usuário',
        'fields':[
            {
               'field':'colleagueId',
               'label':'ID'
            },{
              'field':'colleagueName',
              'label':'Nome',
              'standard':'true'
            },{
              'field':'login',
              'label':'Login'
            }
        ]
     }" 
/>

Onde:

• type: o atributo type para este componente obrigatoriamente é 'zoom'
• name: nome do campo
• data-zoom: parâmetros do zoom em formato json onde:
  
  • maximumSelectionLength: limite de registros selecionáveis, caso não seja informado, o valor padrão é 1.
  • resultLimit: número máximo de resultados que serão listados na busca, o valor padrão é 300.
  • placeholder: texto de placeholder, que irá aparecer no zoom. Pode ser utilizado para instrução.
    
    • displayKey: coluna filtrável e de exibição após selecionado o registro
    • filterValues: atributo do dataset e valor para serem filtrados. Devem ser colocados em pares, separados por vírgula (,) onde o primeiro valor é o nome do campo e o segundo refere-se ao valor do campo.
  • datasetId ou cardDatasetId: opte por uma das opções:
    
    • datasetId:  é o nome do dataset.
    • cardDatasetId: é o numero de outro formulário para consulta.
    • fields: Estrutura do filtro
      • field: atributo do dataset que será utilizado.
      • label: descrição da coluna.
      • standard: a coluna que será utilizada como ordenação padrão e valor do registro selecionado.

ATENÇÃO: Este parâmetro só é válido para datasets internos. Datasets desenvolvidos sobre a plataforma não permitem a utilização de filtros a menos que sejam desenvolvidos utilizando constraints para realizar estas ações.

Para obter outros atributos do registro selecionado pelo usuário, pode ser adicionada a seguinte função JavaScript ao formulário do processo:

function setSelectedZoomItem(selectedItem) {               
}

Onde selectItem é o registro selecionado pelo usuário na tela de zoom.

Esta função será disparada ao eliminar uma tag (valor) do zoom. A partir deste evento, o valor eliminado poderá ser manipulado, por exemplo, para controlar outros campos que dependem deste valor eliminado. 

 function removedZoomItem(removedItem) {
}

Acesse o exemplo completo (form-smart-zoom) em nosso Git aqui. 

Para acessar um campo do registro selecionado:

selectedItem["fieldName"]

Onde fieldName é o nome do campo de retorno que foi definido na chamada de zoom. Caso a 'label' do campo tenha sido declarada, ela deverá ser utilizada.

Para acessar o tipo de zoom selecionado:

selectedItem.inputId = "c7_total"
selectedItem.inputName = "c7_total"

Onde inputId é o id do campo e inputName é o nome do campo de retorno que foi definido no input zoom. Estes parâmetros possuem a mesma funcionalidade do type da antiga técnica de zoom.

Para recarregar o valor do filterValues no formulário a fim de torná-lo mais dinâmico, é possível utilizar o método a seguir:

reloadZoomFilterValues(inputName, filterValues);

Este método é padrão durante a execução de um formulário dentro do fluig a partir da atualização 1.5.5 e recarrega o Zoom por inteiro, colocando os novos valores de filterValues. Em que:

inputName: refere-se ao nome do campo de zoom, ou seja, o valor name na sua declaração;

filterValues: espera-se um valor literal separado por vírgula, sendo que o primeiro valor refere-se ao campo a ser filtrado e o segundo valor refere-se ao valor que irá filtrar.

Definir valor baseado na troca de valor de outro campo/zoom

Para realizar a busca de um valor em um campo de tipo zoom, com valores obtidos de outros campo zoom, deve-se ser utilizada primeiramente a função setSelectedZoom, que por parâmetro receberá o item selecionado pelo usuário no campo (selectedItem).

function setSelectedZoomItem(selectedItem) {}

Dentro desta função, verificaremos o campo no qual vai pegar o valor do primeiro zoom, que no caso complementará o segundo:

if(selectedItem.inputId == "id do campo"){}

Os id's dos campos de tipo zoom serão retornados em selectedItem.inputId, por este motivo devemos inserir esta validação, para que apenas o valor do campo certo seja retornado. Após o valor do campo estiver de acordo com sua opção, deverá ser utilizada a função reloadZoomFilterValues dentro da validação do nome do campo, que aplicará o filtro e recarregará o zoom.

Aplicando os valores:

reloadZoomFilterValues("nome_do_campo_de_zoom_que_receberá_o_filtro", "campo_a_ser_filtrado," + selectedItem["valor_que_ira_filtrar"]);

Código do exemplo completo:

function setSelectedZoomItem(selectedItem) {
    if(selectedItem.inputId == "id do campo"){
    reloadZoomFilterValues("nome_do_campo_de_zoom_que_receberá_o_filtro", "campo_a_ser_filtrado," + selectedItem["valor_que_ira_filtrar"]);
  }
}

Bloquear e habilitar novo zoom baseado em algum campo

Para bloquear e desbloquear um campo de tipo zoom, com base em outro campo, devemos implementar no campo a ser validado, o evento onBLur no HTML apontando para uma função que fará toda a validação e realizará o bloqueio dos campos. Utilizaremos como exemplo o evento onBlur.

Evento onBlur no input passando na função 'this.value', que vai mandar o valor que foi preenchido no campo para a função:

<input type="text" name="fieldName" id="fieldName" class="form-control" onblur="validateFieldIsNull(this.value)">

Dentro desta função, será validado se o valor recebido pela função for nulo, e caso seja, bloqueie o campo zoom. Caso este valor não esteja nulo, deverá ser adicionado a condição else para re-habilitar o campo zoom.

function validateFieldIsNull(valor){
	if(valor != ""){
		window["zoomfield"].disable(false);
	} else {
   		window["zoomfield"].disable(true);
	}
} 

Filtrar colunas do Zoom 

O campo Pesquisa também conhecido como Zoom, agora traz o botão “Filtrar colunas” que irá facilitar a aplicação de filtros no campo de pesquisa do registro de formulário, possibilitando realizar buscas por colunas específicas. Esta ação tornará o resultado de busca mais fácil e rápido.

O botão Filtrar colunas irá possibilitar que todas as colunas do zoom sejam exibidas, porém será possível selecionar quais colunas serão apresentadas ao preencher um registro de formulário, através da seleção do indicativo ON e OFF.

Por exemplo: ao definir a coluna Código como OFF ela não será apresentada no formulário, da mesma forma que, ao defini-la como ON a coluna será apresentada. 

Zoom Externo

Em situações aonde os dados dos elementos externos ao fluig são muito volumosos é recomendada a construção de uma aplicação externa ao fluig que fará o papel de zoom para o usuário. Abaixo será descrita uma técnica JavaScript aonde será possível chamar uma aplicação externa e a mesma poderá devolver o dado solicitado pelo usuário para um campo do formulário do fluig.

O primeiro passo para implementação dessa técnica é criar uma lógica em JavaScript que irá abrir uma nova janela chamando a aplicação externa que irá se comportar como zoom para o formulário. Vamos utilizar e explanar o comando window.open neste exemplo:

Window.open(URL Aplicação Externa, Nome da Janela que será aberta, comandos adicionais)

Onde:

URL Aplicação Externa: É a url da aplicação externa que funcionará como zoom para o fluig. Ex: http://servidor/applications/forneczoom.asp.

Nome da Janela: Nome da janela que será utilizado pelo navegador do usuário como identificador. Para evitar a sobreposição de conteúdo em janela é recomendado que para cada zoom chamado por um mesmo formulário seja adicionado um nome diferente. Ex: “ZoomFormec”.

Comandos Adicionais: Comandos adicionais utilizados para a criação da janela que irá conter a aplicação zoom. Ex: “width=230, height=230”.

O código abaixo irá programar um formulário do fluig contendo um campo e um botão lateral que irá invocar a janela da aplicação externa:

<form name=”FornecedorForm”>
  Código do Fornecedor:
  <input name=”cod_fornec” size=’10” value=”” type=”text”>
  <input value=”lista” onClick=”mostraLista()” type=”button”>
</form>

<script language=”JavaScript”>
   Function mostraLista() {
     Window.open(“fornecedores.html”, “list”,”width=230,height=230”);
   }
</script>       

O segundo passo é programar dentro da aplicação externa uma função JavaScript que devolva para o campo do formulário o valor escolhido para o usuário na aplicação externa. Essa aplicação externa poderá ser desenvolvida em qualquer tecnologia de desenvolvimento web existente no mercado de que a mesma possa realizar a execução de scripts JavaScript no lado do cliente. Segue exemplo de uma função JavaScript que passa o valor para o campo do formulário:

<script language=”JavaScript”>
   function escolha(valor) {
       // A linha abaixo testa se a janela do formulário do fluig que abriu a janela de zoom ainda está aberta
       if (window.opener && !window.opener.close) {
              // seta o valor passando para o campo
              window.opener.document.(id do form no formulário fluig).(nome do campo).value = valor;
       }
       // Fecha a janela da aplicação zoom
       window.close();
   }
</script>

Onde:

Id do form no formuário fluig: Caso algum id tenha sido definido para a tag <form> no formulário do fluig é interessante referenciar neste comando. Pode ser utilizada também a referência de coleção forms dentro do comando (forms[posição]). 
Ex: FornecedorForm, forms[0].

Nome do Campo: Nome do campo que irá receber o valor passado para a função. 
Ex: cod_fornec.

Valor: Dado que será passado para o campo do formulário do fluig.

O exemplo a seguir irá programar um exemplo de zoom externo feito inteiramente em HTML com dados estáticos apenas para ilustração. Os dados de zoom podem provir de qualquer fonte seja ela interna ou externa ao fluig.

<html>
  <head>
  <title>Lista de fornecedores</title> 


<script language="JavaScript"> 
function escolha(valor) { 
  // Teste de validade do Opener 
  if (window.opener && !window.opener.closed) { 
      // gravando o valor do campo cod_fornec 
      window.opener.document.forms[0].cod_fornec.value = valor; 
  } 
   window.close(); 
} 
</script>
 
  </head>
  <body>   

  <!-- Os dados abaixo estão fixos mas poderiam ser montados a partir de qualquer origem. --> 

  <table border="1" cellpadding="5" cellspacing="0"> 
  <tbody><tr bgcolor="#cccccc"><td colspan="2"><b>Exemplo aplicacao ECM</b></td></tr> 
  <tr bgcolor="#cccccc"><td><b>Codigo</b></td><td><b>NASDAQ</b></td></tr> 
  <tr><td><a href="javascript:escolha('TOTVSv3')">TOTVS</a></td> 
  <td><a href="javascript:escolha('TOTVSv3')">TOTVSv3</a></td></tr> 
  <tr><td><a href="javascript:escolha('RM1')">RM</a></td> 
  <td><a href="javascript:escolha('RM1')">RM1</a></td></tr> 
  <tr><td><a href="javascript:escolha('DTS3')">Datasul</a></td> 
  <td><a href="javascript:escolha('dts3')">Dts3</a></td></tr> 
  <tr><td><a href="javascript:escolha('Lgx2')">Logix</a></td> 
  <td><a href="javascript:escolha('Lgx2')">Lgx2</a></td></tr> 
  </tbody>
  </table> 

  <!-- Fim dos dados --> 

  </body>
</html>

Para colocar o exemplo em prática no produto, basta publicar a definição de formulário a seguir informando o arquivo do zoom externo como anexo da definição de formulário.

Exemplo de Zoom.zip

Ao clicar em um dos itens da tela de zoom será chamada a função JavaScript escolha que ira enviar o valor para o campo cod_fornec no formulário do fluig.

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.

lalalala

Pai x Filho

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.

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:

código que o tdn não permite publicarasd