Histórico da Página

CONTEÚDO

Visão Geral
Pré-Requisitos
Técnicas
1. Back-End Progress
2. Front-End PO-UI
Exemplo de utilização
1. Back-End Progress
2. 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

language	js
title	idioma.component.ts
linenumbers	true

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>

...

Árvore de páginas

Versões comparadas

Versão antiga 18

Nova versão 19

Chave

CONTEÚDO

02. Pré-Requisitos

03. TÉCNICAS

Back-End Progress

Front-End PO-UI

04. EXEMPLO DE UTILIZAÇÃO

Back-End Progress

Tela:

05. Facilitadores Progress

07. Links Úteis