Histórico da Página

...

ONTEÚ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

...

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

02.A.1 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:

...

Propriedade na temp-table	Descrição	SERIALIZE-NAME (JSON)
tipo (opcional)	Serve para definir se a linha é do tipo texto ou progresso. Algumas propriedades serão ignoradas caso o tipo da linha não seja compatível. Se não for informado, será considerado o tipo texto.	tipo
texto	Conteúdo a ser apresentado na linha com tipo texto.	texto
style-texto (opcional)	Permite informar os styles do HTML que serão atribuídos à linha com tipo texto.	styleTexto
classe-texto (opcional)	Classe da linha, podendo ser qualquer classe existente no HTML padrão ou PO-UI (somente linha texto)	classeTexto
icone (opcional)	Ícone do PO-UI que será exibido no início da linha (somente linha texto).	icone
titulo-progresso (opcional)	Se a linha for do tipo progresso, esse será o título (label) do PO-PROGRESS.	tituloProgresso
valor-progresso (opcional)	Valor atual do PO-PROGRESS.	valorProgresso
url-detalhe (opcional)	Nome da tela HTML que servirá para detalhar a linha clicada. Deve ser usado com tipo-detalhe igual à externo.	urlDetalhe
tipo-detalhe (opcional)	Aceita os tipos: “modal”, “detalhe” e “externo”. Define se o detalhe aberto ao clicar na linha será uma modal, página genérica de detalhe ou um programa HTML externo.	tipoDetalhe
parametros-detalhe (opcional)	String com os parâmetros que serão passados para a modal/página/programa externo quando for acionado o detalhe. O formato deve ser chave:valor separados por “;”. Exemplo: ”detalhaOrdem: 1001;codEstabel: ‘MBS’”	parametrosDetalhe

...

ttTags(opcional)

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

...

Propriedade na temp-table	Descrição	SERIALIZE-NAME (JSON)
textovalor	Texto a ser exibido na tag	texto
cor-texto (opcional)	Cor do texto da tag. Aceita os padrões do PO-UI, como “color-01”, o nome da cor (blue, red) ou o código hexadecimal.	colorTexto
cor-tag (opcional)	Cor da tag. Aceita os padrões do PO-UI, como “color-01”, o nome da cor (blue, red) ou o código hexadecimal.	colorTag
icone (opcional)	Aceita os ícones conforme https://po-ui.io/guides/icons.	icone

...

Bloco de código

language	java

    USING cdp.services.gestaoavista.*.   //A classe InfoBuilder está definida aqui.

    DEFINE VARIABLE InfoBuilder  AS InfoBuilder NO-UNDO. 

    InfoBuilder = NEW InfoBuilder(INPUT TABLE ttVisaoMonitor).
  
    // Setamos as tags, parâmetros e linhas que irão compor o monitor
    InfoBuilder:setTags(INPUT TABLE ttTags).
    InfoBuilder:setParameters(INPUT TABLE ttMonitorMetadados).
    InfoBuilder:setLines(INPUT TABLE ttMonitorInfoLinha).
    
    oOutput = NEW JsonObject().
    oOutput = InfoBuilder:createMonitor().  // Chama o método que cria e devolve o monitor pronto
 
    DELETE OBJECT InfoBuilder.

Exemplo de retorno

Depois que a API de negócio chama o método createMonitor () da classe InfoBuilder e o método pi-get-monitor-data-info finaliza sua execução, os dados serão 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 Modified

02.A.2 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.

...

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

...

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"
   ,
			"colorTag": "string"
        }       
    ]
}

Categorias

...

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.

...

.

Propriedade	Descrição
colorTexto (opcional)	Cor do texto da tag
colorTag (opcional)	Cor da tag
icone (opcional)	Aceita os ícones conforme https://po-ui.io/guides/icons
texto	Texto a ser exibido na tag

Para auxiliar na criação do JSON de retorno, pode ser utilizada a classe ChartBuilder, conforme abaixo:

Bloco de código

language	java

    USING cdp.services.gestaoavista.*.   //A classe ChartBuilder está definida aqui.     

	DEFINE VARIABLE ChartBuilder  AS ChartBuilder NO-UNDO.

	// Instanciar a classe passando como parâmetro a ttVisaoMonitor, que contém as informações do monitor e visão que estão sendo processados nesse instante
    ChartBuilder = NEW ChartBuilder(INPUT TABLE ttVisaoMonitor). 

	/* Depois que todas as entidades estão criadas, basta setá-las no objeto ChartBuilder */
    ChartBuilder:setTags(INPUT TABLE ttTags).
    ChartBuilder:setSeries(INPUT TABLE ttSeries).
    ChartBuilder:setCategories(INPUT TABLE ttCategorias).
    
    /* Chama o método para criar e devolver o gráfico completo e guarda o resultado na variável oOutput */
    oOutput = ChartBuilder:createChart(). 
    
    DELETE OBJECT ChartBuilder.

...

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": 42.0,
            "label": "Produzindo",
            "tooltip": "",
            "type": "pie"
        },
        {
            "color": "#007acc",
            "data": 0.01,
            "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:            588,0000  "
        },
        {
            "colorTexto": "",
            "icone": "po-icon-document-filled",
            "texto": "Previsto:           220,0000  "
        },
        {
            "colorTexto": "",
            "icone": "po-icon-minus-circle",
            "texto": "Refugado:             2,0000"
        }
    ]
}

Resultado

Image RemovedImage Added

02.B Endpoint api/cdp/v1/monitor/details

...

Propriedade	Descrição
classe-header	Classes HTML que serão atribuídas ao elemento. Aceita as classes do PO-UI, por exemplo po-p-1, po-font-text-center etc.
estilo-header	Estilo HTML que será atribuído ao objeto. Usar a sintaxe padrão do HTML, ex: background-color: red;text-align: center;
texto-header	Texto que será exibido dentro do quadrado.

ttMonitorTag (opcional)

Temp-table contendo registros 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.

...

Árvore de páginas

Versões comparadas

Versão antiga 7

Nova versão 8

Chave

ONTEÚDO

02.A.1 Monitor tipo INFO

ttTags(opcional)

Exemplo de retorno

02.A.2 Monitor tipo Gráfico (chart)

Resultado

02.B Endpoint api/cdp/v1/monitor/details

ttMonitorTag (opcional)