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;
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;
...
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:
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> |
...