CONTEÚDO
- Introdução
- Visão geral
- O que é a personalização
- O que é a customização
- Diferenças da personalização/customização progress para o PO-UI
- Requisitos gerais para o desenvolvimento
Template padrão API Rest com pontos de UPC
Consulta de programas passiveis de personalização e customizaçã
Consulta de programas progress que foram migrados para PO-UI
Guia de Padrões de desenvolvimento de API para o produto Datasul
Como personalizar
Como customizar
01. INTRODUÇÃO
Neste manual vamos falar sobre como funciona a personalização e customização de telas html PO-UI, vamos falar sobre as diferenças entre personalizar e customizar,
em que momento poderá ser utilizado a personalização ou customização, com exemplos e possíveis cenários de implementação.
02. VISÃO GERAL
Este manual irá ajudar a entender para que serve a personalização e customização, entender em que momento cada um poderá ser utilizado e como efetuar a implementação nas telas PO-UI em conjunto com o back-end progress.
03. O que é a personalização
A personalização se trata de alterações simples na tela, como:
- Alteração de cor
- Apresentação da ordem do campo no qual será visualizado na tela
- Validações de interface
- Mascaras de apresentação de campo
- Alterar label/opções de um checkbox
- Alterar um label de um campo
- Transformar um campo em somente leitura
Entre outras alterações não especificas. Se a necessidade se encaixar em alguma das opções acima ou algo que seja uma alteração equiparada as opções supra citadas, a melhor opção é utilizar a personalização. Para maiores informações de como personalizar consultar a pagina/tópico "Como personalizar".
A personalização low-code hoje se aplica apenas ao PO-DYNAMIC-FORM e PO-DYNAMIC-VIEW, para utilizar PO-PAGE-DYNAMIC-TABLE, Deve-se também implementar endpoint em Progress, o qual será utilizado como fonte de dados para os campos personalizados.
04. O que é a customização
A customização já contempla uma alteração mais especifica das telas e do back-end progress.
- sendo possível incluir/eliminar campos da tela
- incluir ações nas telas
- customizar a massa de dados no beck-end que será apresentado no front-end
- incluir validações para mostrar/salvar a massa de dados
Para alterações dos componentes em tela já não é possível fazer de forma low-code. A maior parte das alterações será feita em progress, para informar a tela quais os campos serão ou não apresentados e quais os dados que vão aparecer nesses campos (consulta) ou que será armazenado (cadastro).
05. Diferenças da personalização/customização progress para o PO-UI
Existem algumas diferenças na customização de telas quando se comparado o progress com as novas telas html, exemplo.:
Progress | PO-UI |
---|
Incluir botão em tela progress | No html não tem o evento no botão e sim uma ação |
No progress há eventos de tela | No html não há eventos de tela, mas é possível adicionar "eventos" na BO. |
Regra de negocio junto com a tela | Regra de negocio separada da tela (BO) |
No progress era possível personalizar/customizar qualquer tela | No html somente tela com componentes dinâmicos |
No progress era possível chamar uma tela a partir de outra tela | No html não é possivel chamar novas telas |
06. Requisitos gerais para o desenvolvimento
Tecnico:
Produto:
- Programa em THF - PO-UI utilizando componentes dinâmicos
- Programa deve ser cadastrado no cadastro de programas (men012aa), com as flags "visualiza menu" e "permite personalização" marcadas.
07. Template padrão API Rest com pontos de UPC (Customização)
Abaixo um exemplo de uma API Rest com entradas de upc nos contextos web de get, post, put e delete.
/*------------------------------------------------------------------------
File : templateExemplo.p
Purpose : demonstração de definições API REST .
Syntax :
Description : API REST
Author(s) :
Created :
Notes :
----------------------------------------------------------------------*/
/* *************************** Definitions ************************** */
//Definição da ut-api padrão das apis rest
{utp/ut-api.i}
//Definição da ut-api-action padrão das apis rest com os contextos web: get, post, put e delete
{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 pValidateForm POST /validateForm/~* }
{utp/ut-api-action.i pValidateField POST /validateField/~* }
{utp/ut-api-action.i pCreate POST /~* }
{utp/ut-api-action.i pDeleteById DELETE /~* }
//Definição da ut-api-notfound
{utp/ut-api-notfound.i}
// Definição de temp table
/* *************************** Definitions end ************************** */
/*------------------------------------------------------------------------------
Purpose: Procedure que retorna a metadata
Notes:
------------------------------------------------------------------------------*/
PROCEDURE pGetMetadata:
DEFINE INPUT PARAMETER oJsonInput AS JsonObject NO-UNDO. // json de entrada
DEFINE OUTPUT PARAMETER oJsonOutput AS JsonObject NO-UNDO. // json de saida
DEFINE VARIABLE oResponse AS JsonAPIResponse NO-UNDO. // response
// criar um novo jsonarray pra receber os metadados
// Define a lista de campos a serem apresentados no HTML
END PROCEDURE.
/*------------------------------------------------------------------------------
Purpose: Procedure que retorna os valores
Notes:
------------------------------------------------------------------------------*/
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.
// Monta a lista de valores dos campos
// Alimenta o campo ID utilizado pela interface HTML como chave primaria
// Obtem um jsonArray com base no conteudo da temp-table
// Adiciona o JsonArray em um JsonObject para enviar para a UPC
// 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
// Retorna a colecao de dados customizados ou nao para a interface HTML
oResponse = NEW JsonAPIResponse(oIdiomas).
oJsonOutput = oResponse:createJsonResponse().
END PROCEDURE.
/*------------------------------------------------------------------------------
Purpose: Procedure que cria um novo registro na tabela
Notes:
------------------------------------------------------------------------------*/
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 oResponse AS JsonAPIResponse NO-UNDO.
// Le os parametros e os dados enviados pela interface HTML
// Obtem os demais dados
// Cria o registro na tabela
// Realiza a chamada da UPC Progress para a criação do
// registro customizado. Não utilizaremos o retorno da UPC
// neste caso.
{include/i-epcrest.i &endpoint=create &event=afterCreate &jsonVar=oBody}
// Retorna o ID e se foi criado com sucesso
// Retorna o oBody montado para a interface HTML
oResponse = NEW JsonAPIResponse(oBody).
oJsonOutput = oResponse:createJsonResponse().
END PROCEDURE.
/*------------------------------------------------------------------------------
Purpose: Procedure que atualiza o conteudo do registro pelo ID
Notes:
------------------------------------------------------------------------------*/
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.
// Le os parametros e os dados enviados pela interface HTML
// Obtem o ID
// Obtem os demais dados
// Atualiza o registro na tabela pelo ID (recid)
// 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}
// Retorna o ID e se foi atualizado com sucesso
// Retorna o oBody montado para a interface HTML
oResponse = NEW JsonAPIResponse(oBody).
oJsonOutput = oResponse:createJsonResponse().
END PROCEDURE.
/*------------------------------------------------------------------------------
Purpose: Procedure delete por ID
Notes:
------------------------------------------------------------------------------*/
PROCEDURE pDeleteById:
DEFINE INPUT PARAMETER oJsonInput AS JsonObject NO-UNDO.
DEFINE OUTPUT PARAMETER oJsonOutput AS JsonObject NO-UNDO.
// Le os parametros enviados pela interface HTML
// Eliminacao de registro individual
// Retorna o oBody montado para a interface HTML
oResponse = NEW JsonAPIResponse(oObj).
oJsonOutput = oResponse:createJsonResponse().
END PROCEDURE.
/*------------------------------------------------------------------------------
Purpose: Procedure valida form
Notes:
------------------------------------------------------------------------------*/
PROCEDURE pValidateForm:
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 oBody AS JsonObject NO-UNDO.
// obtem o nome da propriedade que ocorreu o LEAVE para validacao
/* Recebemos do HTML o JSON abaixo
// Novas Acoes sobre os campos da tela
// encapsulamos o retorno para enviar para a UPC
// Realiza a chamada da UPC Progress
{include/i-epcrest.i &endpoint=validateForm &event=validateForm &jsonVar=oObj}
// obtem o retorno customizado, onde o mesmo foi alterado e retornado na tag root
/* JSON de retorno para o HTML
// Retorna a colecao de campos customizados ou nao para a interface HTML
oResponse = NEW JsonAPIResponse(oRet).
oJsonOutput = oResponse:createJsonResponse().
END PROCEDURE.
/*------------------------------------------------------------------------------
Purpose: Procedure valida campos
Notes:
------------------------------------------------------------------------------*/
PROCEDURE pValidateField:
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 oBody AS JsonObject NO-UNDO.
/* Recebemos do HTML o JSON abaixo
{
"property": "codAcoes",
"value": "FocoDesIdioma"
}
*/
// Novas Acoes sobre os campos da tela
// encapsulamos o retorno para enviar para a UPC
// Realiza a chamada da UPC Progress
{include/i-epcrest.i &endpoint=validateField &event=validateField &jsonVar=oObj}
// obtem o retorno customizado, onde o mesmo foi alterado e retornado somente
// o conteudo da tag return
// Retorna a colecao de campos customizados ou nao para a interface HTML
oResponse = NEW JsonAPIResponse(oRet).
oJsonOutput = oResponse:createJsonResponse().
END PROCEDURE. |
|
Abaixo um template de programa de UPC rest.
08. Consulta de programas passiveis de personalização e customização
Em construção.
09. Consulta de programas progress que foram migrados para PO-UI
Em construção
10. Guia de Padrões de desenvolvimento de API para o produto Datasul
11. Como personalizar
12. Como customizar