Histórico da Página
CONTEÚDO
- Introdução / Objetivo
- Visão Geral
- Pré-Requisitos
- Técnicas
- Back-End Progress
- Front-End PO-UI
- Exemplo de utilização
- Back-End Progress
- Front-End PO-UI
- Facilitadores Progress
- Links Úteis
...
- PO-UI
- Facilitadores Progress
- Links Úteis
- Conclusão
01. INTRODUÇÃO / OBJETIVO
Temos como objetivo desta técnica, apresentar um MVP de como customizar as telas HTML, através de intervenções em API Rest no back-end Progress.
Para que caso surja a necessidade do cliente final customizar o resultado de uma tela, ele possa fazer isso de forma dinâmica e em tempo de renderização.
Para isso vamos utilizar o utilizar o Framework PO-UI como front-end e seus componentes dinâmicos, comunicando com back-end Datasul Progress.
02. VISÃO GERAL
Temos como objetivo desta técnica apresentar uma forma de customizar as telas HTML através de intervenções no back-end.
...
Abaixo temos um fluxo das informações do PO-UI até a UPC em Progress:
...
03. Pré-Requisitos
Temos como pré-requisito para execução da técnica citada abaixo:
- API Rest desenvolvida no último padrão divulgado pelo Framework, utilizando a técnica de construção de APIs (https://tdninterno.totvs.com/display/public/FRAMJOI/Desenvolvimento+de+APIs+para+o+produto+Datasul);
- Utilização do Framework PO-UI na última versão disponível (v2.4.0);
- Utilização do Framework Tomcat Datasul;
- Utilização da técnica de customização com EPC.
...
04. TÉCNICAS
Técnica Back-End Progress:
...
- Values
- Serviço que irá retornar os valores dos campos;
...
05. EXEMPLO DE UTILIZAÇÃO
Back-End Progress
Introdução:
...
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
import { Component } from '@angular/core'; import { PoMenuItem } from '@po-ui/ng-components'; import { PoBreadcrumb } from '@po-ui/ng-components'; import { PoPageDynamicDetailActions} from '@po-ui/ng-templates'; @Component({ selector: 'app-idioma-dynamic', templateUrl: './idioma-dynamic.component.html', styleUrls: ['./idioma-dynamic.component.css'] }) export class IdiomaDynamicComponent { public readonly serviceApi = 'http://localhost:8180/dts/datasul-rest/resources/prg/trn/v1/idiomas'; public readonly actions: PoPageDynamicDetailActions = { back: '/documentation/po-page-dynamic-table' }; public readonly breadcrumb: PoBreadcrumb = { items: [ { label: 'Home', link: '/' }, { label: 'People', link: '/documentation/po-page-dynamic-table' }, { label: 'Detail' } ] }; } |
...
06. Facilitadores Progress
Criamos dois novos facilitadores para auxiliar no desenvolvimento das API's dentro da classe "com.totvs.framework.api.JsonAPIUtils":
Método | Descrição | Assinatura/Exemplo |
---|---|---|
convertAblTypeToHtmlType | Converte os tipos nativos do Progress para os tipos esperados pelo PO-UI | Assinatura: convertAblTypeToHtmlType (INPUT cType AS CHARACTER) Exemplo: ASSIGN cType = JsonAPIUtils:convertAblTypeToHtmlType ("integer"). O retorno no cType será "number", que é um formato reconhecido pelo PO-UI. |
convertToCamelCase | Converter os nomes dos campos lidos da tabela, normalmente com "_", para "camel case", que é o mais comum utilizado em Json's. | Assinatura: convertToCamelCase (INPUT cKey AS CHARACTER) Exemplo: ASSIGN cField= JsonAPIUtils:convertToCamelCase ("cod_e_mail_usuar"). O retorno no cField será "codEMailUsuar", que é o campo em Camel Case. |
...
07. Links Úteis
Documentação API Datasul:
...
- Migração THF PO-UI (https://po-ui.io/guides/migration-thf-to-po-ui)
- Dynamic-Form (https://po-ui.io/documentation/po-dynamic-form);
- Dynamic-View (https://po-ui.io/documentation/po-dynamic-view);
- Page-Dynamic-Detail (https://po-ui.io/documentation/po-page-dynamic-detail);
- Page-Dymic-Edit (https://po-ui.io/documentation/po-page-dynamic-edit);
- Page-Dynamic-Search (https://po-ui.io/documentation/po-page-dynamic-search);
- Page-Dynamic-Table (https://po-ui.io/documentation/po-page-dynamic-table);
GIT Projeto:
07. Conclusão
A ideia era apresentar uma técnica para que desse a possibilidade para as áreas de negócio, de forma segura e simples, disponibilizarem pontos de customização em suas API’s REST.
Acreditamos que a forma que foi apresentada, fica livre para criar e evoluir de acordo com a evolução dos componentes do PO-UI.
HTML |
---|
<!-- 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> |
...