Histórico da Página
...
ONTEÚDO
- Visão Geral
- Construindo uma API de negócio para uso nos Monitores
- Tela XXX
- Outras Ações / Ações relacionadas
- Outras Ações / Ações relacionadas
- Tela XXX
- Principais Campos e Parâmetros
- 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 | ||
---|---|---|
| ||
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 | ||
---|---|---|
| ||
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:
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 | ||||
---|---|---|---|---|
| ||||
{ "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 | ||
---|---|---|
| ||
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 | ||||
---|---|---|---|---|
| ||||
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
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.
...