Histórico da Página
Informações | ||
---|---|---|
| ||
|
Painel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
|
01. INTRODUÇÃO/OBJETIVO
Temos como objetivo
...
implementar técnicas para facilitar a personalização de telas TOTVS - Linha Datasul de forma lowcode, apenas com cadastro de campos por parte do cliente.
02. VISÃO GERAL
A partir da release 12.1.31
...
são disponibilizados as técnicas e cadastros para implementar a personalização em telas HTML da linha Datasul.
Nesta técnica de personalização, o desenvolvedor deverá realizar o cadastro dos campos a serem personalizados e criar alguns componentes em PO-UI que utilizem os componentes: PO-DYNAMIC-FORM, PO-DYNAMIC-VIEW e PO-PAGE-DYNAMIC-TABLE (este último somente se for necessário). Deve-se também implementar endpoint em Progress
...
, o qual será utilizado como fonte de dados para os campos personalizados.
03. PRÉ-REQUISITOS
Para utilização desta técnica será necessário
...
possuir conhecimento de desenvolvimento com: APIs REST em Progress, Angular, TypeScript e PO-UI.
04. TÉCNICAS
A Técnica de personalização de telas HTML com PO-UI contempla os seguintes objetos:
Endpoint Progress do Framework
Retorna a lista de campos personalizados
...
que devem ser previamente cadastrados na tela de Personalização em HTML.
Neste item, deverá ser utilizado o endpoint Progress /api/btb/v1/personalizationView/metadata/ + código_do_programa ,onde deve ser passado o Código do Programa Datasul que conterá a lista de campos personalizados.
Exemplo: Implementação de personalização para o programa pedido-execucao-monitor, deve-se utilizar o endpoint "/api/btb/v1/personalizationView/metadata/pedido-execucao-monitor":
...
...
...
Endpoint Progress que devem ser implementados na "área de negócio"
Deve retornar os dados que serão apresentados nos campos personalizados;
...
...
...
Utilitário facilitador no Progress
Foi implementado no Progress
...
o utilitário - btb/personalizationUtil.p
...
- com seu include btb/personalizationUtil.i, que deve ser utilizado para retornar à área de negócio a lista de campos personalizáveis de um determinado programa, cujo o intuito é facilitar a implementação para que seja enviado somente os valores dos campos personalizáveis.
Devido a característica do PO-UI dinâmico, caso seja enviado os dados de campos que não estão na lista de campos, o PO-UI irá apresentar o valor do campo com uma label com o mesmo nome do campo. Com a obtenção da lista de campos
...
pode-se evitar o envio de informações que estão fora da lista de campos personalizados.
...
...
...
...
Implementação pela área de negócio a interface em PO-DYNAMIC-FORM e PO-DYNAMIC-VIEW.
Todos os componentes dinâmicos do PO-UI realizam, no mínimo, duas requisições REST, uma para obter a lista de campos personalizáveis e outra para obter os dados a serem apresentados nesses campos.
Abaixo temos o papel de cada componente dinâmico que podemos utilizar:
PO-DYNAMIC-FORM
: Para a edição e criação de um novo registro personalizado;
PO-DYNAMIC-VIEW
: Para a visualização do registro personalizado.
Dica | ||
---|---|---|
| ||
Pode-se implementar também um componente |
Em nossa técnica, em todas as requisições REST, será enviado:
...
- Para buscar a lista de campos personalizados utilizando o endpoint Progress fornecido pelo framework, que é o /api/btb/v1/personalizationView/metadata/ + codigo_do_programa;
...
- O código do programa personalizado e também um id do
...
registro corrente
...
para obtenção dos valores, necessários para buscar os valores dos dados a serem apresentados.
05. EXEMPLO DE UTILIZAÇÃO
...
A seguir são apresentados as telas necessárias para a realização do cadastro dos campos personalizados.
Ao localizar no menu o programa "Campos personalizados (html.personalization-metadata)", é apresentada uma tela em formato de 'lista' que conterá todos os campos (metadados) cadastrados no produto Datasul. Para cadastrar um campo que será utilizado na personalização, basta clicar no botão +Adicionar.
A tela a seguir apresenta o cadastro do 'metadado' relacionado a um campo que pode ser apresentado no programa como personalizado.
...
Código do programa "base" que podem ser aplicadas as técnicas de personalização
Nota | ||
---|---|---|
| ||
É possível cadastrar os campos somente em programas que permitem a personalização |
...
Identificador Campo
...
Nome Campo
...
Nome do campo que será apresentado na tela (label do campo)
Caso o campo não seja informado, o nome do campo apresentado será o informado no identificador.
...
Tipo do campo cadastrado
Caso o campo não seja informado, será considerado que o campo é do tipo Character.
Tipos de campos permitidos:
Tipo | Descrição |
---|---|
Checkbox | Valores lógicos, apresentado na interface como um componente de Switch. |
Números | Valores numéricos, não sendo permitido a inserção de caracteres. |
Data | Valores de datas, apresentado na interface como DatePicker. |
Hora | Valor do horário, apresentado máscara '99:99' por padrão. |
Character | Valores alfanuméricos. |
Moeda | Valores monetários. |
TextArea | Valores alfanuméricos, apresentado na interface em um box com 3 linhas. |
Senha | Valores alfanuméricos, apresentados na interface como Password. |
...
Atributos de campos personalizados
Com a configuração de atributos dos campos personalizados, é possível adicionar outras características tais como:
Ao renderizar os campos personalizados em tela, esses atributos serão inclusos no campo personalizado e enviados para tela.
Aviso | ||
---|---|---|
| ||
Os nomes dos atributos devem ser os mesmos que estão documentados nas propriedades do componente no PO-UI. Exemplo: Para personalizar um campo no formato CPF, criamos o campo COD_CPF e adicionamos um atributo do tipo mask que conterá o formato 999.999.999-99. O atributo mask corresponde a uma propriedade do componente PO-INPUT. |
Componentes em PO-UI
A seguir, são apresentados exemplos de códigos para a implementação com HTML e TypeScript:
Componente HTML (personalization-detail.component.html)
Expandir | |||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||
|
Componente TypeScript (personalization-detail.component.ts)
Expandir | |||||||||
---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
Após cadastrar o campo, o mesmo é apresentado na tela inicial onde pode ser realizado filtros sobre seus resultados, bem como efetuar ações de edição de campos, inclusão de atributos e exclusão de campos.
Ao clicar na opção de editar, não será possível modificar o código do programa Datasul vinculado e também seu identificador. Os demais campos estão habilitados para edição.
Através dos atributos de um campo personalizado, conseguimos adicionar outras caracteristicas nos campos personalizados, como:
- Alterar a cor;
- Ordem que o campo vai aparecer na tela;
- Validações de formato;
- Máscara de apresentação do campo, entre muitos outros.
Ao clicar no botão "Atributos" de um campo personalizado, irá aparecer a seguinte tela para que seja possivel adicionar as novas características.
Ao renderizar os campos personalizados em tela, esses atributos adicionais serão embutidos no campo personalizado e enviados para tela.
Aviso | ||
---|---|---|
| ||
Os nomes dos atributos devem ser os mesmos que estão documentados nas propriedades do componente no PO-UI que você estiver personalizando. Por exemplo: Vamos personalizar um campo para CPF, criamos o campo COD_CPF e adicionamos um atributo do tipo "mask" que conterá o formato deste campo CPF, neste caso "999.999.999-99". Este atributo "mask" corresponde a uma propriedade do componente PO-INPUT. |
Tela do compone
Componentes em PO-UI
A seguir, são apresentados exemplos de códigos para a implementação com HTML e TypeScript:
Componente HTML (personalization-detail.component.html)
Bloco de código | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<po-loading-overlay
[hidden]="!showLoading">
</po-loading-overlay>
<po-page-detail
p-title="Detalhe do Idioma"
[p-breadcrumb]="breadcrumb"
(p-edit)="editClick()"
(p-back)="goBackClick()">
<po-dynamic-view
[p-fields]="fields"
[p-value]="record">
</po-dynamic-view>
</po-page-detail |
Componente TypeScript (personalization-detail.component.ts)
...
language | js |
---|---|
firstline | 1 |
title | Componente TypeScript |
linenumbers | true |
collapse | true |
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
Componente HTML (personalization-edit.component.html)
Expandir | |||
---|---|---|---|
| |||
|
...
|
...
|
...
...
|
...
|
Componente TypeScript (personalization-edit.component.ts)
Expandir | |||||
---|---|---|---|---|---|
| |||||
|
...
|
...
|
...
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
Componente HTML (personalization-list.component.html)
Expandir | ||||
---|---|---|---|---|
| ||||
|
...
|
...
...
|
...
|
Componente TypeScript (personalization-list.component.ts)
Expandir | |||||
---|---|---|---|---|---|
| |||||
|
...
|
...
...
|
...
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
Componente de serviço (personalization.service.ts)
...
language | js |
---|---|
firstline | 1 |
title | Componente de serviço |
linenumbers | true |
collapse | true |
...
|
...
|
...
|
...
|
...
|
...
...
...
...
...
...
...
...
Endpoint em Progress para a área de negócio
A seguir, são apresentados exemplos
...
de endpoint em Progress, que deverão ser implementados pela área de negócio para obtenção dos valores a serem apresentados nos campos personalizados.
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Aviso | ||
---|---|---|
| ||
Caso seja enviado valores da área de negócio que não estejam cadastrados como campos personalizados, o PO-UI, o padrão adicionará essa informação extra na tela, onde será apresentado em formato String sem uma label válida. |
Tela do componente HTML com o resultado da personalização
Tela de Listagem
Tela de Criação/Edição
Tela de Detalhe/Visualização
Dica | ||
---|---|---|
| ||
Os fontes de exemplo para a personalização também estão disponíveis em nosso GIT (fwk-totvs-jille) em "LINKS ÚTEIS". |
06. LINKS ÚTEIS
Documentação API Datasul:
PO-UI:
- Migração THF PO-UI (https://po-ui.io/guides/migration-thf-to-po-ui)
- Dynamic-View (https://po-ui.io/documentation/po-dynamic-view);
- I18N (https://po-ui.io/documentation/po-i18n)
- PO-UI (https://po-ui.io/documentation);
GIT Projeto:
fwk-tools-jille/DATASUL/personalization-poui/ ( https://github.com/totvs/fwk-tools-jille )
07. CONCLUSÃO
A ideia era apresentar uma técnica de construção para a personalização de um programa TOTVS da Liinha Datasul, de forma segura e simples.
Esta documentação trata-se de um MVP, que está sendo continuamente evoluída em nossas Sprints (SQUAD TOOLS).
...
Tela do componente HTML com o resultado da personalização
Tela de Listagem
Tela de Criação/Edição
Tela de Detalhe/Visualização
05. LINKS ÚTEIS
Documentação API Datasul:
Desenvolvimento de APIs para o produto DatasulPO-UI:
Migração THF PO-UI (https://po-ui.io/guides/migration-thf-to-po-ui)
Dynamic-View (https://po-ui.io/documentation/po-dynamic-view);
I18N (https://po-ui.io/documentation/po-i18n)
PO-UI (https://po-ui.io/documentation);
06. CONCLUSÃO
A ideia era apresentar uma técnica de construção para a personalização de um programa TOTVS da Linha Datasul, de forma segura e simples.
Contamos com seu feedback e sugestões para manter a melhoria continua da documentação.