<po-loading-overlay
  [hidden]="!showLoading">
</po-loading-overlay>

<po-page-detail
  p-title="Personalização"
  [p-breadcrumb]="breadcrumb"
  (p-edit)="editClick()"
  (p-back)="goBackClick()">
  <po-dynamic-view
    [p-fields]="fields"
    [p-value]="record">
  </po-dynamic-view>
</po-page-detail>

import { Component, OnInit } from '@angular/core';
import { PoBreadcrumb, PoBreadcrumbItem, PoNotificationService } from '@po-ui/ng-components';

import { PersonalizationService } from './personalization.service';

@Component({
  selector: 'app-personalization',
  templateUrl: './personalization.component.html',
  styleUrls: ['./personalization.component.css']
})

export class PersonalizationComponent implements OnInit {
  // definicao das variaveis utilizadas
  public currentId: string;
  public fields: Array<any> = [];
  public record = {};
  public showLoading = false;
  public cProg = 'pedido-execucao-monitor';

  public breadcrumb: PoBreadcrumb = { items: [] };
  public breadcrumbItem: PoBreadcrumbItem;

  // construtor com os servicos necessarios
  constructor(
    private service: PersonalizationService,
    private poNotification: PoNotificationService
  ) { }

  // load do componente
  public ngOnInit(): void {
    this.showLoading = true;
    this.record = {};
    // busca os valores dos dados a serem apresentados
    this.service.loadValues(this.cProg, 'esp').subscribe(resp => {
      console.log(resp);
      Object.keys(resp).forEach((key) => this.record[key] = resp[key]);
      // carrega a lista de campos somente apos receber o registro a ser apresentado
      if (this.fields === null || this.fields.length === 0) {
        this.service.loadMetadata(this.cProg).subscribe(metadata => {
          // tslint:disable-next-line:no-string-literal
          this.fields = metadata['fields'];
          this.showLoading = false;
        });
      }
    });

    this.setBreadcrumb();
  }

  private setBreadcrumb(): void {
    this.breadcrumbItem = { label: 'Home', link: '/' };
    this.breadcrumb.items = this.breadcrumb.items.concat(this.breadcrumbItem);
    this.breadcrumbItem = { label: 'Personalização' };
    this.breadcrumb.items = this.breadcrumb.items.concat(this.breadcrumbItem);
  }

  // Redireciona quando clicar no botao Edit
  public editClick(): void {
    this.poNotification.information('Voce clicou na edição dos dados');
  }

  // Redireciona quando clicar no botao Voltar
  public goBackClick(): void {
    this.poNotification.information('Voce clicou para retornar para a tela anterior');
  }
}

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { PoNotificationService } from '@po-ui/ng-components';

const httpOptions: object = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
  })
};

@Injectable({
  providedIn: 'root'
})
export class PersonalizationService {
  // Endpoint progress do framework para obtencao da lista de campos personalizados
  private urlMetadata = '/api/btb/v1/personalizationView/metadata/';

  // Endpoint progress da area de negocio para obtencao dos valores dos campos personalizados
  private urlArea = '/api/trn/v1/idiomaValues/';

  private fieldList: Array<any> = [];

  constructor(
    private http: HttpClient,
    private poNotification: PoNotificationService,
  ) { }

  public loadMetadata(cProg) {
    return this.http.post<any[]>(this.urlMetadata + cProg, httpOptions).pipe();
  }

  public loadValues(cProg, cId) {
    return this.http.get<any[]>(this.urlArea + cProg + '/' + cId, httpOptions).pipe();
  }

  public getUrlArea(): string {
    return this.urlArea;
  }
}

{utp/ut-api.i}

{utp/ut-api-action.i pGetData GET /~* }

{utp/ut-api-notfound.i}

/** Procedure que retorna os valores **/
PROCEDURE pGetData:
    DEFINE INPUT  PARAMETER oJsonInput  AS JsonObject NO-UNDO.
    DEFINE OUTPUT PARAMETER oJsonOutput AS JsonObject NO-UNDO.

    DEFINE VARIABLE oRequest   AS JsonAPIRequestParser NO-UNDO.
    DEFINE VARIABLE oResponse  AS JsonAPIResponse      NO-UNDO.
    DEFINE VARIABLE oObj       AS JsonObject           NO-UNDO.
    DEFINE VARIABLE cProg      AS CHARACTER            NO-UNDO.
    DEFINE VARIABLE cId        AS CHARACTER            NO-UNDO.

    oObj = NEW JsonObject().

    // Le os parametros enviados pela interface HTML
    oRequest = NEW JsonAPIRequestParser(oJsonInput).
    
    // Obtem o programa e o codigo do registro corrente
    cProg = oRequest:getPathParams():getCharacter(1) NO-ERROR.
    cId = oRequest:getPathParams():getCharacter(2) NO-ERROR.

    LOG-MANAGER:WRITE-MESSAGE("getData - cProg = " + cProg, ">>>>>").
    LOG-MANAGER:WRITE-MESSAGE("getData - cId = " + cId, ">>>>>").

    FIND FIRST prog_dtsul
        WHERE prog_dtsul.cod_prog_dtsul = cProg
        NO-LOCK NO-ERROR.
    LOG-MANAGER:WRITE-MESSAGE("getData - prog found = " + string(AVAILABLE prog_dtsul), ">>>>>").
    IF  AVAILABLE prog_dtsul THEN 
        LOG-MANAGER:WRITE-MESSAGE("getData - permite personalizacao = " + string(prog_dtsul.log_permite_perzdo), ">>>>>").
        
    IF  AVAILABLE prog_dtsul 
    AND prog_dtsul.log_permite_perzdo = TRUE THEN DO:
        FIND FIRST idioma 
            WHERE idioma.cod_idioma = cId
            NO-LOCK NO-ERROR.
        LOG-MANAGER:WRITE-MESSAGE("getData - idioma found = " + string(AVAILABLE idioma), ">>>>>").
        IF  AVAILABLE idioma THEN DO:
            oObj:add("codIdioma", idioma.cod_idioma).
            oObj:add("desIdioma", idioma.des_idioma).
            oObj:add("codIdiomPadr", idioma.cod_idiom_padr).
        END.
        LOG-MANAGER:WRITE-MESSAGE("getData - oObj = " + String(oObj:getJsonText()), ">>>>>").
    END.

    oResponse   = NEW JsonAPIResponse(oObj).
    oJsonOutput = oResponse:createJsonResponse().
END PROCEDURE.

/* fim */

Caso seja enviado valores da área de negócio que não estejam cadastrados como campos personalizados, o PO-UI por padrão adicionará essa informação extra na tela, onde será apresentado como String sem um label válido.

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