Histórico da Página

CONTEÚDO

Visão Geral
Construindo uma API de negócio para uso nos Monitores
Tela XXX
1. Outras Ações / Ações relacionadas
Tela XXX
1. Principais Campos e Parâmetros
Tabelas utilizadas
Api de negócio
Classes Utilitárias (Falicitadores)
Criando o seu primeiro monitor

01. VISÃO GERAL

Esse documento possui as informações necessárias para que uma pessoa com conhecimentos em programação na linguagem Progress 4GL possa desenvolver e integrar uma API específica para utilização no painel de Gestão à Vista. Serão detalhados os principais métodos, parâmetros e funções que deverão ser implementados na API para torná-la compatível com a aplicação.

02.

...

O painel de Gestão à Vista possui dois endpoints principais: api/cdp/v1/monitor/monitorDataSchema e cdp/v1/monitor/details. Ambos estão localizados na API cdp/api/v1/monitor.p e são chamados durante a atualização dos dados dos monitores e o detalhamento de suas informações, respectivamente.

Esses endpoints irão chamar a API de negócio que está cadastrada na tabela Monitor para o monitor em questão para que ela retorne os dados necessários para a apresentação. Portanto, sua API específica precisará implementar os métodos detalhados abaixo para que ela possa ser utilizada.

02.A Endpoint api/cdp/v1/monitor/monitorDataSchema

Esse endpoint é responsável por buscar as informações que serão exibidas no monitor, assim como o layout no caso dos monitores do tipo Texto (Info). Ele chama os métodos pi-get-monitor-data-info ou pi-get-monitor-data-chart, dependendo se o monitor é do tipo "Info" (texto) ou "Gráfico". Portanto, a API de negócio cadastrada para o monitor deve implementá-los conforme necessário.

O retorno esperado da API muda conforme o tipo do monitor.

Monitor tipo INFO

Esse tipo de monitor é bastante flexível, permitindo criar layouts diferenciados conforme necessário. Ele é formado por linhas, cuja aparência, altura, largura e conteúdo mudam conforme o retorno da API. É possível customizar cada uma dessas linhas com classes e estilos nativos do HTML, além de ícones do PO-UI. Se o monitor que você está planejando construir for do tipo INFO (texto), confira as informações abaixo:

Estrutura geral

Image Removed

Obs: As linhas seguem o grid system do PO-UI. Veja mais em https://po-ui.io/guides/grid-system

Implementação

O método pi-get-monitor-data-info deve ser implementado pela API de negócio e deverá retornar as TEMP-TABLES ttMonitorMetadados, ttMonitorInfoLinha e ttMonitorTag, além da RowErrors. A definição das três primeiras pode ser consultada na include apiMonitorV1.i. É passada como Input a ttVisaoMonitor que contém as informações de qual monitor está sendo processado nesse momento.

Bloco de código

language	java
title	Método implementado na API de negócio

PROCEDURE pi-get-monitor-data-info:
    DEFINE INPUT  PARAMETER TABLE FOR ttVisaoMonitor.
    DEFINE OUTPUT PARAMETER TABLE FOR ttMonitorMetadados.
    DEFINE OUTPUT PARAMETER TABLE FOR ttMonitorInfoLinha.
    DEFINE OUTPUT PARAMETER TABLE FOR ttMonitorTag.
    DEFINE OUTPUT PARAMETER TABLE FOR RowErrors.

Essas temp-tables serão incorporadas automaticamente no JSON de retorno da aplicação, sendo que os nomes dos campos serão substituídos pelo SERIALIZE-NAME conforme tabelas abaixo.

ttMonitorMetadados (opcional)

Guarda algumas configurações básicas que o monitor irá assumir, como alturas máximas e mínimas e cores do título e do widget principal. Se não forem definidas, serão utilizadas configurações padrões.

...

ttMonitorInfoLinha

Contém as linhas que formarão os dados do monitor. Cada registro da temp-table representa uma linha na aplicação, que será convertida em uma DIV no HTML. É possível customizar cada linha com classes e estilos HTML, além de ícones do PO-UI. Utilizando as classes do grid system do PO-UI, podemos montar um layout bastante flexível para o monitor.

...

CONSTRUINDO UMA API DE NEGÓCIO PARA USO NOS MONITORES EXCUSIVOS

Cada monitor exclusivo deve possuir em seu cadastro uma Api Progress informada. Essa Api deverá ser desenvolvida de forma específica para o Cliente e será responsável pelo retorno das informações e o formato que elas serão apresentadas em tela para o usuário. Essa Api será executada pelo Gestão à Vista automaticamente, portanto o desenvolvedor precisará se dedicar apenas em construir as procedures necessárias de acordo com as orientações desta documentação.

Antes de iniciar o desenvolvimento da API, verifique se o monitor foi corretamente cadastrado no painel de Monitores Exclusivos e já possui todas as suas propriedades (filtros) bem definidas.

03. API DE NEGÓCIO

Para o funcionamento correto do monitor, é necessário que a Api de negócio possua os seguintes métodos:

Nome	Descrição	Obrigatório
pi-get-monitor-data-chart	Realiza a busca dos dados que serão visualizados nos monitores de Gráfico, como os categorias, séries e valores para os gráficos.	Somente p/ tipo Gráfico ou Gauge
pi-get-monitor-data-info	Realiza a busca dos dados que serão visualizados no monitor de Informação, como tags, linhas, barra de progresso e valores.	Somente p/ tipo Texto
pi-get-monitor-data-detail	Realiza a busca dos dados de detalhes de um monitor (Para apresentação em formato de tabela em uma janela ao detalhar as informações)	Não

04. CLASSES UTILITÁRIAS (FACILITADORES)

Nome	Descrição
ChartBuilder	Utilitário para auxiliar na criação de monitores do tipo Gráficos.
InfoBuilder	Utilitário para auxiliar na criação de monitores do tipo Texto.
GaugeBuilder	Utilitário para auxiliar na criação de monitores do tipo Gauge (velocímetro).
DetailBuilder	Utilitário para auxiliar na criação de interfaces de detalhamento dos dados de um monitor.

05. CRIANDO SEU PRIMEIRO MONITOR

Crie o seu primeiro monitor seguindo este guia de passo a passo: 1. Criando seu primeiro Monitor Exclusivo (Getting Started)

...

ttMonitorTag (opcional)

Temp-table com as definições das PO-TAGS que serão exibidas abaixo do título do monitor.

...

Exemplo de retorno

Depois que a API de negócio cria os registros necessários nas temp-tables citadas acima e o método pi-get-monitor-data-info finaliza sua execução, a cdp/api/v1/monitor.p se encarregará de transformar esses dados em formato JSON para enviá-los para o painel de monitoramento para visualização.

Bloco de código

language	js

Exemplo de JSON de retorno para um monitor do tipo INFO. 

{
    "alturaMaximaWidget": null,
    "alturaMinimaWidget": null,
    "corFundo": "#26BA41",
    "corFundoPreenchidoProgresso": "#004e17",
    "corFundoProgresso": "#FFFFFF",
    "corTextoProgresso": "#FFFFFF",
    "corTitulo": "#FFFFFF",
    "linhas": [
        {
            "classeTexto": "po-font-title po-text-center po-sm-12 po-p-1 bold-text",
            "icone": "po-icon-manufacture",
            "parametrosDetalhe": null,
            "styleTexto": "{\"color\":\"white\"}",
            "texto": "Produzindo",
            "tipo": null,
            "tipoDetalhe": null,
            "tituloProgresso": null,
            "urlDetalhe": null,
            "valorProgresso": null
        },
        {
            "classeTexto": "po-font-text-large po-sm-12 po-p-0 po-pt-1 po-clickable",
            "icone": null,
            "parametrosDetalhe": "detalhaOrdem:1003",
            "styleTexto": "{\"color\":\"white\"}",
            "texto": "Ordem <b>      1.003</b> <span class=\"po-icon po-icon-export\"></span>",
            "tipo": null,
            "tipoDetalhe": "externo",
            "tituloProgresso": null,
            "urlDetalhe": "html.productionOrder",
            "valorProgresso": null
        },
        {
            "classeTexto": "po-font-text-large po-sm-12 po-p-0 no-overflow",
            "icone": null,
            "parametrosDetalhe": null,
            "styleTexto": "{\"color\":\"white\"}",
            "texto": "Item <b>sp-item-a</b>",
            "tipo": null,
            "tipoDetalhe": null,
            "tituloProgresso": null,
            "urlDetalhe": null,
            "valorProgresso": null
        },
        {
            "classeTexto": "po-font-text-large po-sm-12 po-p-0",
            "icone": null,
            "parametrosDetalhe": null,
            "styleTexto": "{\"color\":\"white\"}",
            "texto": "Operação <b>10 - montar</b>",
            "tipo": null,
            "tipoDetalhe": null,
            "tituloProgresso": null,
            "urlDetalhe": null,
            "valorProgresso": null
        },
        {
            "classeTexto": "po-font-text-large po-sm-12 po-p-0",
            "icone": null,
            "parametrosDetalhe": null,
            "styleTexto": "{\"color\":\"white\"}",
            "texto": "Split <b>1</b>",
            "tipo": null,
            "tipoDetalhe": null,
            "tituloProgresso": null,
            "urlDetalhe": null,
            "valorProgresso": null
        },
        {
            "classeTexto": "po-sm-12 po-pr-1 po-pt-1 po-pl-0",
            "icone": null,
            "parametrosDetalhe": null,
            "styleTexto": null,
            "texto": null,
            "tipo": "progresso",
            "tipoDetalhe": null,
            "tituloProgresso": "% Conclusão:     50%",
            "urlDetalhe": null,
            "valorProgresso": 50
        }
    ],
    "tags": [
        {
            "colorTexto": "white",
            "icone": "po-icon-manufacture",
            "texto": "CT-SAME"
        }
    ]
}

Resultado:

Image Removed

Monitor tipo Gráfico (chart)

O monitor do tipo gráfico apresenta as informações de uma maneira visual, através do componente PO-CHART. Dependendo do monitor, podem ser utilizados os tipos Barra, Coluna, Pizza, Linhas ou Rosca. Os tipos de gráficos disponíveis dependem totalmente da API de negócio, portanto fica a cargo do programador prepará-la para suportar um ou mais tipos.

Estrutura geral

Image Removed

A API de negócio precisará implementar o método pi-get-monitor-data-chart que, ao contrário do monitor do tipo Texto que trabalha com temp-tables, precisará devolver o JSON de retorno diretamente. Esse objeto terá as mesmas propriedades de um PO-CHART (categorias e series), além das tags.

Bloco de código

language	java
title	Método implementado na API de negócio

PROCEDURE pi-get-monitor-data-chart:
    DEFINE INPUT PARAMETER TABLE FOR ttVisaoMonitor.
    DEFINE OUTPUT PARAMETER oOutput AS JsonObject.   
    DEFINE OUTPUT PARAMETER TABLE FOR RowErrors.

Bloco de código

language	java
title	Estrutura do JSON de retorno

{
    "altura": number,
    "categorias": [
        "string"
    ],
    "series": [
        {
            "color": "string",
            "data": number,
            "label": "string",
            "tooltip": "string",
            "type": "PoChartType (line, pie, bar, column, donut)"
        }       
    ],
    "tags": [ 
        {
            "colorTexto": "string",
            "icone": "string",
            "texto": "string"
        }       
    ]
}

Categorias

Array de strings que conterá as categorias do gráfico. Para maiores informações, consulte a documentação da propriedade categories do PO-CHART.

Series

Array com os objetos de série do gráfico, que representam as colunas/fatias/linhas, conforme o tipo de gráfico. Possui as mesmas propriedades do objeto Series do PO-CHART.

...

Altura (opicional)

Altura que o gráfico terá dentro do widget.

Tags (opcional)

Array contendo objetos que se tornarão PO-TAGS, que pode ser usado para exibir dados importantes e concisos de forma compacta. As tags ficarão abaixo dos headers, se existirem.

...

Bloco de código

language	java
title	Estrutura do JSON de retorno

Exemplo de JSON para monitor do tipo Gráfico de Pizza

{
    "altura": 290,
    "categorias": [
        "Estados dos CTs"
    ],
    "series": [
        {
            "color": "#F50031",
            "data": 1.0,
            "label": "Parado",
            "tooltip": "",
            "type": "pie"
        },
        {
            "color": "#26BA41",
            "data": 4.0,
            "label": "Produzindo",
            "tooltip": "",
            "type": "pie"
        },
        {
            "color": "#007acc",
            "data": 0.0,
            "label": "Setup",
            "tooltip": "",
            "type": "pie"
        },
        {
            "color": "#A0B9BF",
            "data": 3.0,
            "label": "Ocioso",
            "tooltip": "",
            "type": "pie"
        }
    ],
    "tags": [
        {
            "colorTexto": "",
            "icone": "po-icon-pin",
            "texto": "Área: 002"
        },
        {
            "colorTexto": "",
            "icone": "po-icon-manufacture",
            "texto": "Produzido:            58,0000  "
        },
        {
            "colorTexto": "",
            "icone": "po-icon-document-filled",
            "texto": "Previsto:           220,0000  "
        },
        {
            "colorTexto": "",
            "icone": "po-icon-minus-circle",
            "texto": "Refugado:             2,0000"
        }
    ]
}

Resultado

Image Removed

03. TELA XXXXX

Outras Ações / Ações relacionadas

...

04. TELA XXXXX

Principais Campos e Parâmetros

...

Card documentos

Informacao	Use esse box para destacar informações relevantes e/ou de destaque.
Titulo	IMPORTANTE!

...

Árvore de páginas

Versões comparadas

Versão antiga 2

Nova versão Atual

Chave

CONTEÚDO

01. VISÃO GERAL

02.

02.A Endpoint api/cdp/v1/monitor/monitorDataSchema

Monitor tipo INFO

Estrutura geral

Implementação

ttMonitorMetadados (opcional)

ttMonitorInfoLinha

CONSTRUINDO UMA API DE NEGÓCIO PARA USO NOS MONITORES EXCUSIVOS

03. API DE NEGÓCIO

04. CLASSES UTILITÁRIAS (FACILITADORES)

05. CRIANDO SEU PRIMEIRO MONITOR

ttMonitorTag (opcional)

Exemplo de retorno

Monitor tipo Gráfico (chart)

Estrutura geral

Resultado

03. TELA XXXXX

04. TELA XXXXX