Histórico da Página

...

Para termos uma tela dinâmica, de acordo com o que o Backback-End end retorna, precisamos utilizar os componentes dinâmicos ou as templates do PO-UI sendo eles:

Componentes:

• 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);

Migrando THF2 para PO-UI

Para facilitar a migração do seu projeto com o THF para o PO UI, disponibilizamos um pacote para fazer esta conversão.

Este pacote, irá passar pelos arquivos do seu projeto alterando as palavras-chaves do THF para a nova nomenclatura do PO UI.

Basta seguir o guia disponibilizado pela equipe do PO-UI:

...

Comunicando com o Back-End Progress

Tendo o projeto iniciado conforme documentação acima e adicionado os componentes desejados do PO-UI vamos ao desenvolvimento.

Todo componente dinâmico é divido basicamente em duas partes:

• Metadado

Basicamente para comunicar com o back-end teremos que ter dois serviços que irão alimentar as informações para tela:

• Metadado
  • Serviço que irá retornar os campos e as propriedades da tela;

• Values
  • Serviço que irá retornar os valores dos campos;
  Values

04. EXEMPLO DE UTILIZAÇÃO

...

• Routes:
  • Na definição da rota é onde vamos colocar qual o caminho da API que vai retornar os dados o Metadados;
• HTML
  • No HTML basta colocarmos o componente, pois o metadados irá retornar o que precisamos para renderizar o componente;
• TypeScript
  
  • No typescript Typescript do componente vamos basicamente informar qual será a API que retornará os dados de acordo com metadado;

...

• https://tdninterno.totvs.com/display/public/FRAMJOI/Desenvolvimento+de+APIs+para+o+produto+Datasul

PO-UI:

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

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

...