Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

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
titleImportante

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
titleNota

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
languagehtml/xml
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
languagehtml/xml
 <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
titleImportante

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
titleNota

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
languagehtml/xml
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
languagehtml/xml
 <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
titleImportante

Para atualizações anteriores ao fluig 1.5.6, utilizar da seguinte maneira:

Bloco de código
languagejavascript
(...)
var colleagues = getDatasetValues("colleague", filter);
(...)


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
languagehtml/xml
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
titleImportante

Para atualizações anteriores ao fluig 1.5.6, utilizar da seguinte maneira:

Bloco de código
languagejavascript
function displayFields(form,customHTML) {
     // Obtendo o usuario via dataset
     
document.getElementById("colleagueId").value = colleagues[0].colleagueId
filter = new java.util.HashMap();
     
document.getElementById("login").value = colleagues[0].login
filter.put("RNC_nr_solicitacao",new java.lang.Integer(20));
     registrosform 
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>
Nota
titleImportante

Para atualizações anteriores ao fluig 1.5.6, utilizar da seguinte maneira:

Bloco de código
languagejavascript
(...)
var colleagues = getDatasetValues("colleague", filter);
(...)

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
languagehtml/xml
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
titleImportante

Para atualizações anteriores ao fluig 1.5.6, utilizar da seguinte maneira:

Bloco de código
languagejavascript
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 = getDatasetValues(Number(676),filter);
	 log.info("Usuário de Abertura: "+ registrosform.get(0).get("RNC_colab_abertura"));
}

Download de exemplo de Formulário Combobox e Dataset: form.html.

Nota
titleImportante

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
titleAtenção - Trabalhando com tabelas

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
languagehtml/xml
<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
languagehtml/xml
 <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
languagehtml/xml
 <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
languagehtml/xml
 <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
languagehtml/xml
<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
languagehtml/xml
<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
languagehtml/xml
<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
titleAtenção

Para mais informações sobre os eventos de formulários PaixFilho acesse Eventos Formulários.

Nota
titleAtenção - Trabalhando com tabelas

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.

...

= getDatasetValues(Number(676),filter);
	 log.info("Usuário de Abertura: "+ registrosform.get(0).get("RNC_colab_abertura"));
}

Download de exemplo de Formulário Combobox e Dataset: form.html.


Nota
titleImportante

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
titleAtenção - Trabalhando com tabelas

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
languagehtml/xml
<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
languagehtml/xml
 <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
languagehtml/xml
 <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
languagehtml/xml
 <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
languagehtml/xml
<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
languagehtml/xml
<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
languagehtml/xml
<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
titleAtenção

Para mais informações sobre os eventos de formulários PaixFilho acesse Eventos Formulários.

Nota
titleAtenção - Trabalhando com tabelas

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
supportedFields
supportedFields
A técnica 2.0 do pai Filho não permite o uso de todos os componentes HTML. É possível utilizar apenas:

  • text
  • radio button
  • checkbox
  • select
  • select multiple
  • hidden
  • textarea
  • image
  • button

Expanda a macro e veja o exemplo:

Bloco de código
languagexml
titleFormulário Pai x Filho
linenumberstrue
collapsetrue
<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>&nbsp;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
languagexml
titleFormulário Pai x Filho
linenumberstrue
collapsetrue
<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>&nbsp;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.

...

languagehtml/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
languagehtml/xml
<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:

...