Histórico da Página

CONTEÚDO

1. Introdução
2. Visão geral
3. O que é a personalização
4. O que é a customização
5. Diferenças da personalização/customização progress para o PO-UI
6. Requisitos gerais para o desenvolvimento

7. Consulta de programas passiveis de personalização e customização

8. Consulta de programas progress que foram migrados para PO-UI

9. Consulta de documentações de programas que permitem customização 

10. Personalização 

11. Template padrão API Rest com pontos de UPC

12. Guia de Padrões de desenvolvimento de API para o produto Datasul 

13. Como personalizar - Documento de referencia

14. Como customizar - Documento de referencia

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

06. Requisitos gerais para o desenvolvimento

Tecnico:

• • Conhecimento do guia de padrões de desenvolvimento de API para o produto datasul
  • Angular
  • Typescript
  • PO-UI - https://po-ui.io/documentation

Produto:

      Personalização: 

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

      Customização:

• • Programa em PO-UI preparado para ser customizado:
  • Tela construída com componentes dinâmicos
  • Beckend progress preparado com a técnica de EPC/UPC rest.   

07.

Como saber os programas passiveis de personalização e customização

 Em construção. 

08. Consulta de programas progress que foram migrados para PO-UI

Em construção.

09. Consulta de documentações de programas que permitem customização

Para identificar todas as telas que já estão permitindo a personalização/customização, entrar no produto e utilizar a visão de dados "Programas Customizados (vdProgramasDatasulUPC)".

08. Como saber quais programas progress que foram migrados para PO-UI

Para consultar as telas progress que ja foram migradas para PO-UI, dentro do produto utilizar a visão de dados "De-Para Programa HTML x Progress (vdDeParaProgsHTML)". Esta visão de dados ira mostrar todas as telas progress que já foram migradas para PO-UI.

09. Como identificar o que pode ser personalizado ou customizado nos programas

Para consultar os programas que permitem a personalização/customização, basta apertar o F1 para chamar a ajuda da tela e conferir na documentação se a tela já esta preparada para personalização ou customização.

10. Personalização

EXEMPLO DE UTILIZAÇÃO - Produto Datasul

Cadastro de campos personalizados

A seguir são apresentados as telas necessárias para a realização do cadastro dos campos personalizados.

Atributos de campos personalizados

Com a configuração de atributos dos campos personalizados, é possível adicionar outras características tais como:

11. Template padrão API Rest com pontos de UPC (Customização)

Abaixo um exemplo de uma API Rest com a mínimas definições e com entradas de upc nos contextos web de get, post, put e delete (Na pagina Customização PO-UI é possível encontrar exemplos da utilização).

/*------------------------------------------------------------------------
    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 que trata erros caso o a procedure do metodo chamado nao exista
{utp/ut-api-notfound.i}

// Definição de temp table  

/* ***************************  Definitions end  ************************** */  

/* ***************************  Main Block  *************************** */
// a definição da include/i-epcrest.i pode ser feita nas procedures conforme a necessidade de manipular/validar os dados
// conforme o exemplo, sera chamada a template de upc do exemplo abaixo
 {include/i-epcrest.i &endpoint=create &event=afterCreate &jsonVar=oBody}

Abaixo um template de programa de UPC rest.

/*------------------------------------------------------------------------
    File        : templateExemploUpc.p
    Purpose     : demonstração de definições upc REST .

    Syntax      :

    Description : Exemplo de programa Upc sendo chamado pela API rest com pontos de epc 

    Author(s)   : 
    Created     : 
    Notes       :
  ----------------------------------------------------------------------*/

/* ***************************  Definitions  ************************** */
//deifinições obrigatorias para poder manipular as informações
USING PROGRESS.json.*.
USING PROGRESS.json.ObjectModel.*.

//Definições obrigatorias para receber os parametros passados para a include "include/i-epcrest.i"
define input        parameter pEndPoint as char       no-undo.
define input        parameter pEvent    as char       no-undo.
define input        parameter pProgram  as char       no-undo.
define input-output parameter pObjParam as JsonObject no-undo.

/* ***************************  Definitions end  ************************** */

/* ***************************  Main Block  *************************** */
if pEndPoint = "create" and
   pEvent    = "afterCreate"   then do:

   message "pEndPoint: " pEndPoint skip
           "pEvent: "    pEvent    skip
           "pProgram: "  pProgram  skip
           "method: "    pObjParam:getCharacter("method")  skip
           "URI: "       pObjParam:getCharacter("uri")
           view-as alert-box.

end.

return "OK".

12. Guia de Padrões de desenvolvimento de API para o produto Datasul

13. Como personalizar - Documento de referencia

14. Como customizar - Documento de referencia