Histórico da Página

CONTEÚDO

1. Introdução / Objetivo
2. Visão Geral
3. Pré-Requisitos
4. Técnicas 
   1. Back-End Progress
   2. Front-End PO-UI
5. Exemplo de utilização
   1. Back-End Progress
   2. Front-End PO-UI
6. Facilitadores Progress
7. Links Úteis

...

1. 1. PO-UI
2. Facilitadores Progress
3. Links Úteis
4. 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:

...

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":

...

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.

<!-- 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>

...