Histórico da Página
...
| Deck of Cards | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||
|
...
| Deck of Cards | |||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||
|
...
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.
...
| Nota | ||
|---|---|---|
| ||
| Caso a importação da biblioteca jQuery esteja desabilitada através da variável fluigjQuery, a funcionalidade de máscaras também estará desabilitada. |
ComboBox
Geralmente é necessário popular um ComboBox de um formulário com um determinado grupo de valores.
...
| Bloco de código | ||
|---|---|---|
| ||
<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:
| Bloco de código | ||
|---|---|---|
| ||
<select name="RNC_volume" id="RNC_volume" dataset="destinationVolume" datasetkey="volumeID" datasetvalue="volumeDescription"></select> |
...
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
| Bloco de código | ||
|---|---|---|
| ||
<select> <option value="te">Teste</option> </select> |
...
| Bloco de código | ||
|---|---|---|
| ||
<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.
| Nota | ||
|---|---|---|
| ||
Para utilizar o zoom do fluig, é necessário estar utilizando o fluig Style Guide, para mais informações acesse https://style.fluig.com/ Veja o exemplo em nosso repositório aqui. |
| Bloco de código | ||
|---|---|---|
| ||
<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.
...
Para obter outros atributos do registro selecionado pelo usuário, pode ser adicionada a seguinte função JavaScript ao formulário do processo:
| Bloco de código | ||
|---|---|---|
| ||
function setSelectedZoomItem(selectedItem) {
} |
...
Para acessar o tipo de zoom selecionado:
| Bloco de código |
|---|
selectedItem.inputId = "c7_total" selectedItem.inputName = "c7_total" |
...
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:
| Bloco de código |
|---|
reloadZoomFilterValues(inputName, filterValues); |
...
| Informações | ||
|---|---|---|
| ||
Foi criado um exemplo (form-smart-filter) de como utilizar o método reloadZoomFilterValues, que você pode acompanhar clicando aqui. |
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).
...
| Bloco de código |
|---|
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:
| Bloco de código |
|---|
<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.
| Bloco de código |
|---|
function validateFieldIsNull(valor){
if(valor != ""){
window["zoomfield"].disable(false);
} else {
window["zoomfield"].disable(true);
}
} |
...
| Informações |
|---|
O exemplo do recurso de bloquear e habilitar zoom com base em outro campo somente é suportado para a versão 1.6.1 ou acima. |
| Dica |
|---|
É possível definir manualmente um valor para campos do tipo zoom utilizando a técnica demonstrada neste exemplo (form-smart-zoom), que está disponível em nosso repositório Git. |
| Informações |
|---|
A antiga técnica para zoom ainda é suportada pela plataforma. Porém, recomendamos a utilização da técnica descrita acima que está de acordo com os padrões do fluig Style Guide e permite maior fluidez utilizando o componente. |
Filtrar colunas do Zoom 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.
...
| Nota | ||
|---|---|---|
| ||
O zoom utilizará a coluna com o nome destacado na cor verde como base para sua pesquisa sendo assim, recomendamos que esta coluna esteja com o indicativo ON ligado. Pois ao deixar o indicativo desta coluna como OFF o zoom não conseguirá realizar a busca dos resultados e não irá apresentá-los no registro de formulário. |
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.
...
| Bloco de código | ||
|---|---|---|
| ||
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.:
| Bloco de código | ||
|---|---|---|
| ||
<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> |
...
| Bloco de código | ||
|---|---|---|
| ||
<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.
...
| 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. |
Dataset
É 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.
...
| Nota | ||
|---|---|---|
| ||
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]. |
DataService
É 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.
...
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.
Pai 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.
...
- text
- radio button
- checkbox
- select
- select multiple
- hidden
- textarea
- image
- button
Expanda a macro e veja o exemplo:
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<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.
Pai Filho Radio Button
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.
...
| Deck of Cards | |||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||
|
...
Para isso, no editor, clique em “Regras de formulário”, Adicionar, selecione o campo e a atividade e em ação, escolha “Validar”. Clique na lupinha.
Essa validação serve para bloquear alguns valores. O usuário não vai informar quais são os valores permitidos, pelo contrário, ele vai configurar quais os valores proibidos.
Por exemplo, se quiser configurar para que um campo idade só permita valores maiores que 18, a configuração deve ser: idade menor 18. Ou seja, é uma validação restritiva e não permissiva.
No caso de uma combinação de fatores, como idade entre 12 e 18 anos:
| Bloco de código |
|---|
Satisfazer UMA das condições idade menor que 12 idade maior que 18 |
Ou então, caso queira excluir um determinado grupo intermediariointermediário, ou seja, ninguém com idades entre 18 e 60:
...
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas