Á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 Detalhe, como tags, linhas, barra de progresso e valores.

Obrigatória: Somente para monitores que possuem opção do tipo Texto


Parâmetros

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

...

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

...

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:


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

cod-labelNome que será exibido na coluna.
propriedadeNome da propriedade que será exibida nessa coluna. Ela deverá existir dentro 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 (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.


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

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;
texto-headerTexto que será exibido dentro do quadrado.


ttMonitorTag (opcional)

Temp-table contendo registros que se tornarão PO-TAGS, que pode ser usado para exibir dados importantes e concisos de forma compacta. As tags ficarão abaixo dos headers, se existirem.

Propriedade

Descrição

cor-texto (opcional)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 (opcional)Aceita os ícones conforme https://po-ui.io/guides/icons.
textoTexto a ser exibido na tag

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

...

Altura (Opcional)

...

.



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:

...