Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

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

monitorJsonOutputOUTPUT
NomeDireçãoTipo Descrição
ttVisaoMonitorINPUTTemp-TableTemp-Table contendo as informações do monitor na visão em que está sendo carregado.
iPage
INPUT
JsonObjectJSON 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 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

IntegerNú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/

...

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.
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

Bloco de código
titleExemplo 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:

Bloco de código
titleExemplo 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

Bloco de código
titleExemplo 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

Bloco de código
titleExemplo 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)

Bloco de código
titleExemplo 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.

Bloco de código
titleExemplo 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

Bloco de código
titleExemplo 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:

Bloco de código
titleExemplo Api de Negócio
linenumberstrue
collapsetrue
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
titleExemplo Api de Negócio
linenumberstrue
collapsetrue
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
titleExemplo de retorno JSON (Texto)
linenumberstrue
collapsetrue
{
    "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
titleExemplo de retorno JSON (Detalhe)
linenumberstrue
collapsetrue
{
  "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:

Image RemovedImage Added