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.
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á cadastrar os campos a serem personalizados, criar um componente em PO-UI que utilize o PO-DYNAMIC-VIEW e criar um endpoint progress que servirá como fonte de dados para os campos personalizados.
Para utilização desta técnica será necessário ter um conhecimento de desenvolvimento com: Progress, Angular, TypeScript e PO-UI.
A Técnica de personalização de telas HTML com PO-UI contempla os seguintes objetos:
1) Endpoint progress do Framework para obter a lista de campos personalizados, que são cadastrado na tela de Personalização em HTML;
Neste item, deverá ser utilizado o endpoint progress /api/btb/v1/personalizationView/metadata/ onde deve ser passado o Código do Programa Datasul que terá os campos personalizados.
Exemplo: Se formos criar uma personalização para o programa pedido-execucao-monitor, chamaremos o endpoint "/api/btb/v1/personalizationView/metadata/pedido-execucao-monitor"
2) Endpoint progress da área de negócio para obter os dados que serão apresentados nos campos personalizados;
3) Criação de um componente pela área de negócio que utilize o componente PO-DYNAMIC-VIEW, que utilizará a lista de campos personalizados e os dados destes campos personalizados.
(EM DESENVOLVIMENTO)
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.
| Campo | Descrição | Obrigatório | |
|---|---|---|---|
| Código Programa Datasul | Código do programa "base" que podem ser aplicadas as técnicas de personalização
| Sim | |
Identificador Campo | Identificador único do campo (por programa), necessário para a geração da tela personalizada | Sim | |
Nome Campo | Nome do campo que será apresentado na tela Caso o campo não seja informado, o nome do campo apresentado será o informado no identificador [pendente construção da técnica] | Não | |
| Tipo Campo | Tipo do campo cadastrado Caso o campo não seja informado, será considerado que o campo é do tipo Input [pendente construção da técnica] Exemplos: Input, checkbox, textbox, entre entre outros | Não | |
| Validação Campo | Caso o campo possuir alguma validação de máscaras, restrição de valores, é necessário informar neste campo Exemplos: [pendente construção da técnica] | Não | |
| Somente Leitura | Opção para que o campo seja apresentado como 'somente leitura' | Sim | |
| Habilita personalização | Opção para habilitar ou desabilitar a apresentação da personalização por campo | Sim |
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 ou exclusão.
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.
A ideia era apresentar uma técnica de construção para a persoanlizaçã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).
<!-- esconder o menu -->
<style>
div.theme-default .ia-splitter #main {
margin-left: 0px;
}
.ia-fixed-sidebar, .ia-splitter-left {
display: none;
}
#main {
padding-left: 10px;
padding-right: 10px;
overflow-x: hidden;
}
.aui-header-primary .aui-nav, .aui-page-panel {
margin-left: 0px !important;
}
.aui-header-primary .aui-nav {
margin-left: 0px !important;
}
</style>
|