Histórico da Página
CONTEÚDO
- 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
...
Este guia será divido basicamente em duas partes, como vamos trabalhar no Back-End Progress e acessar esses dados através do Front-End PO-UI.
02. Pré-Requisitos
Para execução da técnica abaixo é necessário as seguintes situações:
- API Rest desenvolvida no útlimo padrão divulgado pelo Framework;
03. TÉCNICAS
Back-End Progress
A técnica Back-End Progress se divide basicamente em três partes:
- Cadastro de Programa / EPC;
- Adicionar Includes para chamada UPC na API Rest;
- Desenvolvimento da UPC;
Cadastro de Programa:
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.
Adicionar Includes para chamada UPC na API Rest:Desenvolvimento da UPC;
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.
...
Parametro | Tipo | Tipo de Dados | Descrição |
---|---|---|---|
pEndPoint | INPUT | CHARACTER | Contem o nome do endpoint que está sendo executado. |
pEvent | INPUT | CHARACTER | Contem o nome do evento que está sendo executado. |
pAPI | INPUT | CHARACTER | Contem o nome da API que está sendo executada. |
jsonIO | INPUT-OUTPUT | JSONObject | Contem o JSON com os dados (campos ou valores) que poderão ser customizados. |
Front-End PO-UI
Pré-Requisitos
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:
- Dynamic-Form (https://po-ui.io/documentation/po-dynamic-form);
- Dynamic-View (https://po-ui.io/documentation/po-dynamic-view);
...
- 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
...
04. EXEMPLO DE UTILIZAÇÃO
Back-End 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:
...
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
import { Component } from '@angular/core'; import { PoMenuItem } from '@po-ui/ng-components'; import { PoDynamicViewField } from '@po-ui/ng-components'; import { PoBreadcrumb } from '@po-ui/ng-components'; import { PoPageDynamicDetailActions, PoPageDynamicDetailField } from '@po-ui/ng-templates'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { readonly menus: Array<PoMenuItem> = [ { label: 'Home', action: this.onClick.bind(this) } ]; private onClick() { alert('Clicked in menu item') } public readonly serviceApi = 'https://po-sample-api.herokuapp.com/v1/people'; public readonly serviceMetadataApi: 'http://localhost:3000/v1/metadata'; // endpoint dos metadados //public readonly serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados 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' } ] }; public readonly fields: Array<PoPageDynamicDetailField> = [ { "visible": true, "property": "cod_idioma", "label": "Idioma", "type": "string" }, { "visible": true, "property": "des_idioma", "label": "Descrição", "type": "string" }, { "visible": true, "property": "cod_idiom_padr", "label": "Idioma Padrão", "type": "string" }, { "visible": true, "property": "cod_usuario", "label": "Usuário", "type": "string" }, { "visible": true, "property": "nom_usuario", "label": "Nome", "type": "string" } ]; employee = { cod_idioma: "EN", des_idioma: "Inglês", cod_dialet: "Pt", cod_usuario: "super", nom_usuario: "Super" }; } |
Tela:
...
05. Facilitadores Progress
...
07. Links Úteis
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> |
...