Histórico da Página

...

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;

Routes:

Abaixo segue os exemplos de como ficam estes códigos citados acima.

Routes:

exemplo de como ficará o arquivo de rotas de nossa aplicação, como podemos perceber temos a tag "data", onde vamos passar os dados da API de Metadados.

Bloco de código

language	js
title	app-routing.module.ts
linenumbers	true

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:

No HTML devemos inserir a tag do componente dinâmico "po-page-dynamic-detail" para renderizar os dados de acordo com o retorno do back-end.

Ponto de atenção é a tag "[p-service-api]="serviceApi" onde devemos apontar qual a váriavel do componente que indica a URL da API de Dados.

Bloco de código

language	xml
title	idioma-dynamic.component.html
linenumbers	true

<div class="po-wrapper">
  <po-toolbar p-title="Datasul - Dynamic - Custom"></po-toolbar>

Bloco de código

language	xml
title	idioma-dynamic.component.html
linenumbers	true

<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="DetailIdiomas" [p-actions]="actions" [p-breadcrumb]="breadcrumb"
			[p-fields]="fields" [p-service-api]="serviceApi">
		  </po-page-dynamic-detail>

	</po-page-default>
</div>div>

TypeScript:

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": "codIdioma",
          "label": "Idioma",
          "type": "string"
      },
      {
          "visible": true,
          "property": "desIdioma",
          "label": "Descrição",
          "type": "string"
      },
      {
          "visible": true,
          "property": "codIdiomPadr",
          "label": "Idioma Padrão",
          "type": "string"
      },
      {
          "visible": true,
          "property": "codUsuarUltAtualiz",
          "label": "Usuário Ult Atualiz",
          "type": "string"
      },
      {
          "visible": true,
          "property": "datUltAtualiz",
          "label": "Última Atualização",
          "type": "string"
      },
      {
          "visible": true,
          "property": "hraUltAtualiz",
          "label": "Hora Última Atualiz",
          "type": "string"
      },
      {
          "visible": true,
          "property": "codUsuario",
          "label": "Usuário",
          "type": "string"
      },
      {
          "visible": true,
          "property": "nomUsuario",
          "label": "Nome",
          "type": "string"
      },
      {
          "visible": true,
          "property": "codDialet",
          "label": "Dialeto",
          "type": "string"
      }
  ];


  employee = {
    codIdioma: "EN",
    desIdioma: "Inglês",
    codDialet: "Pt",
    codUsuario: "super",
    nomUsuario: "Super"

  }; 

}

...

Árvore de páginas

Versões comparadas

Versão antiga 33

Nova versão 34

Chave

Routes:

Routes:

HTML:

TypeScript: