Histórico da Página

CONTEÚDO

1. Visão Geral
2. API x Pontos UPC Relacionados
3. JSON de metadata
4. Especificidades de customização
5. Customizar a imagem do Item
6. Observações Gerais

01. Visão Geral 

Âncora
1 1

Este documento tem como objetivo detalhar as possibilidades de personalização na tela HTML do programa  (html.cq022). 

02. API x Pontos UPC Relacionados

Âncora
2 2

Cadastrar no menu do Datasul a API REST - cqp/api/v1/fichaCQInspecao.p.   Para mais detalhes, consulte o tópico 5 da documentação Customização PO-UI.

...

O programa customizado (UPC) deverá tratar os seguintes parâmetros:
•    Endpoint: identifica o método que está sendo executado
•    Evento: identifica o evento/ponto UPC dentro do método
•    Programa: nome do programa que está sendo executado (API REST)
•    Objeto JSON: handle do objeto que contém o JSON que está sendo recebido ou retornado pelo método

Exemplo de UPC:

Parâmetros padrão de UPC:

USING PROGRESS.json.*.
USING PROGRESS.json.ObjectModel.*.
USING Progress.Lang.Error.
USING com.totvs.framework.api.*.
USING com.totvs.framework.api.JsonApiResponseBuilder.

DEF INPUT                PARAM pEndpoint   AS CHAR         NO-UNDO.
DEF INPUT                PARAM pEvent          AS CHAR         NO-UNDO.
DEF INPUT                PARAM pProgram     AS CHAR         NO-UNDO.
DEF INPUT-OUTPUT PARAM pJsonObject AS JsonObject   NO-UNDO.Image Removed

03.

...

Especificidades de

...

Customização

Âncora
3 3

É possível retornar os metadados das telas para analisar a estrutura do JSON, executando as requests abaixo (após realizar o login no produto Datasul):

...

...

...

...

Nesta tela foi adicionado áreas que permitirão receber campos customizados através da edição dos metadados retornados pela API REST do Datasul.   Assim é possível criar campos customizados nas seguintes telas:
•    Tela principal
•    Tela de Resultados
•    Tela de Estoque

Os metadados específicos devem ser retornados como JSON no padrão do PO-UI e pode ser usada a ferramenta abaixo para montar exemplos:
https://po-ui.io/tools/dynamic-view

Os metadados dos campos customizados devem ser retornados para a interface através do objeto “formConfigs”, que deverá conter os objetos “dynamicViewConfigs” e “dynamicFormConfigs”. 

• No objeto “dynamicViewConfigs” deverão ser enviados os campos que serão views, ou seja, apenas de visualização.
• No objeto “dynamicFormConfigs” deverão ser enviados os campos que serão forms, ou seja, campos para preenchimento do usuário.

Abaixo exemplo de JSON de metadados com objeto customizado:
    "formConfigs": {
        "dynamicViewConfigs": [
            {
                "gridLgColumns": 3,
                "visible": true,
                "gridColumns": 3,
                "property": "descOrigem",
                "gridSmColumns": 6,
                "gridXlColumns": 3,
                "label": "Origem",
                "tag": true,
                "type": "string",
                "gridMdColumns": 4,
                "order": 6
            }
        ],
        "dynamicFormConfigs": [
            {
                "columns": 10,
                "property": "detalhesFicha",
                "label": "Detalhes Ficha",
                "type": "String",
                "rows": 10
            }
        ]
    }

Neste exemplo foi adicionado o campo Origem (Estoque) para visualização e Detalhes Ficha para digitação:

Image Added

Obs:  neste exemplo, o valor digitado na tela inicial é enviado ao back end apenas pelo botão Encerrar, que executa o endpoint "confirmInspection", possibilitando interceptar o JSON object no Evento "beforeConfirmInspection" para pegar o valor e gravar numa tabela customizada.

04. Customizar a imagem do Item   

Âncora
4 4

Para customizar a busca pela imagem do item deve-se cadastrar a UPC para a "apiProduct" e tratar o evento "before-product-image" que permite passar o arquivo imagem e diretório onde está a imagem.

Esta customização segue o formato tradicional de customização de API/DBO, recebendo o evento e a tt-epc, pois a chamada é feita dentro da API de regras e não na API REST.

Parâmetros padrão de UPC:

  {include/i-epc200.i} /* Definição tt-epc */

  DEF INPUT PARAM p-ind-event  AS CHAR NO-UNDO.

  DEF INPUT-OUTPUT PARAM TABLE FOR tt-epc.

...

A tela não utiliza o componente dinâmico completo (po-page-dynamic-edit), mas sim po-page com componentes como po-input, po-decimal, entre outros. Portanto, alguns elementos não podem ser customizados.

"scancFuelDistributorForm": [
         {
            "gridColumns": 6,
            "searchService": "/dts/datasul-rest/resources/prg/ofp/v1/itensObligations",
            "columns": [
                {
                    "property": "productCode",
                    "label": "Código",
                    "type": "string"
                },
                {
                    "property": "description",
                    "label": "Descrição",
                    "type": "string"
                },
                {
                    "property": "measureUnit",
                    "label": "Unidade medida",
                    "type": "string"
                }
            ],
            "fieldLabel": "measureUnit",
            "property": "productCode",
            "format": [
                "productCode",
                "description"
            ],
            "label": "Código produto",
            "placeholder": "Selecione o código do produto",
            "type": "string",
            "fieldValue": "productCode",
            "order": 1
        },
        {
            "gridColumns": 6,
            "searchService": "/dts/datasul-rest/resources/prg/ofp/v1/productStockVariation",
            "columns": [
                {
                    "property": "code",
                    "label": "Código",
                    "type": "string"
                },
                {
                    "property": "description",
                    "label": "Descrição",
                    "type": "string"
                },
                {
                    "property": "unity",
                    "label": "Unidade medida",
                    "type": "string"
                }
            ],
            "fieldLabel": "unity",
            "property": "productStockVariation",
            "format": [
                "code",
                "description"
            ],
            "label": "Produto variação estoque",
            "placeholder": "Selecione o código do produto",
            "type": "string",
            "fieldValue": "code",
            "order": 2
        },
        {
            "thousandMaxlength": 3,
            "gridColumns": 3,
            "property": "stateDivisionProducing",
            "label": "% Repartição UF do produtor",
            "placeholder": "Insira a % de repartição por UF do produtor",
            "type": "currency",
            "decimalsLength": 2,
            "order": 3
        },
        {
            "thousandMaxlength": 3,
            "gridColumns": 3,
            "property": "stateDivisionDestination",
            "label": "% Repartição UF de destino",
            "placeholder": "Insira a % de repartição por UF de destino",
            "type": "currency",
            "decimalsLength": 2,
            "order": 4
        }]

"scancRefineryForm": [
        {
            "gridColumns": 6,
            "property": "refineryProduct",
            "label": "Produto refinaria",
            "placeholder": "Insira o produto refinaria",
            "type": "string",
            "maxLength": 10,
            "order": 5
        },
        {
            "gridColumns": 6,
            "searchService": "/dts/datasul-rest/resources/prg/ofp/v1/productStockVariation",
            "columns": [
                {
                    "property": "code",
                    "label": "Código",
                    "type": "string"
                },
                {
                    "property": "description",
                    "label": "Descrição",
                    "type": "string"
                },
                {
                    "property": "unity",
                    "label": "Unidade medida",
                    "type": "string"
                }
            ],
            "fieldLabel": "unity",
            "property": "productRegNF",
            "format": [
                "code",
                "description"
            ],
            "label": "Produto reg NF",
            "placeholder": "Selecione o código do produto",
            "type": "string",
            "fieldValue": "code",
            "order": 6
        }
    ]

05. Observações Gerais 

Âncora
5 5

• O cliente deve cadastrar os grupos de usuário que terão permissão para executar este programa, mesmo ele não sendo uma tela.

• Objetos não mencionados neste documento não podem ser customizados por padrão.

• Não é possível excluir campos desta tela, mas é possível interferir no conteúdo JSON retornado, para ocultar os dados.

• Caso seja necessário customizar outros componentes, além dos descritos aqui e na documentação padrão de customização do PO-UI, deve-se abrir um ticket de solicitação, justificando a necessidade.

  Clique aqui para baixar um exemplo de código fonte de UPC para este programa

  .