Temos como objetivo desta técnica, apresentar um MVP de como customizar as telas HTML, através de intervenções em API Rest no back-end Progress.
Para que caso surja a necessidade do cliente final customizar o resultado de uma tela, ele possa fazer isso de forma dinâmica e em tempo de renderização.
Para isso vamos utilizar o utilizar o Framework PO-UI como front-end e seus componentes dinâmicos, comunicando com back-end Datasul Progress.
No PO-UI, uma tela dinâmica trabalha recebendo uma lista de campos, que serão apresentados em tela, e uma outra lista contendo os dados que serão apresentados nestes campos.
Nesta técnica, vamos apresentar como fornecer estas duas listas para o PO-UI, onde poderemos customizá-las de acordo com a necessidade.
Este guia será divido basicamente em duas partes, como vamos trabalhar no Back-End Progress e acessar esses dados através do Front-End PO-UI.
Abaixo temos um fluxo das informações do PO-UI até a UPC em Progress:
IMPORTANTE: Esta técnica está disponível a partir da versao 12.1.29 do Framework da Linha Datasul. |
Temos como pré-requisito para execução da técnica citada abaixo:
Introdução:
A técnica Back-End Progress é formada pelos passos abaixo:
Para que possamos customizar uma tela HTML construída em PO-UI, necessitamos que o Back-End nos retorne qual o metadado e os valores da tela em questão através de uma API Rest.
Sendo assim essa API deve conter no mínimo dois endpoints básicos:
Tendo criado a API REST que retorna os dados básicos para a tela, partimos para o segundo o passo, que é preparação do endpoint da API para customização.
Esta API deverá ser cadastrada no cadastro de programas (MEN012AA), onde poderemos também especificar a UPC que será utilizada.
Na técnica de construção de APIs REST é informado sobre a utilização da include "utp/ut-api.i", pois este include identificará se a API possui uma UPC cadastrada ou não.
IMPORTANTE: A UPC para APIs REST possui um formato diferenciado das UPCs Padrões e de Ponto Estratégico, pois um dos parâmetros utilizados é um JsonObject. |
Enfim para chamarmos um programa de customização, criamos uma include que fará esta chamada. Abaixo segue mais detalhes sobre esta include.
Ela encontra-se na pasta include e possui o nome i-epcrest.i, conforme o exemplo abaixo:
{include/i-epcrest.i &endpoint=<nome_end_point> &event=<nome_do_evento> &jsonVar=<variável_jsonObject_com_conteúdo>} |
IMPORTANTE: Não é permitido misturar tipos diferentes de UPCs no mesmo programa, pois as assinaturas são incompatíveis e poderão ocorrer erros de parâmetros. |
Abaixo temos a lista de pré-processadores que devem ser passados para a include i-epcrest.i:
Preprocessador | Descrição |
---|---|
endpoint | Especifica o endpoint que esta sendo chamado pelo HTML. Uma API REST deve possuir 1 ou mais endpoints. |
event | É o nome do evento que esta ocorrendo antes de chamar a UPC. Exemplo: beforeCreate, getAll, getMetaData, etc. |
jsonVar | É a variável do tipo JsonObject que será passada como INPUT-OUTPUT para a UPC. |
IMPORTANTE: Todas as UPCs de API REST deverão importar os seguintes pacotes: USING PROGRESS.json.*. USING PROGRESS.json.ObjectModel.*. USING com.totvs.framework.api.*. |
Parâmetros recebidos na UPC da API REST:
Parametro | Tipo | Tipo de Dados | Descrição |
---|---|---|---|
pEndPoint | INPUT | CHARACTER | Contem o nome do endpoint que está sendo executado. |
pEvent | INPUT | CHARACTER | Contem o nome do evento que está sendo executado. |
pAPI | INPUT | CHARACTER | Contem o nome da API que está sendo executada. |
jsonIO | INPUT-OUTPUT | JSONObject | Contem o JSON com os dados (campos ou valores) que poderão ser customizados. |
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:
Templates:
Basicamente para comunicar com o back-end teremos que ter dois serviços que irão alimentar as informações para tela:
Para exemplificar a técnica citada acima, criamos uma API Rest que irá retornar os dados da tabela de idiomas, chamando uma UPC que acrescenta algumas informações da tabela usuar_mestre.
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 API REST com suas procedures que são:
Como podemos verificar todas as procedures possuem chamadas para o programa de UPC:
{utp/ut-api.i} {utp/ut-api-action.i pFindById GET /byid/~* } {utp/ut-api-action.i pFindAll GET /~* } {utp/ut-api-action.i pUpdateById PUT /~* } {utp/ut-api-action.i pGetMetadata POST /metadata/~* } {utp/ut-api-action.i pCreate POST /~* } {utp/ut-api-action.i pDeleteById DELETE /~* } {utp/ut-api-notfound.i} DEFINE TEMP-TABLE ttIdiomas NO-UNDO FIELD cod_idioma LIKE idioma.cod_idioma SERIALIZE-NAME "codIdioma" FIELD des_idioma LIKE idioma.des_idioma SERIALIZE-NAME "desIdioma" FIELD cod_idiom_padr LIKE idioma.cod_idiom_padr SERIALIZE-NAME "codIdiomPadr" FIELD dat_ult_atualiz LIKE idioma.dat_ult_atualiz SERIALIZE-NAME "datUltAtualiz" FIELD hra_ult_atualiz LIKE idioma.hra_ult_atualiz SERIALIZE-NAME "hraUltAtualiz" FIELD id AS RECID. /** Procedure que retorna a metadata **/ PROCEDURE pGetMetadata: DEFINE INPUT PARAMETER oJsonInput AS JsonObject NO-UNDO. DEFINE OUTPUT PARAMETER oJsonOutput AS JsonObject NO-UNDO. DEFINE VARIABLE oResponse AS JsonAPIResponse NO-UNDO. DEFINE VARIABLE oIdiomas AS JsonArray NO-UNDO. DEFINE VARIABLE oObj AS JsonObject NO-UNDO. ASSIGN oIdiomas = NEW JsonArray(). /* Define a lista de campos a serem apresentados no HTML */ ASSIGN oObj = NEW JsonObject(). oObj:add('property', 'codIdioma'). oObj:add('label', 'Idioma'). oObj:add('visible', TRUE). oObj:add('disable', TRUE). oObj:add('type', JsonAPIUtils:convertAblTypeToHtmlType('character')). oObj:add('gridColumns', 6). oIdiomas:add(oObj). ASSIGN oObj = NEW JsonObject(). oObj:add('property', 'desIdioma'). oObj:add('label', 'Descrição'). oObj:add('visible', TRUE). oObj:add('required', TRUE). oObj:add('type', JsonAPIUtils:convertAblTypeToHtmlType('character')). oObj:add('gridColumns', 6). oIdiomas:add(oObj). ASSIGN oObj = NEW JsonObject(). oObj:add('property', 'codIdiomPadr'). oObj:add('label', 'Idioma Padrão'). oObj:add('visible', TRUE). oObj:add('type', JsonAPIUtils:convertAblTypeToHtmlType('character')). oObj:add('gridColumns', 6). oIdiomas:add(oObj). ASSIGN oObj = NEW JsonObject(). oObj:add('property', 'datUltAtualiz'). oObj:add('label', 'Última Atualização'). oObj:add('visible', TRUE). oObj:add('format', 'dd/MM/yyyy'). oObj:add('disable', TRUE). oObj:add('type', JsonAPIUtils:convertAblTypeToHtmlType('date')). oObj:add('gridColumns', 6). oIdiomas:add(oObj). ASSIGN oObj = NEW JsonObject(). oObj:add('property', 'hraUltAtualiz'). oObj:add('label', 'Hora Última Atualização'). oObj:add('visible', TRUE). oObj:add('disable', TRUE). oObj:add('type', JsonAPIUtils:convertAblTypeToHtmlType('character')). oObj:add('gridColumns', 6). oIdiomas:add(oObj). // Adiciona o campo ID na lista de campos para a interface HTML // Isso facilitara o gerenciamento do registro na interface HTML oIdiomas:add(JsonAPIUtils:getIdField()). // Adiciona o JsonArray em um JsonObject para enviar para a UPC oObj = NEW JsonObject(). oObj:add('root', oIdiomas). // Realiza a chamada da UPC Progress {include/i-epcrest.i &endpoint=getMetaData &event=getMetaData &jsonVar=oObj} // Recupera o JsonArray de dentro do JsonObject retornado pela UPC oIdiomas = oObj:getJsonArray('root'). // Retorna a colecao de campos customizados ou nao para a interface HTML oResponse = NEW JsonAPIResponse(oIdiomas). oJsonOutput = oResponse:createJsonResponse(). END PROCEDURE. /** Procedure que retorna os valores **/ PROCEDURE pFindAll: DEFINE INPUT PARAMETER oJsonInput AS JsonObject NO-UNDO. DEFINE OUTPUT PARAMETER oJsonOutput AS JsonObject NO-UNDO. DEFINE VARIABLE oResponse AS JsonAPIResponse NO-UNDO. DEFINE VARIABLE oIdiomas AS JsonArray NO-UNDO. DEFINE VARIABLE oObj AS JsonObject NO-UNDO. DEFINE VARIABLE oId AS JsonObject NO-UNDO. EMPTY TEMP-TABLE ttIdiomas. // Monta a lista de valores dos campos FOR EACH idioma NO-LOCK BY idioma.cod_idioma: CREATE ttIdiomas. BUFFER-COPY idioma TO ttIdiomas. // Alimenta o campo ID utilizado pela interface HTML como chave primaria ASSIGN ttIdiomas.id = RECID(idioma). END. // Obtem um jsonArray com base no conteudo da temp-table oIdiomas = JsonAPIUtils:convertTempTableToJsonArray(TEMP-TABLE ttIdiomas:HANDLE). // Adiciona o JsonArray em um JsonObject para enviar para a UPC oObj = NEW JsonObject(). oObj:add('root', oIdiomas). // Realiza a chamada da UPC Progress {include/i-epcrest.i &endpoint=findAll &event=findAll &jsonVar=oObj} // Recupera o JsonArray de dentro do JsonObject retornado pela UPC oIdiomas = oObj:getJsonArray('root'). // Retorna a colecao de dados customizados ou nao para a interface HTML oResponse = NEW JsonAPIResponse(oIdiomas). oJsonOutput = oResponse:createJsonResponse(). END PROCEDURE. /** Procedure que retorna 1 registro pelo ID **/ PROCEDURE pFindById: 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 oIdioma AS JsonObject NO-UNDO. DEFINE VARIABLE oId AS JsonObject NO-UNDO. DEFINE VARIABLE cId AS CHARACTER NO-UNDO. DEFINE VARIABLE iId AS INTEGER NO-UNDO. EMPTY TEMP-TABLE ttIdiomas. // Le os parametros enviados pela interface HTML oRequest = NEW JsonAPIRequestParser(oJsonInput). // Obtem o ID cId = oRequest:getPathParams():getCharacter(2). // Localiza o registro na tabela IDIOMA pelo ID (recid) FIND FIRST idioma WHERE RECID(idioma) = INT(cId) NO-LOCK NO-ERROR. IF AVAILABLE idioma THEN DO: BUFFER-COPY idioma TO ttIdiomas. ASSIGN ttIdiomas.id = RECID(idioma). END. // Obtem um jsonArray com base no conteudo da temp-table oIdioma = JsonAPIUtils:convertTempTableFirstItemToJsonObject(TEMP-TABLE ttIdiomas:HANDLE). // Realiza a chamada da UPC Progress {include/i-epcrest.i &endpoint=findById &event=findById &jsonVar=oIdioma} // Retorna o registro customizado ou nao para a interface HTML oResponse = NEW JsonAPIResponse(oIdioma). oJsonOutput = oResponse:createJsonResponse(). END PROCEDURE. /** Procedure que cria um novo registro na tabela **/ PROCEDURE pCreate: DEFINE INPUT PARAMETER oJsonInput AS JsonObject NO-UNDO. DEFINE OUTPUT PARAMETER oJsonOutput AS JsonObject NO-UNDO. DEFINE VARIABLE oBody AS JsonObject NO-UNDO. DEFINE VARIABLE oRequest AS JsonAPIRequestParser NO-UNDO. DEFINE VARIABLE oResponse AS JsonAPIResponse NO-UNDO. DEFINE VARIABLE cCodIdioma AS CHARACTER NO-UNDO. DEFINE VARIABLE cDesIdioma AS CHARACTER NO-UNDO. DEFINE VARIABLE cCodIdiomPadr AS CHARACTER NO-UNDO. DEFINE VARIABLE rIdioma AS RECID NO-UNDO. DEFINE VARIABLE lCreated AS LOGICAL NO-UNDO INITIAL FALSE. // Le os parametros e os dados enviados pela interface HTML oRequest = NEW JsonAPIRequestParser(oJsonInput). oBody = oRequest:getPayload(). // Obtem os demais dados cCodIdioma = oBody:getCharacter("codIdioma") NO-ERROR. cDesIdioma = oBody:getCharacter("desIdioma") NO-ERROR. cCodIdiomPadr = oBody:getCharacter("codIdiomPadr") NO-ERROR. // Cria o registro na tabela IDIOMA DO TRANSACTION ON ERROR UNDO, LEAVE: FIND FIRST idioma WHERE idioma.cod_idioma = cCodIdioma NO-LOCK NO-ERROR. IF NOT AVAILABLE idioma THEN DO: CREATE idioma. ASSIGN idioma.cod_idioma = cCodIdioma idioma.des_idioma = cDesIdioma idioma.cod_idiom_padr = cCodIdiomPadr idioma.dat_ult_atualiz = TODAY idioma.hra_ult_atualiz = STRING(TIME,"HH:MM:SS") rIdioma = RECID(idioma) lCreated = TRUE. // Realiza a chamada da UPC Progress para a criacao do // registro customizado. Nao utilizaremos o retorno da UPC // neste caso. {include/i-epcrest.i &endpoint=create &event=afterCreate &jsonVar=oBody} RELEASE idioma. END. END. // Retorna o ID e se foi criado com sucesso oBody = NEW JsonObject(). oBody:add('id', rIdioma). oBody:add('created', (IF lCreated THEN 'OK' ELSE 'NOK')). // Retorna o oBody montado para a interface HTML oResponse = NEW JsonAPIResponse(oBody). oJsonOutput = oResponse:createJsonResponse(). END PROCEDURE. /** Procedure que atualiza o conteudo do registro pelo ID **/ PROCEDURE pUpdateById: DEFINE INPUT PARAMETER oJsonInput AS JsonObject NO-UNDO. DEFINE OUTPUT PARAMETER oJsonOutput AS JsonObject NO-UNDO. DEFINE VARIABLE oBody AS JsonObject NO-UNDO. DEFINE VARIABLE oRequest AS JsonAPIRequestParser NO-UNDO. DEFINE VARIABLE oResponse AS JsonAPIResponse NO-UNDO. DEFINE VARIABLE oIdioma AS JsonObject NO-UNDO. DEFINE VARIABLE oId AS JsonObject NO-UNDO. DEFINE VARIABLE cId AS CHARACTER NO-UNDO. DEFINE VARIABLE cCodIdioma AS CHARACTER NO-UNDO. DEFINE VARIABLE cDesIdioma AS CHARACTER NO-UNDO. DEFINE VARIABLE cCodIdiomPadr AS CHARACTER NO-UNDO. DEFINE VARIABLE datUltAtualiz AS DATE NO-UNDO. DEFINE VARIABLE hraUltAtualiz AS CHARACTER NO-UNDO. DEFINE VARIABLE lUpdated AS LOGICAL NO-UNDO INITIAL FALSE. // Le os parametros e os dados enviados pela interface HTML oRequest = NEW JsonAPIRequestParser(oJsonInput). oBody = oRequest:getPayload(). // Obtem o ID cId = oRequest:getPathParams():getCharacter(1). // Obtem os demais dados cCodIdioma = oBody:getCharacter("codIdioma") NO-ERROR. cDesIdioma = oBody:getCharacter("desIdioma") NO-ERROR. cCodIdiomPadr = oBody:getCharacter("codIdiomPadr") NO-ERROR. // Atualiza o registro na tabela IDIOMA pelo ID (recid) DO TRANSACTION ON ERROR UNDO, LEAVE: FIND FIRST idioma WHERE RECID(idioma) = INT(cId) EXCLUSIVE-LOCK NO-ERROR. IF AVAILABLE idioma THEN DO: ASSIGN idioma.des_idioma = cDesIdioma idioma.cod_idiom_padr = cCodIdiomPadr idioma.dat_ult_atualiz = TODAY idioma.hra_ult_atualiz = STRING(TIME,"HH:MM:SS") lUpdated = TRUE. // Realiza a chamada da UPC Progress para atualizar o registro // na tabela cutomizada ou nao. Nao utilizaremos o retorno da UPC // neste caso. {include/i-epcrest.i &endpoint=update &event=afterUpdate &jsonVar=oBody} END. END. // Retorna o ID e se foi atualizado com sucesso oBody = NEW JsonObject(). oBody:add('id', cId). oBody:add('updated', (IF lUpdated THEN 'OK' ELSE 'NOK')). // Retorna o oBody montado para a interface HTML oResponse = NEW JsonAPIResponse(oBody). oJsonOutput = oResponse:createJsonResponse(). END PROCEDURE. /** Procedure que atualiza o conteudo do registro pelo ID **/ PROCEDURE pDeleteById: DEFINE INPUT PARAMETER oJsonInput AS JsonObject NO-UNDO. DEFINE OUTPUT PARAMETER oJsonOutput AS JsonObject NO-UNDO. DEFINE VARIABLE oObj AS JsonObject NO-UNDO. DEFINE VARIABLE oRequest AS JsonAPIRequestParser NO-UNDO. DEFINE VARIABLE oResponse AS JsonAPIResponse NO-UNDO. DEFINE VARIABLE oArray AS JsonArray NO-UNDO. DEFINE VARIABLE oIdioma AS JsonObject NO-UNDO. DEFINE VARIABLE oId AS JsonObject NO-UNDO. DEFINE VARIABLE cId AS CHARACTER NO-UNDO. DEFINE VARIABLE lDeleted AS LOGICAL NO-UNDO INITIAL FALSE. DEFINE VARIABLE ix AS INTEGER NO-UNDO. // Le os parametros enviados pela interface HTML oRequest = NEW JsonAPIRequestParser(oJsonInput). // Eliminacao de registro individual IF oRequest:getPathParams():length > 0 THEN DO: // Obtem o ID cId = oRequest:getPathParams():getCharacter(1). RUN piDeleteRecord (cId). ASSIGN lDeleted = (RETURN-VALUE = "OK"). END. ELSE DO: // Eliminacao de registros em lote // Obtem a lista de IDs diretamente do oJsonInput onde vem um JsonArray // oArray = oJsonInput:getJsonArray('payload'). oArray = oRequest:getPayloadArray(). DO ix = 1 TO oArray:length: oObj = oArray:getJsonObject(ix). cId = STRING(oObj:getInteger('id')). RUN piDeleteRecord (cId). IF lDeleted = FALSE THEN ASSIGN lDeleted = (RETURN-VALUE = "OK"). END. END. // Retorna o ID e se foi criado com sucesso oObj = NEW JsonObject(). IF oRequest:getPathParams():length > 0 THEN DO: oObj:add('id', cId). END. oObj:add('deleted', (IF lDeleted THEN 'OK' ELSE 'NOK')). // Retorna o oBody montado para a interface HTML oResponse = NEW JsonAPIResponse(oObj). oJsonOutput = oResponse:createJsonResponse(). END PROCEDURE. PROCEDURE piDeleteRecord: DEFINE INPUT PARAMETER cId AS CHARACTER NO-UNDO. DEFINE VARIABLE oObj AS JsonObject NO-UNDO. DEFINE VARIABLE lDeleted AS LOGICAL NO-UNDO INITIAL FALSE. LOG-MANAGER:WRITE-MESSAGE("Eliminando registro -> " + cId, ">>>>>"). // Elimina o registro na tabela IDIOMA pelo ID (recid) DO TRANSACTION ON ERROR UNDO, LEAVE: FIND FIRST idioma WHERE RECID(idioma) = INT(cId) EXCLUSIVE-LOCK NO-ERROR. IF AVAILABLE idioma THEN DO: // Monta a chave estrangeira para enviar para UPC // poder elominar o registro da tabela customizada oObj = NEW JsonObject(). oObj:add('codIdioma', idioma.cod_idioma). // Realiza a chamada da UPC Progress para a eliminacao do // registro customizado. Nao utilizaremos o retorno da UPC // neste caso. {include/i-epcrest.i &endpoint=delete &event=beforeDelete &jsonVar=oObj} DELETE idioma. ASSIGN lDeleted = TRUE. END. END. RETURN (IF lDeleted THEN "OK" ELSE "NOK"). END PROCEDURE. /* fim */ |
Abaixo temos um exemplo de uma UPC criada para a 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 ix AS INTEGER NO-UNDO. DEFINE VARIABLE iTot AS INTEGER NO-UNDO. DEFINE VARIABLE cCodIdioma AS CHARACTER NO-UNDO. DEFINE VARIABLE cCodUsuario AS CHARACTER NO-UNDO. DEFINE VARIABLE cNomUsuario AS CHARACTER NO-UNDO. DEFINE VARIABLE cCodDialet AS CHARACTER NO-UNDO. /* *************************** Main Block *************************** */ // Carrega as definicoes dos campos customizados 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 os novos campos na lista ASSIGN jObj = NEW JsonObject(). jObj:add('property', 'codUsuario'). jObj:add('label', 'Usuário'). jObj:add('visible', TRUE). jObj:add('required', TRUE). jObj:add('type', JsonAPIUtils:convertAblTypeToHtmlType('character')). jObj:add('gridColumns', 6). jAList:add(jObj). ASSIGN jObj = NEW JsonObject(). jObj:add('property', 'nomUsuario'). jObj:add('label', 'Nome'). jObj:add('visible', TRUE). jObj:add('required', TRUE). jObj:add('type', JsonAPIUtils:convertAblTypeToHtmlType('character')). jObj:add('gridColumns', 6). jAList:add(jObj). ASSIGN jObj = NEW JsonObject(). jObj:add('property', 'codDialet'). jObj:add('label', 'Dialeto'). jObj:add('visible', TRUE). jObj:add('required', TRUE). jObj:add('type', JsonAPIUtils:convertAblTypeToHtmlType('character')). jObj:add('gridColumns', 6). jAList:add(jObj). // Retorna a nova lista com os campos customizados jsonIO:Set("root", jAList). END. // Carrega os valores dos campos customizados das tabelas IF pEndPoint = "findAll" AND pEvent = "findAll" THEN DO ON STOP UNDO, LEAVE: // Obtem a lista de campos e valores ASSIGN jAList = jsonIO:getJsonArray('root'). LOG-MANAGER:WRITE-MESSAGE("UPC FINDALL", ">>>>"). FIND FIRST usuar_mestre NO-LOCK NO-ERROR. // Armazena 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('codUsuario', usuar_mestre.cod_usuario) NO-ERROR. jObj:add('nomUsuario', usuar_mestre.nom_usuario) NO-ERROR. jObj:add('codDialet', usuar_mestre.cod_dialet) NO-ERROR. END. // Atualiza o objeto na lista jAList:set(ix, jObj). FIND NEXT usuar_mestre NO-LOCK NO-ERROR. END. // Retorna o json ROOT a lista nova com novos dados customizados jsonIO:Set("root", jAList). END. IF pEndPoint = "findById" AND pEvent = "findById" THEN DO ON STOP UNDO, LEAVE: // Obtem as informacoes necessarias da API para retornar dados cCodIdioma = jsonIO:getCharacter("codIdioma"). // chave estrangeira LOG-MANAGER:WRITE-MESSAGE("UPC FINDBYID cod_idioma= " + cCodIdioma, ">>>>"). // Adiciona os valores da tabela customizada no retorno FIND FIRST usuar_mestre NO-LOCK NO-ERROR. IF AVAILABLE usuar_mestre THEN DO: jsonIO:add('codUsuario', usuar_mestre.cod_usuario) NO-ERROR. jsonIO:add('nomUsuario', usuar_mestre.nom_usuario) NO-ERROR. jsonIO:add('codDialet', usuar_mestre.cod_dialet) NO-ERROR. END. END. IF pEndPoint = "create" AND pEvent = "afterCreate" THEN DO ON STOP UNDO, LEAVE: // Obtem as informacoes necessarias da API para criacao do registro cCodIdioma = jsonIO:getCharacter("codIdioma") NO-ERROR. // chave estrangeira cCodUsuario = jsonIO:getCharacter("codUsuario") NO-ERROR. cNomUsuario = jsonIO:getCharacter("nomUsuario") NO-ERROR. cCodDialet = jsonIO:getCharacter("codDialet") NO-ERROR. LOG-MANAGER:WRITE-MESSAGE("UPC CREATE cod_idioma= " + cCodIdioma, ">>>>"). LOG-MANAGER:WRITE-MESSAGE("UPC CREATE cod_usuario= " + cCodUsuario, ">>>>"). // logica de CREATE /* Em comentario a logica para nao criar registros desnecessariamente FIND FIRST usuar_mestre WHERE usuar_mestre.cod_usuario = cCodUsuario EXCLUSIVE-LOCK NO-ERROR. IF NOT AVAILABLE usuar_mestre THEN DO: ASSIGN usuar_mestre.nom_usuario = cNomUsuario usuar_mestre.cod_dialet = cCodDialet. END. */ END. IF pEndPoint = "update" AND pEvent = "afterUpdate" THEN DO ON STOP UNDO, LEAVE: // Obtem as informacoes necessarias da API para atualizacao cCodIdioma = jsonIO:getCharacter("codIdioma") NO-ERROR. // chave estrangeira cCodUsuario = jsonIO:getCharacter("codUsuario") NO-ERROR. cNomUsuario = jsonIO:getCharacter("nomUsuario") NO-ERROR. cCodDialet = jsonIO:getCharacter("codDialet") NO-ERROR. LOG-MANAGER:WRITE-MESSAGE("UPC UPDATE cod_idioma= " + cCodIdioma, ">>>>"). LOG-MANAGER:WRITE-MESSAGE("UPC UPDATE cod_usuario= " + cCodUsuario, ">>>>"). // logica de UPDATE /* Em comentario a logica para nao alterar tabelas desnecessariamente FIND FIRST usuar_mestre WHERE usuar_mestre.cod_usuario = cCodUsuario EXCLUSIVE-LOCK NO-ERROR. IF AVAILABLE usuar_mestre THEN DO: ASSIGN usuar_mestre.nom_usuario = cNomUsuario usuar_mestre.cod_dialet = cCodDialet. END. */ END. IF pEndPoint = "delete" AND pEvent = "beforeDelete" THEN DO ON STOP UNDO, LEAVE: // obtem as informacoes necessarias da API para eliminacao cCodIdioma = jsonIO:getCharacter("codIdioma"). // chave estrangeira LOG-MANAGER:WRITE-MESSAGE("UPC DELETE cod_idioma= " + cCodIdioma, ">>>>"). // logica de DELETE /* Em comentario a logica para nao eliminar o registro desnecessariamente FIND FIRST usuar_mestre WHERE usuar_mestre.cod_usuario = cCodUsuario EXCLUSIVE-LOCK NO-ERROR. IF AVAILABLE usuar_mestre THEN DO: delete usuar_mestre. END. */ END. RETURN "OK". /* fim */ |
Ao fazer as requisições, virão os seguintes resultados na UPC.
Busca do METADADOS onde foram adicionados os novos campos codUsuario, nomUsuario e codDialet: POST - http://localhost:8180/dts/datasul-rest/resources/prg/trn/v1/idiomas/metadata { "total": 9, "hasNext": false, "items": [ { "visible": true, "gridColumns": 6, "disable": true, "property": "codIdioma", "label": "Idioma", "type": "string" }, { "visible": true, "gridColumns": 6, "property": "desIdioma", "label": "Descrição", "type": "string", "required": true }, { "visible": true, "gridColumns": 6, "property": "codIdiomPadr", "label": "Idioma Padrão", "type": "string" }, { "visible": true, "gridColumns": 6, "disable": true, "property": "datUltAtualiz", "format": "dd/MM/yyyy", "label": "Última Atualização", "type": "date" }, { "visible": true, "gridColumns": 6, "disable": true, "property": "hraUltAtualiz", "label": "Hora Última Atualização", "type": "string" }, { "visible": false, "property": "id", "type": "number", "key": true }, { "visible": true, "gridColumns": 6, "property": "codUsuario", "label": "Usuário", "type": "string", "required": true }, { "visible": true, "gridColumns": 6, "property": "nomUsuario", "label": "Nome", "type": "string", "required": true }, { "visible": true, "gridColumns": 6, "property": "codDialet", "label": "Dialeto", "type": "string", "required": true } ] } Busca dos dados onde foram adicionados novos valores: GET - http://localhost:8180/dts/datasul-rest/resources/prg/trn/v1/idiomas { "total": 3, "hasNext": false, "items": [ { "codIdiomPadr": "99 Outros", "codDialet": "Pt", "codIdioma": "ale", "codUsuario": "super", "desIdioma": "Alemão", "hraUltAtualiz": "", "datUltAtualiz": null, "nomUsuario": "Super", "id": 4580144 }, { "codIdiomPadr": "99 Outros", "codDialet": "PT", "codIdioma": "EN", "codUsuario": "joao", "desIdioma": "Ingles", "hraUltAtualiz": "", "datUltAtualiz": null, "nomUsuario": "Joao da Silva", "id": 194736 }, { "codIdiomPadr": "03 Espanhol", "codDialet": "PT", "codIdioma": "ES", "codUsuario": "Manoel", "desIdioma": "Espanhol", "hraUltAtualiz": "", "datUltAtualiz": null, "nomUsuario": "Manoel da Silva", "id": 2968898 } ] } |
Para este exemplo vamos criar um CRUD com template dinâmico, onde serão mostrados os dados de acordo com o que o backend retornar.
O desenvolvimento do frontend utilizando este campo componente se divide basicamente em três partes:
Abaixo vamos mostrar como ficaram a parte de Listagem, Edição e Detalhe do nosso CRUD dinâmico.
Abaixo segue exemplo de como ficará o arquivo de rotas de nossa aplicação CRUD.
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { IdiomaDetailComponent } from './idioma/detail/idioma-detail.component'; import { IdiomaEditComponent } from './idioma/edit/idioma-edit.component'; import { IdiomaListComponent } from './idioma/list/idioma-list.component'; const routes: Routes = [ { path: 'idiomas/create', component: IdiomaEditComponent }, { path: 'idiomas/edit/:id', component: IdiomaEditComponent }, { path: 'idiomas/detail/:id', component: IdiomaDetailComponent }, { path: 'idiomas', component: IdiomaListComponent }, { path: '', redirectTo: '/idiomas', pathMatch: 'full' }, { path: '**', component: IdiomaListComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
É a tela inicial da nossa aplicação e mostra a lista de dados da tabela Idioma, onde foram adicionados através de customização três campos da tabela usuar_mestre. Esta tela dará acesso às outras funcionalidades como edição e detalhamento.
<po-loading-overlay [hidden]="!showLoading"> </po-loading-overlay> <po-page-dynamic-table p-auto-router [p-title]="cTitle" [p-actions]="actions" [p-breadcrumb]="breadcrumb" [p-fields]="fields" [p-service-api]="serviceApi"> </po-page-dynamic-table> |
import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { PoBreadcrumb } from '@po-ui/ng-components'; import { PoPageDynamicTableActions } from '@po-ui/ng-templates'; import { IdiomaService } from './../resources/idioma.service'; @Component({ selector: 'app-idioma-list', templateUrl: './idioma-list.component.html', styleUrls: ['./idioma-list.component.css'] }) export class IdiomaListComponent implements OnInit { // Definicao das variaveis utilizadas public cTitle = 'Manutenção de Idiomas'; public serviceApi: string; public fields: Array<any> = []; public showLoading = false; public readonly actions: PoPageDynamicTableActions = { new: '/idiomas/create', detail: '/idiomas/detail/:id', edit: '/idiomas/edit/:id', remove: true, removeAll: true }; public readonly breadcrumb: PoBreadcrumb = { items: [ { label: 'Home', link: '/' }, { label: 'Idiomas'} ] }; // Construtor da classe constructor( private service: IdiomaService, private route: Router ) { } // Load do componente public ngOnInit(): void { this.fields = []; this.serviceApi = this.service.getUrl(); this.showLoading = true; this.service.getMetadata().subscribe(resp => { this.fields = resp['items']; this.service.setFieldList(this.fields); this.showLoading = false; }); } } |
Esta tela permite a inclusão de um novo registro na tabela Idioma e também a alteração de registros já existentes.
<po-loading-overlay [hidden]="!showLoading"> </po-loading-overlay> <po-page-edit [p-title]="cTitle" [p-breadcrumb]="breadcrumb" [p-disable-submit]="formEdit.form.invalid" (p-cancel)="cancelClick()" (p-save)="saveClick()"> <po-dynamic-form #formEdit p-auto-focus="string" [p-fields]="fields" [p-value]="record"> </po-dynamic-form> </po-page-edit> |
import { Component, OnInit, ViewChild } from '@angular/core'; import { NgForm } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { PoBreadcrumb, PoDialogService, PoNotificationService } from '@po-ui/ng-components'; import { IdiomaService } from './../resources/idioma.service'; @Component({ selector: 'app-idioma-edit', templateUrl: './idioma-edit.component.html', styleUrls: ['./idioma-edit.component.css'] }) export class IdiomaEditComponent implements OnInit { // Define as variaveis a serem utilizadas public cTitle: string; public currentId: string; public record = {}; public fields: Array<any> = []; public isUpdate = false; public showLoading = false; public breadcrumb: PoBreadcrumb; // Obtem a referencia do componente HTML @ViewChild('formEdit', { static: true }) formEdit: NgForm; // Construtor da classe com os servicos necessarios constructor( private service: IdiomaService, private activatedRoute: ActivatedRoute, private route: Router, private poDialog: PoDialogService, private poNotification: PoNotificationService ) { } // Load do componente public ngOnInit(): void { this.isUpdate = false; this.showLoading = true; // Carrega o registro pelo ID this.activatedRoute.params.subscribe(pars => { this.currentId = pars['id']; // Se nao tiver o ID definido sera um CREATE if (this.currentId === undefined) { this.isUpdate = false; this.cTitle = 'Inclusão de Idioma'; } else { this.isUpdate = true; this.cTitle = 'Alteração de Idioma'; } // Atualiza o breadcrumb de acordo com o tipo de edicao this.breadcrumb = { items: [ { label: 'Home', action: this.beforeRedirect.bind(this) }, { label: 'Idiomas', action: this.beforeRedirect.bind(this) }, { label: this.cTitle } ] }; // Se for uma alteracao, busca o registro a ser alterado if (this.isUpdate) { this.service.getById(this.currentId).subscribe(resp => { Object.keys(resp).forEach((key) => this.record[key] = resp[key]); // Em alteracao temos que receber o registro para depois buscar a lista de campos this.getMetadata(); }); } else { // Se for create, pega a lista de campos this.getMetadata(); } }); } // Retorna a lista de campos private getMetadata() { let fieldList: Array<any> = []; // Carrega a lista de campos, trabalhando com um cache da lista de campos fieldList = this.service.getFieldList(this.isUpdate); if (fieldList === null || fieldList.length === 0) { this.service.getMetadata().subscribe(resp => { this.service.setFieldList(resp['items']); this.fields = this.service.getFieldList(this.isUpdate); this.showLoading = false; }); } else { this.fields = fieldList; this.showLoading = false; } } // Redireciona via breadcrumb private beforeRedirect(itemBreadcrumbLabel) { if (this.formEdit.valid) { this.route.navigate(['/']); } else { this.poDialog.confirm({ title: `Confirma o redirecionamento para ${itemBreadcrumbLabel}`, message: `Existem dados que não foram salvos ainda. Você tem certeza que quer sair ?`, confirm: () => this.route.navigate(['/']) }); } } // Grava o registro quando clicado no botao Salvar public saveClick(): void { this.showLoading = true; if (this.isUpdate) { // Altera um registro ja existente this.service.update(this.currentId, this.record).subscribe(resp => { this.poNotification.success('Idioma alterado com sucesso'); this.showLoading = false; this.route.navigate(['/idiomas']); }); } else { // Cria um registro novo this.service.create(this.record).subscribe(resp => { this.poNotification.success('Idioma criado com sucesso'); this.showLoading = false; this.route.navigate(['/idiomas']); }); } } // Cancela a edicao e redireciona ao clicar no botao Cancelar public cancelClick(): void { this.poDialog.confirm({ title: 'Confirma cancelamento', message: 'Existem dados que não foram salvos ainda. Você tem certeza que quer cancelar ?', confirm: () => this.route.navigate(['/']) }); } } |
Esta tela apresenta os detalhes de um registro de Idioma, com suas customizações.
<po-loading-overlay [hidden]="!showLoading"> </po-loading-overlay> <po-page-detail [p-title]="cTitle" [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 { ActivatedRoute, Router } from '@angular/router'; import { PoBreadcrumb } from '@po-ui/ng-components'; import { IdiomaService } from './../resources/idioma.service'; @Component({ selector: 'app-idioma-detail', templateUrl: './idioma-detail.component.html', styleUrls: ['./idioma-detail.component.css'] }) export class IdiomaDetailComponent implements OnInit { // definicao das variaveis utilizadas public cTitle = 'Detalhe do Idioma'; public currentId: string; public fields: Array<any> = []; public record = {}; public showLoading = false; public readonly breadcrumb: PoBreadcrumb = { items: [ { label: 'Home', link: '/' }, { label: 'Idiomas', link: '/idiomas' }, { label: 'Detail' } ] }; // construtor com os servicos necessarios constructor( private service: IdiomaService, private activatedRoute: ActivatedRoute, private route: Router ) { } // load do componente public ngOnInit(): void { this.activatedRoute.params.subscribe(pars => { this.showLoading = true; // carrega o registro pelo ID this.currentId = pars['id']; this.service.getById(this.currentId).subscribe(resp => { Object.keys(resp).forEach((key) => this.record[key] = resp[key]); // carrega a lista de campos somente apos receber o registro a ser apresentado this.fields = this.service.getFieldList(false); if (this.fields === null || this.fields.length === 0) { this.service.getMetadata().subscribe(data => { this.fields = data['items']; this.service.setFieldList(this.fields); this.showLoading = false; }); } this.showLoading = false; }); }); } // Redireciona quando clicar no botao Edit public editClick(): void { this.route.navigate(['/idiomas', 'edit', this.currentId]); } // Redireciona quando clicar no botao Voltar public goBackClick(): void { this.route.navigate(['/idiomas']); } } |
Criamos facilitadores para auxiliar no desenvolvimento das API's, ficam localizados na classe Progress "com.totvs.framework.api.JsonAPIUtils":
Método | Descrição | Assinatura/Exemplo |
---|---|---|
convertAblTypeToHtmlType | Converte os tipos nativos do Progress para os tipos esperados pelo PO-UI | Assinatura: convertAblTypeToHtmlType (INPUT cType AS CHARACTER) Exemplo: ASSIGN cType = JsonAPIUtils:convertAblTypeToHtmlType ("integer"). O retorno no cType será "number", que é um formato reconhecido pelo PO-UI. |
convertToCamelCase | Converter os nomes dos campos lidos da tabela, normalmente com "_", para "camel case", que é o mais comum utilizado em Json's. | Assinatura: convertToCamelCase (INPUT cKey AS CHARACTER) Exemplo: ASSIGN cField= JsonAPIUtils:convertToCamelCase ("cod_e_mail_usuar"). O retorno no cField será "codEMailUsuar", que é o campo em Camel Case. |
getIdField | Retorna um campo do tipo ID para ser adicionado na lista de campos do Metadata. Este campo serve como chave do registro nos tratamentos de CRUD na parte HTML. | Assinatura: getIdField() Exemplo: oIdiomas:add( JsonAPIUtils:getIdField() ). |
Documentação API Datasul:
PO-UI:
GIT Projeto:
fwk-tools-jille/DATASUL/customization-poui/ ( https://github.com/totvs/fwk-tools-jille )
A ideia era apresentar uma técnica para que possibilita-se as áreas de negócio, de forma segura e simples, disponibilizarem pontos de customização em suas API’s REST.
Acreditamos que a técnica apresentada permite que o backend Progress acompanhe a evolução dos componentes PO-UI.
Esta apresentação trata-se de um MVP e poderá ser evoluída nas próximas Sprints.
<!-- 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> |