Histórico da Página
...
- Visão Geral
- Back-End Progress
- Front-End PO-UI
- Exemplo de utilização
- Back-End Progress
- Front-End PO-UI
- Tela XXX
- Outras Ações / Ações relacionadas
- Outras Ações / Ações relacionadas
- Tela XXX
- Principais Campos e Parâmetros
- Principais Campos e Parâmetros
- Tabelas utilizadas
- 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.
...
- Dynamic-Form (https://po-ui.io/documentation/po-dynamic-form);
- Dynamic-View (https://po-ui.io/documentation/po-dynamic-view);
Templates:
- Page-Dynamic-Detail (https://po-ui.io/documentation/po-page-dynamic-detail);
- Page-Dymic-Edit (https://po-ui.io/documentation/po-page-dynamic-edit);
- Page-Dynamic-Search (https://po-ui.io/documentation/po-page-dynamic-search);
- Page-Dynamic-Table (https://po-ui.io/documentation/po-page-dynamic-table);
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:
Na aba Opções, teremos que especificar o Template como "API REST", conforme o exemplo abaixo:
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:
Na aba Opções, teremos que especificar o Template como "API REST", conforme o exemplo abaixo:
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 | ||
---|---|---|
| ||
/************************************************************************** ** 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 | ||
---|---|---|
| ||
<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> |
...