Histórico da Página
...
O objetivo deste guia é descrever o 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 o desenvolvimento de formulários, assista aos vídeos how to no item Criação de formulários.
...
Não utilize a declaração <!DOCTYPE> HTML
...
Ao publicar um formulário não recomendamos a utilização de declarações <!DOCTYPE>:
| Bloco de código | ||
|---|---|---|
| ||
<!DOCTYPE>, Ex: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
A utilização dessas pode impactar em algumas funcionalidades da definição de formulário ou do Workflow na utilização do navegador Microsoft® Internet Explorer®.
...
| title | Atenção |
|---|
- Para visualizar todos os eventos de formulários disponíveis clique aqui.
- Salientamos que as API's já existentes na plataforma só poderão ser utilizadas e terão o funcionamento esperado em formulários construídos a partir da antiga técnica de construção de formulários.
- Para visualizar todas as variáveis globais e suas respectivas especificações, acesse aqui.
...
O formController é o objeto que realiza a comunicação entre o formulário e a customização dos eventos. Esse objeto está disponível em cada um dos eventos de customização de formulários através da variável form. A variável permite alterar os valores dos campos de um registro de formulário e também obter o estado de edição deles, por exemplo: se o usuário está visualizando ou editando o registro de formulário.
Veja a seguir os métodos disponíveis para a variável form:
...
Obtém o modo de edição do formulário, podendo retornar os seguintes valores:
ADD: Criação do formulário
MOD: Formulário em edição
VIEW: Visualização do formulário
NONE: Não há comunicação com o formulário, por exemplo, ocorre no momento da validação dos campos do formulário onde este não está sendo apresentado.
...
| title | Atenção! |
|---|
Para o correto funcionamento do formulário no fluig, todos os campos de formulário devem estar dentro da tag <form> no HTML principal ou identificar o formulário para cada campo, conforme padrão HTML. O fluig utiliza internamente todos os campos de formulário que possuem a propriedade "name" para armazenamento das informações.
Para formulários que armazenam dados em tabelas do banco de dados, existe a limitação de 1000 campos. Além disso, cada campo poderá ter no máximo 30 caracteres (formulários que continham campos maiores do que 30 caracteres, já exportados para o fluig através da Atualização 1.4.11 ou anteriores, continuam sendo exportados, mas esta validação será aplicada para os novos campos).
Quando o formulário é armazenado em tabelas do banco de dados, existem alguns termos que não podem ser utilizados no atributo "name", pois são palavras reservadas de alguns sistemas de banco de dados. Abaixo é apresentada uma lista de termos reservados:
| Expandir |
|---|
"ABSOLUTE", "ACCESS", "ACCESSIBLE", "ACCOUNT", "ACTION", "ACTIVATE", "ADD", |
Quando houver necessidade de manipular o HTML do formulário via JavaScript - principalmente quando envolver a criação de campos de formulário - sugerimos que isso seja feito através de scripts anexos ao formulário, importados pela tag <script src="minhasfuncoes.js"></script>, e não diretamente no HTML principal. Funções como a demonstrada abaixo podem gerar conflito na publicação do formulário no fluig:
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
function insereSelect(selectName){
conteudo += "<select class=\"form control\" name='"+selectName+"' id='+"selectName+"'>"+
"<option value=\"\" selected=\"selected\">SELECIONE</option>"+
"<option value=\"APROVADO\">APROVADO</option>"+
"<option value=\"REPROVADO\">REPROVADO</option>"+
"</select>";
$("#itemPai").append(conteudo);
} |
Pré-requisitos
...
Antes de iniciar o desenvolvimento de formulários, assista aos vídeos how to no item Criação de formulários.
Desenvolvimento de Formulários
...
Para facilitar o desenvolvimento do formulários, você pode usar o Fluig Studio
| Deck of Cards | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||
|
Exportando o formulário para o Fluig
...
Após o desenvolvimento, você pode enviar para o fluig o seu formulário. Para saber como e ter mais informações sobre as formas de armazenamento de dados, você pode consultar a nossa documentação sobre Exportando formulários e Modelos de Armazenamento de Formulários.
Garantindo a criação dos campos
Apenas são considerados os campos dentro da tag <form> do html principal usando o atributo name do html. Caso tenha outros arquivos html que compõe o formulário ou criação de campos dinâmicos, estes podem não conseguir ser persistidos corretamente no banco de dados.
Caso necessário, você pode criar os campos como não visíveis para que o fluig entenda que existe aquele campo (ainda que depois será substituído pela sua customização)
Boas práticas de desenvolvimento
Evite a inserção de scripts diretamente no arquivo html. Opte por usar um arquivo .js separado para isso e importe-o no seu html através da tag
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
<script src="minhasfuncoes.js"></script> |
Estrutura de pastas
O Fluig não tem suporte a estrutura de pastas no formulário. Por isso, mesmo que você organize seus arquivos em pastas, como no exemplo abaixo, o fluig entenderá que o seu formulário é
/
Notas e alertas perdidos:
| Nota | ||
|---|---|---|
| ||
Um formulário que possui uma estrutura de pastas com arquivos será exportado para o fluig sem respeitar a estrutura definida no fluig Studio. Os arquivos contidos nas subpastas são exportados para a pasta raiz do formulário.
Estrutura de pastas do formulário no fluig Studio e no volume do fluig. |
| Informações | ||
|---|---|---|
| ||
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. |
| Nota | ||
|---|---|---|
| ||
|
FormController
...
O formController é o objeto que realiza a comunicação entre o formulário e a customização dos eventos. Esse objeto está disponível em cada um dos eventos de customização de formulários através da variável form. A variável permite alterar os valores dos campos de um registro de formulário e também obter o estado de edição deles, por exemplo: se o usuário está visualizando ou editando o registro de formulário.
Veja a seguir os métodos disponíveis para a variável form:
| Método | Descrição |
|---|---|
| long getCompanyId() | Retorna o ID da empresa |
| int getDocumentId() | Retorna o ID do documento (registro de formulário) |
| int getVersion() | Retorna a versão do documento (registro de formulário) |
| int getCardIndex() | Retorna o ID do formulário |
| String getValue(String fieldName) | Obtém o valor de um campo do formulário |
| void setValue(String fieldName, String fieldValue) | Define o valor de um campo do formulário |
| boolean getEnabled(String fieldName) | Verifica se um campo está habilitado |
| void setEnabled(String fieldName, boolean enabled) | Define se um campo deve estar habilitado ou não |
| void setEnabled(String fieldName, boolean enabled, boolean protect) | Define se um campo deve estar habilitado ou não, e se o campo desabilitado deve ser protegido ou não. Quando definido o valor true para o parâmetro protect, o campo desabilitado não terá seu valor salvo no registro de formulário. |
| void setEnhancedSecurityHiddenInputs(boolean boolean protect) | Quando definido com o valor true, todos os campos desabilitados pelo método setEnabled serão protegidos e não terão seus valores salvos no registro de formulário. Esta função deve ser chamada antes do setEnabled. |
| String getFormMode() | Obtém o modo de edição do formulário, podendo retornar os seguintes valores: MOD: Formulário em edição VIEW: Visualização do formulário NONE: Não há comunicação com o formulário, por exemplo, ocorre no momento da validação dos campos do formulário onde este não está sendo apresentado. |
| void setHidePrintLink(boolean hide) | Quando definido com o valor true, desabilita o botão de imprimir do formulário. |
| boolean isHidePrintLink() | Verifica se o botão de imprimir está desabilitado. |
| Map<String, String> getChildrenFromTable(String tableName) | Retorna um mapa contendo os nomes e valores dos campos filhos de uma tabela pai. |
| void setHideDeleteButton(boolean hide) | Quando definido com o valor true, desabilita o botão de excluir registros filhos em um formulário com pai-filho. |
| boolean isHideDeleteButton() | Verifica se a exclusão de registros filhos está desabilitada. |
| boolean getMobile() | Verifica se o registro de formulário está sendo acessado através de um dispositivo mobile. |
| boolean isVisible(String fieldName) | Verifica se um campo está marcado para ser visível |
| void setVisible(String fieldName, boolean visible) | Define se um campo deve estar visível ou não |
| boolean isVisibleById(String id) | Verifica se um item do html está marcado para ser visível |
| void setVisibleById(String id, boolean enabled) | Define se um item do html deve estar visível ou não |
Desenvolvimento de Formulários
| Informações | ||
|---|---|---|
| ||
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. |
O desenvolvimento de definição de formulários é realizado pela criação de scripts na linguagem JavaScript. O código de implementação de cada script é armazenado em banco de dados e dispensa o uso de quaisquer outros arquivos, como por exemplo, “plugin.p”.
...
| title | Atenção! |
|---|
Um formulário que possui uma estrutura de pastas com arquivos será exportado para o fluig sem respeitar a estrutura definida no fluig Studio. Os arquivos contidos nas subpastas são exportados para a pasta raiz do formulário.
Estrutura de pastas do formulário no fluig Studio e no volume do fluig.
Os eventos de desenvolvimento para a definição de formulários são criados a partir do fluig Studio. Para publicar um formulário siga os passos conforme exemplo a seguir:
...
| effectDuration | 0.5 |
|---|---|
| history | false |
| id | samples |
| effectType | fade |
...
| default | true |
|---|---|
| id | 1 |
| label | Passo1 |
Para a criação de uma definição de formulário, na visão Explorador de pacotes (Package Explorer) deve-se acessar a pasta forms do projeto fluig, clicar com o botão direito e no menu acessar Novo (New) > Formulário.
Figura 1 - Novo Formulário.
...
| id | 2 |
|---|---|
| label | Passo 2 |
Na tela de criação de definição de formulário, basta preencher o nome desejado e clicar em concluir.
Figura 2 - Nova Definição de Formulário.
...
| id | 3 |
|---|---|
| label | Passo 3 |
Ao concluir, um pacote referente à definição de formulário é criado na pasta forms e o editor de formulário fica disponível para edição.
Figura 3 - Nova Definição de Formulário.
...
| id | 4 |
|---|---|
| label | Passo 4 |
...
...
| Nota | ||
|---|---|---|
| ||
Devido às limitações do banco de dados Oracle, os campos do formulário tipo input e textarea terão um limitador de caracteres para que não ultrapassem os 4 mil caracteres. Caso este limite seja excedido, será apresentada uma mensagem bloqueando a ação. |
...
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas