Histórico da Página
...
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 LGPD - Lei Geral de Proteção de Dados (LGPD, Lei nº 13.709) foi implementado a fim de garantir transparência no uso dos dados das pessoas físicas em quaisquer meios. No que diz respeito aos formulários codificados publicados na plataforma, serão fornecidos os mecanismos para que os desenvolvedores de formulário via código, possam identificar quais campos de um formulário irão possuir dados pessoais ou sensíveis de usuários, preservando seu desenvolvimento e deixando-os compatíveis com a Lei Geral de Proteção de Dados.
Deverão ser criadas propriedades a serem adicionadas a campos "imput" do html, a fim de que o desenvolvedor coloque as informações necessárias para identificar os campos e preencha a tabela universal. Técnica essa, semelhante a do pai filho, onde é adicionada uma propriedade chamada tablename, que informa o nome da categoria de filhos que pretende adicionar ao formulário. A propriedade tablename não afeta a visualização do html.
Novas propriedades:
- fdprivate = (valor igual true) - propriedade que determina se aquele campo do form irá conter informação pessoal .
- fdsensible = (valor igual true) - propriedade que determina se aquele campo do form irá conter informação sensível .
- fdclass = Numérico de acordo com os registros definidos pela fundação.
- fdtype = Numérico de acordo com os registros definidos pela fundação.
- fdcause = Justificativa do desenvolvedor em solicitar este campo
- fdanom = O campo pode ser anonimizado ? (True/False).
Ao informar no campo que a propriedade fdprivate é true, todas as demais propriedades são obrigadas a serem preenchidas com os tipos de informação válidos para cada uma delas.
Ao fazer o html, o usuário deve utilizar as seguintes tags para os campos LGPD:
Campo normal:
<input type="text" name="client-name" >
Campo LGPD:
<input type="text" name="client-name" data-protection="Nome do cliente" data-protection-anonymizable ** data-protection-sensitive data-protection-name data-protection-class-consent="Necessário para futuras ofertas">
Tags:
Dado que será monitorado:
data-protection
Dado monitorado com descrição:
data-protection="description"
Dado que permite ser anonimizado:
data-protection-anonymizable ou data-protection-anonymizable="true"
Dado sensível:
data-protection-sensitive ou data-protection-sensitive="true"
Tipo de dado
data-protection-name
data-protection-mail
data-protection-cpf
data-protection-id (rg)
data-protection-driver-license (cnh)
data-protection-voter-id (título eleitoral)
data-protection-work-card (carteira de trabalho)
data-protection-passport
data-protection-other
Classificação:
data-protection-class-contract (execução de contrato)
data-protection-class-legal-obligation (obrigação legal)
data-protection-class-consent (consentimento)
data-protection-class-public-policies (execução de políticas públicas)
data-protection-class-scientific-analysis (estudos por órgão de pesquisa)
data-protection-class-dedicated-law (exercício regular de direito)
data-protection-class-life-protection (proteção da vida)
data-protection-class-health-guardianship (tutela de saúde)
data-protection-legitimate-interests (interesse legítimo)
data-protection-credit-protection (Proteção de crédito)
Classificação com justificativa:
data-protection-class-contract="".
Serviços de Dados
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.
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.
Informações | ||
---|---|---|
| ||
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:
Bloco de código | ||
---|---|---|
| ||
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:
Bloco de código | ||
---|---|---|
| ||
<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" /> |
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.
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. |
...
É 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.
Informações | ||
---|---|---|
| ||
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:
Bloco de código | ||
---|---|---|
| ||
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:
Bloco de código | ||
---|---|---|
| ||
<html> <head> <title><br><br> <b> Grupo Teste XMLRPC </title>do Usuário: </b> <script<input languagetype="javascripttext"> name="groupId" id="groupId" /> <br><br> function init(){ <b> E-mail do Usuário: </b> <input type="text" name="mail" id="mail" /> <br><br> </form> var filter = new Object(); filter["colleaguePK.colleagueId"] = "adm"; var colleagues = DatasetFactory.getDatasetValues("colleague", filter</body> </html> |
Nota | |||||
---|---|---|---|---|---|
| |||||
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:
Bloco de código | ||
---|---|---|
| ||
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 if(colleagues.length > 0){ document.getElementById("colleagueName").value = colleagues[0].colleagueName;= DatasetFactory.getDatasetValues(Number(676),filter); log.info("Usuário de Abertura: "+ registrosform.get(0).get("RNC_colab_abertura")); } |
Nota | |||||||
---|---|---|---|---|---|---|---|
| |||||||
Para atualizações anteriores ao fluig 1.5.6, utilizar da seguinte maneira:
|
Nota | |||||
---|---|---|---|---|---|
| |||||
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:
Bloco de código | ||
---|---|---|
| ||
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"));
} |
Nota | |||||
---|---|---|---|---|---|
| |||||
Para atualizações anteriores ao fluig 1.5.6, utilizar da seguinte maneira:
|
Download de exemplo de Formulário Combobox e Dataset: form.html.
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.
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.
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.
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.
Nota | ||
---|---|---|
| ||
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.
Bloco de código | ||
---|---|---|
| ||
<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.
Bloco de código | ||
---|---|---|
| ||
<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).
Bloco de código | ||
---|---|---|
| ||
<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.
Bloco de código | ||
---|---|---|
| ||
<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.
Bloco de código | ||
---|---|---|
| ||
<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.
Bloco de código | ||
---|---|---|
| ||
<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:
Bloco de código | ||
---|---|---|
| ||
<table tablename="teste" addbuttonlabel="Adicionar novo ingrediente" addbuttonclass="wdkbuttonClass" deleteicon="teste.jpg"> |
Nota |
---|
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". |
Nota | ||
---|---|---|
| ||
Para mais informações sobre os eventos de formulários PaixFilho acesse Eventos Formulários. |
Nota | ||
---|---|---|
| ||
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. |
...
|
Download de exemplo de Formulário Combobox e Dataset: form.html.
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.
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.
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.
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.
Nota | ||
---|---|---|
| ||
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.
Bloco de código | ||
---|---|---|
| ||
<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.
Bloco de código | ||
---|---|---|
| ||
<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).
Bloco de código | ||
---|---|---|
| ||
<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.
Bloco de código | ||
---|---|---|
| ||
<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.
Bloco de código | ||
---|---|---|
| ||
<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.
Bloco de código | ||
---|---|---|
| ||
<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:
Bloco de código | ||
---|---|---|
| ||
<table tablename="teste" addbuttonlabel="Adicionar novo ingrediente" addbuttonclass="wdkbuttonClass" deleteicon="teste.jpg"> |
Nota |
---|
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". |
Nota | ||
---|---|---|
| ||
Para mais informações sobre os eventos de formulários PaixFilho acesse Eventos Formulários. |
Nota | ||
---|---|---|
| ||
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. |
Âncora | ||||
---|---|---|---|---|
|
- 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>
|
- 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" <tbody> id="aut" <tr> value="branco" style="display:none"><td> Sim: <select name="colaboradores" dataset="colleague" datasetkey="colleagueName" datasetvalue="colleagueName"></select> </td> <input name="aut" <td> type="radio" value<input type="aut_yescheckbox" checked> name="validado" value="a"> </td> Não: <input name="aut"<td> type="radio" <input type="text" value="aut_noname="mat_er_ial" id="mat_er_ial"> </td> </table> <table> <tr> <td><b>Responsáveis:</b></td><br></br> <table border="1" tablename="teste" addbuttonlabel="Adicionar Responsável"> </td> <thead> </tr> <tr></tbody> <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.
...
language | html/xml |
---|
...
</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.
Bloco de código | ||
---|---|---|
| ||
<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> |
LGPD
...
O LGPD - Lei Geral de Proteção de Dados (LGPD, Lei nº 13.709) foi implementado a fim de garantir transparência no uso dos dados das pessoas físicas em quaisquer meios. No que diz respeito aos formulários codificados publicados na plataforma, serão fornecidos os mecanismos para que os desenvolvedores de formulário via código, possam identificar quais campos de um formulário irão possuir dados pessoais ou sensíveis de usuários, preservando seu desenvolvimento e deixando-os compatíveis com a Lei Geral de Proteção de Dados.
Deverão ser criadas propriedades a serem adicionadas a campos "imput" do html, a fim de que o desenvolvedor coloque as informações necessárias para identificar os campos e preencha a tabela universal. Técnica essa, semelhante a do pai filho, onde é adicionada uma propriedade chamada tablename, que informa o nome da categoria de filhos que pretende adicionar ao formulário. A propriedade tablename não afeta a visualização do html.
Novas propriedades:
- fdprivate = (valor igual true) - propriedade que determina se aquele campo do form irá conter informação pessoal .
- fdsensible = (valor igual true) - propriedade que determina se aquele campo do form irá conter informação sensível .
- fdclass = Numérico de acordo com os registros definidos pela fundação.
- fdtype = Numérico de acordo com os registros definidos pela fundação.
- fdcause = Justificativa do desenvolvedor em solicitar este campo
- fdanom = O campo pode ser anonimizado ? (True/False).
Ao informar no campo que a propriedade fdprivate é true, todas as demais propriedades são obrigadas a serem preenchidas com os tipos de informação válidos para cada uma delas.
Ao fazer o html, o usuário deve utilizar as seguintes tags para os campos LGPD:
Campo normal:
<input type="text" name="client-name" >
Campo LGPD:
<input type="text" name="client-name" data-protection="Nome do cliente" data-protection-anonymizable ** data-protection-sensitive data-protection-name data-protection-class-consent="Necessário para futuras ofertas">
Tags:
Dado que será monitorado:
data-protection
Dado monitorado com descrição:
data-protection="description"
Dado que permite ser anonimizado:
data-protection-anonymizable ou data-protection-anonymizable="true"
Dado sensível:
data-protection-sensitive ou data-protection-sensitive="true"
Tipo de dado
data-protection-name
data-protection-mail
data-protection-cpf
data-protection-id (rg)
data-protection-driver-license (cnh)
data-protection-voter-id (título eleitoral)
data-protection-work-card (carteira de trabalho)
data-protection-passport
data-protection-other
Classificação:
data-protection-class-contract (execução de contrato)
data-protection-class-legal-obligation (obrigação legal)
data-protection-class-consent (consentimento)
data-protection-class-public-policies (execução de políticas públicas)
data-protection-class-scientific-analysis (estudos por órgão de pesquisa)
data-protection-class-dedicated-law (exercício regular de direito)
data-protection-class-life-protection (proteção da vida)
data-protection-class-health-guardianship (tutela de saúde)
data-protection-legitimate-interests (interesse legítimo)
data-protection-credit-protection (Proteção de crédito)
Classificação com justificativa:
data-protection-class-contract="".
Tradução de formulários
Para traduzir formulários é necessário utilizar a função i18n.translate(“literal_da_tradução”) nos pontos do arquivo HTML que devem ser traduzidos, conforme exemplo a seguir:
...