Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

  1. Visão Geral
    1. Back-End Progress
    2. Front-End PO-UI
  2. Exemplo de utilização
    1. Back-End Progress
    2. Front-End PO-UI
  3. Tela XXX
    1. Outras Ações / Ações relacionadas
  4. Tela XXX
    1. Principais Campos e Parâmetros
  5. Tabelas utilizadas
  6. Links Úteis


01. VISÃO GERAL

O Objetivo desta técnica é apresentar uma forma de customizar as telas HTML que foram construídas utilizando o Form Dinâmica do PO-UI.

...

Templates:

Migrando THF2 para PO-UI

Como começar

Comunicando com o Back-End Progress

02. 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:

Image Removed

Na aba Opções, teremos que especificar o Template como "API REST", conforme o exemplo abaixo:

Image Removed

Para facilitar a migração do seu projeto com o THF para o PO UI, disponibilizamos um pacote para fazer esta conversão.

Este pacote, irá passar pelos arquivos do seu projeto alterando as palavras-chaves do THF para a nova nomenclatura do PO UI.

Basta seguir o guia disponibilizado pela equipe do PO-UI:

https://po-ui.io/guides/migration-thf-to-po-ui

Como começar / Pré-requisitos



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






02. 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:

Image Added


Na aba Opções, teremos que especificar o Template como "API REST", conforme o exemplo abaixo:

Image Added


Abaixo temos um exemplo de partes de uma API REST que possui 2 procedures, a procedure pGetAll para tratar as chamadas GET dos dados a serem apresentados e a Abaixo temos um exemplo de partes de uma API REST que possui 2 procedures, a procedure pGetAll para tratar as chamadas GET dos dados a serem apresentados e a procedure pGetMetaData que trata os GETs para a criação de novos campos.

...

Bloco de código
titleUPC da API REST
/**************************************************************************
** idiomas_upc.p - Exemplo de epc para Endpoints REST 
***************************************************************************/

USING PROGRESS.json.*.
USING PROGRESS.json.ObjectModel.*.
USING com.totvs.framework.api.*.

DEFINE INPUT        PARAMETER pEndPoint AS CHARACTER  NO-UNDO.
DEFINE INPUT        PARAMETER pEvent    AS CHARACTER  NO-UNDO.
DEFINE INPUT        PARAMETER pAPI      AS CHARACTER  NO-UNDO.
DEFINE INPUT-OUTPUT PARAMETER jsonIO    AS JSONObject NO-UNDO.

DEFINE VARIABLE jAList  AS JsonArray  NO-UNDO.
DEFINE VARIABLE jObj    AS JsonObject NO-UNDO.

DEFINE VARIABLE hBuf    AS HANDLE     NO-UNDO.
DEFINE VARIABLE ix      AS INTEGER    NO-UNDO.
DEFINE VARIABLE iTot    AS INTEGER    NO-UNDO.
DEFINE VARIABLE cType   AS CHARACTER  NO-UNDO.

// carrega as definicoes dos campos da tabela
IF  pEndPoint = "getMetaData"
AND pEvent    = "getMetaData" THEN DO ON STOP UNDO, LEAVE:

    // obtem a lista de campos e valores    
    ASSIGN jAList = jsonIO:getJsonArray('root').

    // cria um buffer da tabela para obter os campos da tabela usuar_mestre
    CREATE BUFFER hBuf FOR TABLE 'usuar_mestre'.
    DO  ix = 1 TO hBuf:NUM-FIELDS:
        // ignora os campos que nao estao nesta lista***/

USING PROGRESS.json.*.
USING PROGRESS.json.ObjectModel.*.
USING com.totvs.framework.api.*.

DEFINE INPUT        PARAMETER pEndPoint AS CHARACTER  NO-UNDO.
DEFINE INPUT        PARAMETER pEvent    AS CHARACTER  NO-UNDO.
DEFINE INPUT        PARAMETER pAPI      AS CHARACTER  NO-UNDO.
DEFINE INPUT-OUTPUT PARAMETER jsonIO    AS JSONObject NO-UNDO.

DEFINE VARIABLE jAList  AS JsonArray  NO-UNDO.
DEFINE VARIABLE jObj    AS JsonObject NO-UNDO.

DEFINE VARIABLE hBuf    AS HANDLE     NO-UNDO.
DEFINE VARIABLE ix      AS INTEGER    NO-UNDO.
DEFINE VARIABLE iTot    AS INTEGER    NO-UNDO.
DEFINE VARIABLE cType   AS CHARACTER  NO-UNDO.

// carrega as definicoes dos campos da tabela
IF  pEndPoint = "getMetaData"
AND pEvent    = "getMetaData" THEN DO ON STOP UNDO, LEAVE:

    // obtem a lista de campos e valores    
    ASSIGN jAList = jsonIO:getJsonArray('root').

    // cria um buffer da tabela para obter os campos da tabela usuar_mestre
    CREATE BUFFER hBuf FOR TABLE 'usuar_mestre'.
    DO  ix = 1 TO hBuf:NUM-FIELDS:
        // ignora os campos que nao estao nesta lista
        IF  NOT CAN-DO("nom_usuario,cod_usuario,cod_dialet,dat_fim_valid,cod_e_mail_local", hBuf:BUFFER-FIELD(ix):NAME) THEN
            NEXT.
        
        // monta a formatacao do item 
        ASSIGN jObj = NEW JsonObject().
        jObj:add('property', hBuf:BUFFER-FIELD(ix):NAME).
        jObj:add('label', hBuf:BUFFER-FIELD(ix):Label).
        jObj:add('visible', TRUE).
        jObj:add('disabled', FALSE).
        
        // ajusta o tipo
        ASSIGN cType = JsonAPIUtils:convertAblTypeToHtmlType(hBuf:BUFFER-FIELD(ix):type).
        jObj:add('type', cType).
        
        // adiciona o objeto na lista
        jAList:add(jObj).
    END.
    hBuf:BUFFER-RELEASE().
    DELETE OBJECT hBuf.
    
    // retorna a nova lista com os campos adicionados
    jsonIO:Set("root", jAList).
END.

// carrega os valores dos campos da tabela
IF  pEndPoint = "getAll"
AND pEvent    = "getAll" THEN DO ON STOP UNDO, LEAVE:
    // obtem a lista de campos e valores    
    ASSIGN jAList = jsonIO:getJsonArray('root').
    
    FIND FIRST usuar_mestre NO-LOCK NO-ERROR.

    // quardado o tamanho da lista em variavel para evitar LOOP devido a adicionar novos itens na lista
    ASSIGN iTot = jAList:length.

    DO  ix = 1 TO iTot:
        ASSIGN jObj = jAList:GetJsonObject(ix).
        
        // alimenta os novos dados
        IF  AVAILABLE usuar_mestre THEN DO:
            jObj:add('cod_usuario', usuar_mestre.cod_usuario) NO-ERROR.
            jObj:add('nom_usuario', usuar_mestre.nom_usuario) NO-ERROR.
            jObj:add('cod_dialet', usuar_mestre.cod_dialet) NO-ERROR.
            jObj:add('dat_fim_valid', usuar_mestre.dat_fim_valid) NO-ERROR.
            jObj:add('cod_e_mail_local', usuar_mestre.cod_e_mail_local) NO-ERROR.
        END.
        
        // adiciona o objeto na lista
        jAList:add(jObj).
        
        FIND NEXT usuar_mestre NO-LOCK NO-ERROR.
    END.

    // devolve para o json ROOT a lista nova com novos objetos 
    jsonIO:Set("root", jAList).
END.

IF  pEndPoint = "getOne"
AND pEvent    = "getOne" THEN DO ON STOP UNDO, LEAVE:
    // nao implementado
END.

IF  pEndPoint = "create"
AND pEvent    = "afterCreate" THEN DO ON STOP UNDO, LEAVE:
    // nao implementado
END.

/* fim */


Ao fazer as requisições, virão os seguintes resultados na UPC.

Bloco de código
Busca do METADADOS onde foram adicionados os novos campos cod_usuario e nom_usuario:

GET - http://localhost:8180/dts/datasul-rest/resources/prg/trn/v1/idiomas/metadados

   "items": [
        {
            "visible": true,
            "property": "cod_idioma",
            "disabled": false,
            "label": "Idioma",
            "type": "string"
        },
        {
            "visible": true,
            "property": "des_idioma",
            "disabled": false,
            "label": "Descrição",
        IF  NOT CAN-DO("nom_usuario,cod_usuario,cod_dialet,dat_fim_valid,cod_e_mail_local", hBuf:BUFFER-FIELD(ix):NAME) THEN "type": "string"
        },
     NEXT.
   {
            "visible": true,
         // monta a formatacao do item 
   "property": "cod_idiom_padr",
            ASSIGN jObj = NEW JsonObject().
"disabled": false,
            jObj:add('property', hBuf:BUFFER-FIELD(ix):NAME).
"label": "Idioma Padrão",
            jObj:add('label', hBuf:BUFFER-FIELD(ix):Label)."type": "string"
        jObj:add('visible', TRUE).
 },
       jObj:add('disabled', FALSE). {
        
    "visible": true,
   // ajusta o tipo
      "property": "cod_usuario",
 ASSIGN cType = JsonAPIUtils:convertAblTypeToHtmlType(hBuf:BUFFER-FIELD(ix):type).
        jObj:add('type', cType).
"disabled": false,
            "label": "Usuário",
        // adiciona o objeto na lista"type": "string"
        jAList:add(jObj).},
    END.
    hBuf:BUFFER-RELEASE().{
    DELETE OBJECT hBuf.
    
  "visible": true,
 // retorna a nova lista com os campos adicionados
    jsonIO:Set("root"property": "nom_usuario", jAList).
END.

// carrega os valores dos campos da tabela
IF  pEndPoint = "getAll"
AND pEvent
            "disabled": false,
     = "getAll" THEN DO ON STOP UNDO, LEAVE:"label": "Nome",
    //  obtem a lista de campos e valores "type": "string"
   
    ASSIGN jAList}
 = jsonIO:getJsonArray('root').
    ]

Busca dos dados onde FINDforam FIRSTadiconados usuar_mestre NO-LOCK NO-ERROR.novos valores:

GET    // quardado o tamanho da lista em variavel para evitar LOOP devido a adicionar novos itens na lista
    ASSIGN iTot = jAList:length.

    DO  ix = 1 TO iTot:- http://localhost:8180/dts/datasul-rest/resources/prg/trn/v1/idiomas

   "items": [
        {
            "codIdioma": "12345678",
            "desIdioma": "12345678901234567890",
        ASSIGN  jObj = jAList:GetJsonObject(ix).
"cod_dialet": "Pt",
            "cod_usuario": "super",
        //  alimenta os novos dados "nom_usuario": "Super"
        IF},
     AVAILABLE usuar_mestre THEN DO:{
            jObj:add('cod_usuario', usuar_mestre.cod_usuario) NO-ERROR."codIdioma": "ale",
            jObj:add('nom_usuario', usuar_mestre.nom_usuario) NO-ERROR."desIdioma": "Alemão",
            jObj:add('"cod_dialet', usuar_mestre.cod_dialet) NO-ERROR.": "PT",
            "cod_usuario": "Manoel",
            jObj:add('dat_fim_valid', usuar_mestre.dat_fim_valid) NO-ERROR.
      "nom_usuario": "Manoel de Carvalho"
      jObj:add('cod_e_mail_local', usuar_mestre.cod_e_mail_local) NO-ERROR. },
        END.{
            "codIdioma": "EN",
        // adiciona o objeto na lista"desIdioma": "Ingles",
        jAList:add(jObj).
      "cod_dialet": "PT",
            "cod_usuario": "Joao",
      
      "nom_usuario": "Joao FIND NEXT usuar_mestre NO-LOCK NO-ERROR.da Silva"
    END.

    //}
 devolve para o json ROOT a lista nova com novos objetos 
    jsonIO:Set("root", jAList).
END.

IF  pEndPoint = "getOne"
AND pEvent    = "getOne" THEN DO ON STOP UNDO, LEAVE:
    // nao implementado
END.

IF  pEndPoint = "create"
AND pEvent    = "afterCreate" THEN DO ON STOP UNDO, LEAVE:
    // nao implementado
END.

/* fim */

...

 ]


Front-End PO-UI


Introdução:

Código Fonte HTML: 

Bloco de código
themeEclipse
<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>

Código Fonte TypeScript: 

Bloco de código
Busca do METADADOS onde foram adicionados os novos campos cod_usuario e nom_usuario:

GET - http://localhost:8180/dts/datasul-rest/resources/prg/trn/v1/idiomas/metadados

   "items": [
        {
            "visible": true,
            "property": "cod_idioma",
            "disabled": false,
            "label": "Idioma",
            "type": "string"
        },
        {
            "visible": true,
            "property": "des_idioma",
            "disabled": false,
            "label": "Descrição",
            "type": "string"
        },
        {
            "visible": true,
            "property": "cod_idiom_padr",
            "disabled": false,
            "label": "Idioma Padrão",
            "type": "string"
        },
        {
            "visible": true,
            "property": "cod_usuario",
            "disabled": false,
            "label": "Usuário",
            "type": "string"
        },
        {
            "visible": true,
            "property": "nom_usuario",
            "disabled": false,
            "label": "Nome",
            "type": "string"
        }
     ]

Busca dos dados onde foram adiconados novos valores:

GET - http://localhost:8180/dts/datasul-rest/resources/prg/trn/v1/idiomas

   "items": [
        {
            "codIdioma": "12345678",
            "desIdioma": "12345678901234567890",
            "cod_dialet": "Pt",
            "cod_usuario": "super",
            "nom_usuario": "Super"
        },
        {
            "codIdioma": "ale",
            "desIdioma": "Alemão",
            "cod_dialet": "PT",
            "cod_usuario": "Manoel",
            "nom_usuario": "Manoel de Carvalho"
        },
        {
            "codIdioma": "EN",
            "desIdioma": "Ingles",
            "cod_dialet": "PT",
            "cod_usuario": "Joao",
            "nom_usuario": "Joao da Silva"
        }
    ]

...

Tela:




03. Links Utilizáveis 



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

...