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.
...
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.
...
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.
...
Bloco de código | ||
---|---|---|
| ||
DetailBuilder:setTags(INPUT TABLE ttMonitorTagttTags). |
...
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 ChartBuilderDetailBuilder 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-detail: // O nome da procedure de detalhe sempre precisa ser esse DEFINE INPUT PARAM TABLE FOR ttVisaoMonitor. DEFINE INPUT PARAM iPage AS INTEGER NO-UNDO. DEFINE INPUT PARAM cSerie AS CHARACTER NO-UNDO. DEFINE INPUT PARAM cCategory AS CHARACTER NO-UNDO. DEFINE OUTPUT PARAM detailJsonOutput AS JsonObject NO-UNDO. DEFINE OUTPUT PARAM TABLE FOR RowErrors. DEFINE VARIABLE DetailBuilder AS DetailBuilder NO-UNDO. DetailBuilder = NEW DetailBuilder(). // Classe utilitária que ajudará na montagem do objeto de detalhe FIND FIRST ttVisaoMonitor. DetailBuilder:setHeaders(INPUT TABLE ttHeadersDetalhe). /* Opcionalmente, também podemos montar cabeçalhos (headers) para a janela de detalhe */ DetailBuilder:setTags(INPUT TABLE ttMonitorTagttTags). /* Opcionalmente, também podemos 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. ASSIGN RowErrors.ErrorNumber = 17006 RowErrors.ErrorDescription = "ERRO DE EXEMPLO" RowErrors.ErrorSubType = "ERROR". */ 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. |
...