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. Consulta de 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

Em construçã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.

/*------------------------------------------------------------------------
    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