Árvore de páginas

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

NomeDireçãoTipo Descrição
ttVisaoMonitorINPUTTemp-TableTemp-Table contendo as informações do monitor na visão em que está sendo carregado.
iPageINPUTIntegerNúmero da página que está sendo consultada (caso a paginação seja executada)
cSerieINPUTCharacterCaso o detalhe seja executado através do clique em um gráfico, a categoria clicada será enviada
cCategoryINPUTCharacterCaso o detalhe seja executado através do clique em um gráfico, a série clicada será enviada
detailJsonOutputOUTPUTJsonObjectJSON contendo as definições de leiaute e dados que devem ser apresentados na tela.
RowErrorsOUTPUTTemp-TableTemp-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

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.
tipoTipo da coluna. Verificar documentação do PO-UI para maiores informações. Padrão será texto.
formatoFormato (máscara) que o campo deverá assumir.
url-detalheConté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-parametrosArray 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-parametrosArray de strings que determina qual campo será usado como base para o valor do parâmetro que será incluso no LocalStorage.
larguraLargura que a coluna irá assumir na tabela.

*Campos obrigatórios

Exemplo de utilização
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:

Exemplo de utilização
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-headerClasses 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-headerEstilo HTML que será atribuído ao objeto. Usar a sintaxe padrão do HTML, ex: background-color: red;text-align: center;

*Campos obrigatórios

Exemplo de utilização
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-textoCor da tag. Aceita os padrões do PO-UI, como “color-01”, o nome da cor (blue, red) ou o código hexadecimal.
iconeAceita os ícones conforme https://po-ui.io/guides/icons.

*Campos obrigatórios

Exemplo de utilização
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)

Exemplo de utilização
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.

Exemplo de utilização
DetailBuilder:setCanExportXLS(TRUE).



modalMaxWidth (Opcional)

Se o detalhamento for via modal, essa propriedade define o tamanho máximo que ela poderá assumir na tela

Exemplo de utilização
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:

Exemplo Api de Negócio
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 
        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 ttTags). /* 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.

O retorno da API de negócio deverá respeitar a estrutura conforme exemplo abaixo:

Exemplo de retorno JSON (Detalhe)
{
  "columns": [
    {
      "label": "Ordem",
      "property": "productionOrderNumber",
      "type": "cellTemplate",
            "detailUrl": "html.productionOrder",
      "format": null,
            "parameterLabels": [
          "detalhaOP"
      ],
      "parameterProperty": [
          "productionOrderNumber"
      ],           
    },
    {
      "label": "Item",
      "property": "itemCode",
      "type": null,
      "format": null
    }
        [...]
  ],
  "items": [
    {     
      "itemCode": "me2017a",    
      "productionOrderNumber": "1035"
            [...] 
    }
    ],
  "tags": [
    {
      "colorTexto": null,
      "icone": null,
      "texto": "GGF sem ACA"
    }
  ],
    "hasNext": false,
    "modalMaxWidth": "1440px",
}


O resultado em tela do retorno exemplificado acima será uma janela de detalhe conforme abaixo: