Introdução

Aplicações que atendem segmentos variados geralmente precisam prover a seus clientes a possibilidade de customizar suas funcionalidades para atender necessidades específicas.

Neste guia apresentaremos como implementar e possibilitar em sua aplicação formas de customizar formulários e tabelas das páginas criadas com componentes dinâmicos do PO UI.

Componentes e templates disponíveis

• Dynamic Form
  Permite criar formulário editáveis em qualquer posição da página em composição com outros componentes não dinâmicos como gráficos e listas:
  
  
• Dynamic View
  Permite criar formulários de visualização em qualquer posição da página em composição com outros componentes não dinâmicos como gráficos e listas:
  
  
• Page Dynamic Detail
  Permite criar páginas completas (título, breadcrumb, ações) com formulário de visualização:
  
  
• Page Dynamic Edit
  Permite criar páginas completas (título, breadcrumb, ações) com formulário de edição
  
  
• Page Dynamic Search
  Permite criar páginas completas (título, breadcrumb, ações) com área de busca no cabeçalho para composição com outros componentes, dinâmicos ou não.
  
  
• Page Dynamic Table
  Permite criar páginas completas (título, breadcrumb, ações) com tabel

Formas de utilização

Rota

Permite criar páginas dinâmicas sem a necessidade de criar o componente Angular, sendo utilizado diretamente no menu do PO UI.

Seletor

Nessa forma o componente ou template deve ser incluído no componente Angular do seu projeto.

Customização com eventos no back-end utilizando componentes e templates dinâmicos

O uso dos componentes e templates dinâmicos permite a customização das páginas sem interferência no código-fonte do front-end, com eventos gerenciado pelo backend nas APIs utilizadas pela aplicação.

Pré-requisitos do back-end

API

Além da API para retorno e tratamento dos dados (como inclusão, alteração, exclusão) será necessário endpoints que possibilitem:

• Retorno das informações da página, conhecido como metadado, contendo campos e ações
• Validar os dados informados pelo usuário
• Opcionalmente retornar separado as informações customizadas

Estes endpoints podem ser implementados de diversas formas, como abaixo (sendo o endpoint de dados http://localhost:8080/api/v1/people):

• Extensão do endpoint de dados:

  • endpoint de metadado: 
    
http://localhost:8080/api/v1/people/metadata



  • endpoint de validação:
    
    http://localhost:8080/api/v1/people/validate
    
    

• Endpoint agrupador específico:

  • endpoint de metadado: 
    
http://localhost:8080/api/v1/metadata/people
ou
http://localhost:8080/api/v1/metadata?resource=people



  • endpoint de validação:
    
    http://localhost:8080/api/v1/validate/people
    ou
    http://localhost:8080/api/v1/validate?resource=people

Formato JSON

O endpoint de retorno e tratamento de dados deve seguir o padrão definido no Guia de Construção de API da TOTVS:

Para os endpoints de metadado e validação verifique a documentação de cada componente ou template do PO UI, como por exemplo para carga do metadado veja a documentação da interface descrita na propriedade p-load, que deve ser retornada como JSON (o mesmo vale para outras interfaces descritas na documentação):

{
	"fields":
		[ 
			{"property": "name", "label": "Nome"}
		],
	"value": {"name": "Seu nome"}
}

Chamada de função/método em tempo de execução

Verifique se a plataforma ou linha de produto permite a carga e chamada de funções em tempo de execução. Isso permitirá que o cliente possa customizar as validações e outros eventos pelo back end.

Exemplos:

• Pontos de entrada do Protheus
• Fórmulas visuais do RM
• Chamada de UPC do Datasul
• Dynamic import do NodeJS
• Reflection do C# ou Java

Customização de formulários com Dynamic Form

Customização com Page Dynamic