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:

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: 

<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>

...