Histórico da Página
...
Para termos uma tela dinâmica, de acordo com o que o Back-End retorna, precisamos utilizar os componentes dinâmicos ou as templates do PO-UI sendo eles:
Componentes:
...
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
- Values
04. EXEMPLO DE UTILIZAÇÃO
...
Front-End PO-UI
Introdução:
Basicamente utilizamos o componente de Para este exemplo vamos utilizar o template "Page-Dynamic-Detail para comunicar com o back-end através de duas APIS:
public readonly serviceMetadataApi: 'http://localhost:3000/v1/metadata'; // endpoint dos metadados
public readonly serviceMetadataApi: 'http://localhost:3000/v1/metadata'; // endpoint dos metadados (Carlos - esta duplicado )
...
", mostrando os dados de acordo com o que o back-end nos retorna.
O desenvolvimento do front-end utilizando este campo componente se divide basicamente em três partes:
- 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 do componente vamos basicamente informar qual será a API que retornará os dados de acordo com metadado;
Abaixo segue os exemplos de como ficam estes códigos citados acima.
Routes:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IdiomaDynamicComponent } from './idioma/idioma-dynamic.component';
const routes: Routes = [
{
path: 'idioma', component: IdiomaDynamicComponent,
data: {
serviceMetadataApi: 'https://6a6a8bb8-09be-496b-aeea-faa3a7052052.mock.pstmn.io/api/trn/v1/idiomas/metadados', // endpoint dos metadados
serviceLoadApi: 'https://6a6a8bb8-09be-496b-aeea-faa3a7052052.mock.pstmn.io/api/trn/v1/idiomas/metadados' // endpoint de customizações dos metadados
}
},
{ path: '', redirectTo: '/idioma', pathMatch: 'full' },
{
path: '**', component: IdiomaDynamicComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
|
HTML:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
<div class="po-wrapper"> <po-toolbar p-title="Datasul - Dynamic - Custom"></po-toolbar> <po-menu [p-menus]="menus"></po-menu> <po-page-default p-title="Idiomas"> <p> </p> <po-dynamic-view [p-fields]="fields" [p-value]="employee"> </po-dynamic-view> <po-page-dynamic-detail p-auto-router p-title="Detail" [p-actions]="actions" [p-breadcrumb]="breadcrumb" [p-fields]="fields" [p-service-api]="serviceApi"> </po-page-dynamic-detail> </po-page-default> </div> |
...