Histórico da Página
Realiza a busca dos dados que serão visualizados no monitor de Texto, como tags, linhas, barra de progresso e valores.
Obrigatória: Somente para monitores que possuem opção do tipo Texto
detalhamento de um monitor, o detalhe será apresentado em uma janela contendo cabeçalho, tags e tabelas.
Parâmetros
Nome | Direção | Tipo | Descrição |
---|---|---|---|
ttVisaoMonitor | INPUT | Temp-Table | Temp-Table contendo as informações do monitor na visão em que está sendo carregado. |
iPage | |||
INPUT | JsonObject | JSON contendo as definições de leiaute e dados que devem ser apresentados na tela. | |
RowErrors | OUTPUT | Temp-Table | Temp-Table contendo erros ocorridos durante a execução da Api de negócio. |
O objeto monitorJsonOutput (JsonObject) será construído através da classe utilitária InfoBuilder, que utiliza as seguintes Temp-Tables:
ttTags (Opcional)
Temp-table com as definições das Tags que serão exibidas abaixo do título do monitor.
...
Campo
...
Descrição
Integer | Número da página que está sendo consultada (caso a paginação seja executada) | ||
cSerie | INPUT | Character | Caso o detalhe seja executado através do clique em um gráfico, a categoria clicada será enviada |
cCategory | INPUT | Character | Caso o detalhe seja executado através do clique em um gráfico, a série clicada será enviada |
detailJsonOutput | OUTPUT | JsonObject | JSON contendo as definições de leiaute e dados que devem ser apresentados na tela. |
RowErrors | OUTPUT | Temp-Table | Temp-Table contendo erros ocorridos durante a execução da Api de negócio. |
O objeto detailJsonOutput (JsonObject) será construído através da classe utilitária DetailBuilder, que utiliza as seguintes Temp-Tables e propridades:
ttColunaDetalhe
...
Temp-table que herda a estrutura do PoTableColumn (
...
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.
...
Campo
...
Descrição
...
cor-fundo-preenchido-progresso
...
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.
...
Campo
...
Descrição
...
documentation/po-table) e possui algumas propriedades adicionais, que servirão para aplicar a técnica de detalhamento de uma coluna da tabela (opcional). Ao clicar sobre uma coluna que possui detalhamento, será aberta uma tela HTML externa, que deverá estar preparada para verificar a LocalStorage do navegador e capturar os parâmetros que serão inclusos pelo painel de Monitoramento.
Propriedade | Descrição |
---|---|
propriedade* | Nome da propriedade que será exibida nessa coluna. Ela deverá existir dentro da temp-table de dados que deve ser setada através do DetailBuilder:setItems(). |
cod-label* | Nome (cabeçalho) que será exibido na coluna. |
tipo | Tipo da coluna. Verificar documentação do PO-UI para maiores informações. Padrão será texto. |
formato | Formato (máscara) que o campo deverá assumir. |
url-detalhe | Contém o endereço de um programa HTML que será chamado ao clicar sobre essa coluna. Precisa ser utilizada em conjunto com as propriedades parameterLabels, parameterProperty e o format da coluna precisa ser cellTemplate. |
label-parametros | Array de strings que contém os nomes das propriedades que serão inclusas no LocalStorage do navegador quando o usuário clicar numa coluna que possui url-detalhe informado. |
propriedade-parametros | Array de strings que determina qual campo será usado como base para o valor do parâmetro que será incluso no LocalStorage. |
largura | Largura que a coluna irá assumir na tabela. |
*Campos obrigatórios
Bloco de código | ||
---|---|---|
| ||
DetailBuilder:setColumns(INPUT TABLE ttColunaDetalhe). |
Temp-table de Dados
Além da definição das colunas (descritos acima) é necessário ser setado a temp-table contendo os dados e que possua os campos (fields) correspondentes com o campo ttColunaDetalhe.propriedade informado conforme documentado acima, essa temp-table deverá ser definida pelo desenvolver do Api de negócio e pode possuir o nome da preferencia do desenvolver, abaixo segue um exemplo de definição e utilização:
Bloco de código | ||
---|---|---|
| ||
DEFINE TEMP-TABLE ttDados
FIELD it-codigo AS CHARACTER SERIALIZABLE-NAME 'itemCode'.
CREATE ttDados.
ASSIGN ttDados.it-codigo.
DetailBuilder:setItems(INPUT TABLE ttDados). |
...
ttHeadersDetalhe (Opcional)
Temp-table contendo registros que serão renderizados no cabeçalho da Modal ou na tela de detalhe genérico na forma de um quadrado que pode ser estilizado através dos campos classe-header e estilo-header. Útil para criar um “cabeçalho” para contextualizar as informações que estão contidas na tabela.
Propriedade | Descrição |
---|---|
texto-header* | Texto que será exibido dentro do quadrado. |
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; |
*Campos obrigatórios
Bloco de código | ||
---|---|---|
| ||
DetailBuilder:setColumns(INPUT TABLE ttColunaDetalhe). |
...
ttTags (Opcional)
Temp-table contendo registros que se tornarão tags, que podem ser usadas para exibir dados adicionais. As tags ficarão abaixo dos headers, se existirem.
Propriedade | Descrição |
---|---|
texto* | Texto a ser exibido na tag. |
cor-texto | Cor da tag. Aceita os padrões do PO-UI, como “color-01”, o nome da cor (blue, red) ou o código hexadecimal. |
icone | Aceita os ícones conforme https://po-ui.io/guides/icons. |
*Campos obrigatórios
Bloco de código | ||
---|---|---|
| ||
DetailBuilder:setTags(INPUT TABLE ttTags). |
...
hasNext (Opcional)
Utilizado para paginação. Caso o valor dessa propriedade seja true, o botão Buscar mais resultados ficará habilitado, tanto na modal quanto na tela de detalhe genérico. (Valor padrão: false)
Bloco de código | ||
---|---|---|
| ||
DetailBuilder:setHasNext(FALSE). |
...
canExportXLS (Opcional)
Determina se o botão de Exportar para Planilha ficará habilitado na modal ou tela genérica de detalhe. A exportação é dinâmica e irá gerar um arquivo .csv com as definições de colunas e dados conforme o objeto retornado automaticamente.
Bloco de código | ||
---|---|---|
| ||
DetailBuilder:setCanExportXLS(TRUE). |
...
modalMaxWidth (Opcional)
Se o detalhamento for via modal, essa propriedade define o tamanho máximo que ela poderá assumir na tela
Bloco de código | ||
---|---|---|
| ||
DetailBuilder:setModalMaxWidth("1440px"). |
...
Exemplo de código
Depois de criar as temp-tables necessárias na aplicação, utilizamos a classe DetailBuilder para gerar o janela de Detalhe, conforme abaixo:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
BLOCK-LEVEL ON ERROR UNDO, THROW.
USING PROGRESS.json.*.
USING PROGRESS.json.ObjectModel.*.
USING cdp.services.gestaoavista.*. //A classe DetailBuilder está definida aqui.
{method/dbotterr.i}
{cdp/services/gestaoavista/builder-utils.i}
{cdp/services/gestaoavista/monitor-utils.i}
FUNCTION fn-has-row-errors RETURNS LOGICAL ():
FOR EACH RowErrors |
Altura (Opcional)
Altura que o monitor terá dentro do widget. Para atribuir a altura, utilize o método setHeight() do InfoBuilder.
Exemplo de código
Depois de criar as temp-tables necessárias na aplicação, utilizamos a classe InfoBuilder para gerar o monitor do tipo Texto, conforme abaixo:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
BLOCK-LEVEL ON ERROR UNDO, THROW.
USING PROGRESS.json.*.
USING PROGRESS.json.ObjectModel.*.
USING cdp.services.gestaoavista.*. //A classe ChartBuilder está definida aqui.
{method/dbotterr.i}
{cdp/services/gestaoavista/builder-utils.i}
{cdp/services/gestaoavista/monitor-utils.i}
FUNCTION fn-has-row-errors RETURNS LOGICAL ():
FOR EACH RowErrors
WHERE UPPER(RowErrors.ErrorType) = 'INTERNAL':U:
DELETE RowErrors.
END.
RETURN CAN-FIND(FIRST RowErrors
WHERE UPPER(RowErrors.ErrorSubType) = 'ERROR':U).
END FUNCTION.
PROCEDURE pi-get-monitor-data-info:
DEFINE INPUT PARAMETER TABLE FOR ttVisaoMonitor.
DEFINE OUTPUT PARAMETER monitorJsonOutput AS JsonObject.
DEFINE OUTPUT PARAMETER TABLE FOR RowErrors.
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).
monitorJsonOutput = NEW JsonObject().
monitorJsonOutput = InfoBuilder:createMonitor(). // Chama o método que cria e devolve o monitor pronto
DELETE OBJECT InfoBuilder.
CATCH eSysError AS Progress.Lang.Error:
CREATE RowErrors.
ASSIGN RowErrors.ErrorNumber = 17006
RowErrors.ErrorDescription = eSysError:getMessage(1)
RowErrors.ErrorSubType = "ERROR".
END.
FINALLY:
IF fn-has-row-errors() THEN DO:
UNDO, RETURN 'NOK':U.
END.
END FINALLY.
END PROCEDURE. |
O retorno da API de negócio deverá respeitar a estrutura conforme exemplo abaixo:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
{ "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", WHERE UPPER(RowErrors.ErrorType) = "parametrosDetalhe": null, 'INTERNAL':U: DELETE RowErrors. END. "styleTexto": "{\"color\":\"white\"}",RETURN CAN-FIND(FIRST RowErrors WHERE UPPER(RowErrors.ErrorSubType) = 'ERROR':U). "texto": "Produzindo", "tipo": null, END FUNCTION. PROCEDURE pi-get-monitor-data-detail: // O nome da procedure de detalhe sempre precisa ser esse DEFINE INPUT PARAM TABLE "tipoDetalhe": null,FOR ttVisaoMonitor. DEFINE INPUT PARAM iPage "tituloProgresso": null, AS INTEGER "urlDetalhe": null, NO-UNDO. DEFINE INPUT PARAM cSerie "valorProgresso": null AS CHARACTER },NO-UNDO. DEFINE INPUT PARAM { cCategory AS CHARACTER "classeTexto": "po-font-text-large po-sm-12 po-p-0 po-pt-1 po-clickable",NO-UNDO. DEFINE OUTPUT PARAM detailJsonOutput AS JsonObject NO-UNDO. DEFINE OUTPUT PARAM TABLE FOR RowErrors. "icone": null, DEFINE VARIABLE DetailBuilder AS DetailBuilder NO-UNDO. "parametrosDetalhe": "detalhaOrdem:1003", DetailBuilder = NEW DetailBuilder(). // Classe utilitária "styleTexto": "{\"color\":\"white\"}", que ajudará na montagem do objeto de detalhe FIND FIRST ttVisaoMonitor. "texto": "Ordem <b>1.003</b> <span class=\"po-icon po-icon-export\"></span>", "tipo": null,DetailBuilder:setHeaders(INPUT TABLE ttHeadersDetalhe). /* Opcionalmente, também podemos montar cabeçalhos (headers) para a janela de detalhe */ DetailBuilder:setTags(INPUT TABLE ttTags). /* Opcionalmente, também podemos "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\"}",incluir tags para adicionar informações complementares na janela de detalhe */ DetailBuilder:setColumns(INPUT TABLE ttColunaDetalhe). /* Setando as colunas que serão exibidas na janela de detalhe */ DetailBuilder:setItems(JsonAPIUtils:convertTempTableToJsonArray(TEMP-TABLE ttDados:HANDLE, FALSE)). /* Setando os dados que serão apresentados nas colunas definidas na tabela do detalhe */ /* Dica: O método convertTempTableToJsonArray transforma uma temp-table em um JsonArray. É necessário realizar essa conversão pois o DetailBuilder recebe os dados de negócio em formato de JsonArray. */ /* Se a consulta for paginada e tiver mais resultados além dos que estão sendo retornados, deverá setar a variável 'hasNext' como TRUE. Desse modo o botão 'Carregar mais resultados' ficará habilitado na janela de detalhe para que o usuário possa requisitar a próxima página. Recomendamos utilizar paginação caso exista a possibilidade da consulta demorar mais que um minuto para ser realizada */ DetailBuilder:setHasNext(FALSE). DetailBuilder:setCanExportXLS(TRUE). // Determina se o botão de exportação para planilha (formato CSV) ficará habilitado (TRUE) ou não (FALSE) DetailBuilder:setModalMaxWidth("1440px"). // Tamanho máximo de largura que a janela de detalhe poderá possuir ASSIGN detailJsonOutput = DetailBuilder:createDetail(). //Gera o objeto de detalhe /* A temp-table RowErrors pode ser utilizada para retornar mensagens de erro, caso necessário: CREATE RowErrors. "texto": "Operação <b>10 - montar</b>", ASSIGN RowErrors.ErrorNumber = 17006 RowErrors.ErrorDescription "tipo": null, = "ERRO DE EXEMPLO" RowErrors.ErrorSubType = "tipoDetalhe": null,ERROR". */ CATCH eSysError "tituloProgresso": null,AS Progress.Lang.Error: "urlDetalhe": null,CREATE RowErrors. ASSIGN RowErrors.ErrorNumber "valorProgresso": null = 17006 }, RowErrors.ErrorDescription {= eSysError:getMessage(1) "classeTexto": "po-font-text-large po-sm-12 po-p-0", RowErrors.ErrorSubType = "ERROR". END. "icone"FINALLY: null, IF fn-has-row-errors() THEN "parametrosDetalhe"DO: null, "styleTexto": "{\"color\":\"white\"}", UNDO, RETURN 'NOK':U. END. END FINALLY. END PROCEDURE. |
O retorno da API de negócio deverá respeitar a estrutura conforme exemplo abaixo:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
{ "textocolumns": "Split <b>1</b>",[ { "tipolabel": null"Ordem", "property": "productionOrderNumber", "tipoDetalhetype": null"cellTemplate", "tituloProgressodetailUrl": null"html.productionOrder", "urlDetalheformat": null, "valorProgressoparameterLabels": null }, [ {"detalhaOP" ], "classeTextoparameterProperty": "po-sm-12 po-pr-1 po-pt-1 po-pl-0", [ "productionOrderNumber" "icone": null], "parametrosDetalhe": null}, { "styleTextolabel": null"Item", "property": "itemCode", "textotype": null, "format": null "tipo": "progresso",} [...] ], "tipoDetalheitems": null,[ { "tituloProgressoitemCode": "% Conclusão: 50%me2017a", "urlDetalheproductionOrderNumber": null,"1035" "valorProgresso": 50 [...] } ], "tags": [ { "colorTexto": "white", null, "icone": "po-icon-manufacture"null, "texto": "CT-SAMEGGF sem ACA" } ], } "hasNext": false, ] "modalMaxWidth": "1440px", } |
O resultado em tela do retorno exemplificado acima será um monitor uma janela de detalhe conforme abaixo: