Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.


CONTEÚDO

  1. Visão Geral
    1. Lado Back-End Progress
    2. Lado HTML com Front-End PO-UI
  2. Exemplo de utilização
    1. Lado Back-End Progress
    2. Lado HTML com Front-End PO-UI
  3. Tela XXX
    1. Outras Ações / Ações relacionadas
  4. Tela XXX
    1. Principais Campos e Parâmetros
  5. Tabelas utilizadas

...

No PO-UI, a Form Dinâmica trabalha recebendo uma lista de campos que serão apresentados em tela, bem como uma outra lista contendo os dados que serão apresentados nestes campos.

...

Back-End Progress

Para que possamos customizar uma tela, teremos que ter uma API REST que possa receber as informações do HTML, e esta API deverá permitir a utilização da técnica de EPC. A API REST para ser customizada, deverá ser cadastrada no cadastro de programas (MEN012AA), onde poderemos também especificar a UPC que será utilizada.

...

ParametroTipoTipo de DadosDescrição
pEndPointINPUTCHARACTERContem o nome do endpoint que está sendo executado.
pEventINPUTCHARACTERContem o nome do evento que está sendo executado.
pAPIINPUTCHARACTERContem o nome da API que está sendo executada.
jsonIOINPUT-OUTPUTJSONObjectContem o JSON com os dados (campos ou valores) que poderão ser customizados.

Front-End PO-UI

Para termos uma tela dinâmica do de acordo com o que o Back-End retorna precisamos utilizar os componentes dinâmicos do PO-UI sendo eles:

Componentes:

https://po-ui.io/documentation/po-dynamic-form

https://po-ui.io/documentation/po-dynamic-view

Templates:

https://po-ui.io/documentation/po-page-dynamic-detail

https://po-ui.io/documentation/po-page-dynamic-edit

https://po-ui.io/documentation/po-page-dynamic-search

https://po-ui.io/documentation/po-page-dynamic-table

Migrando THF2 para PO-UI

Como começar?




02. EXEMPLO DE UTILIZAÇÃO

Lado Progress

Primeiramente temos que cadastrar a API REST no cadastro de programas (MEN012AA) e também especificar a UPC a ser utilizada, conforme o exemplo abaixo:

...