Histórico da Página
Realiza a busca dos dados que serão visualizados no 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 | 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 (https://po-ui.io/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 | |
---|---|---|
Nome que será exibido na coluna. | propriedade||
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 | dos objetos passados no array aItems.tipo (opcional) | Tipo da coluna. Verificar documentação do PO-UI para maiores informações. Padrão será texto. |
formato | Formato (opcional)Formato (máscara) que o campo deverá assumir. | |
url-detalhe (opcional) | 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 (opcional) | 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 (opcional) | Array de strings que determina qual campo será usado como base para o valor do parâmetro que será incluso no LocalStorage. | |
largura (opcional) | Largura que a coluna irá assumir na tabela. |
...
*Campos obrigatórios
Bloco de código | ||
---|---|---|
| ||
DetailBuilder:setColumns(INPUT TABLE ttColunaDetalhe). |
Temp-table
...
Propriedade
...
Descrição
...
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 |
ttMonitorTag (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
...
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: