Painel Tabela de Dispositivos
Neste painel, faz-se a customização de Lista de Dispositivos presente no Informações da página, no qual tem a função de listar os Dispositivos do contrato no ormato de uma tabela.
Além disso, este painel permite que os conectores/dispositivos do contrato sejam agrupados por determinadas característica comuns entre eles, um conceito chamado de Agregação por colunas.
O recurso se encontra nas opções de painéis de telas denominado como Tabela de Dispositivos.
Para maiores detalhes de configuração de telas, acesse Criando uma nova Tela (dashboard) para um Conector.
Propriedades Especificas
É possível substituir a tabela de Dispositivos padrão do Informações da página pelo painel customizado.
Para mais informações, acesse: Substituindo a tabela de Dispositivos padrão do Dashboard de Contrato.
Lista de Itens
Origem
Seleciona a origem dos itens a serem apresentados neste painel:
Mostrar todos: Exibe todos os itens mesmo com o conector de referência configurado;
Conector selecionado: Exibe os itens do conector de referência configurado;
Instância de modelo: Exibe os itens da instância de modelo de todos os conectores ou do conector de referência configurado.
Limite e Offset
Utilizado para dividir o conteúdo (por exemplo em duas tabelas).
Limite: Define um limite para a quantidade de itens apresentados na tabela.
Offset: Define um deslocamento para a quantidade de itens apresentados na tabela (por exemplo, caso seja definido um offset de 5, serão apresentados os itens começando a partir do sexto item do resultado da consulta).
Filtro
Filtra os itens que farão parte do conjunto analisado. Por padrão, sem expressão, todos os itens serão considerados.
O filtro deverá retornar true para os itens válidos.
Exemplos:
Filtro |
Descrição |
|---|---|
location_name == “HI” |
Apresenta os itens que possuem a localização com o nome “HI”. |
user_data.extended_properties.model == “X” |
Apresenta os itens que possuem o campo customizado “model” com o valor “X”. |
location_address.state == “SP” |
Apresenta os itens que possuem o endereço com o estado “SP”. |
has_active_alarms == true |
Apresenta os itens que possuem alarmes ativos. |
location_address.state == “RJ” || location_address.state == “MG” |
Apresenta os itens que possuem o endereço com o estado “RJ” ou “MG”. |
location_name == “HI” && has_active_alarms == true |
Apresenta os itens que possuem a localização com o nome “HI” e que possuem alarmes ativos. |
Atenção
Caso copie dessa tabela, não funcionará, necessitando refazer as aspas.
Nota
Esse filtro não aceita combinações com atributos convertidos em texto com ${ }.
Exemplos:
${location_name} == “HI”
${location_name == “HI”}
Pesquisa por texto
Habilita no topo da página a pesquisa de itens por texto.
Atenção
A pesquisa por texto é realizada apenas sobre os itens do tipo texto e não sobre os itens apresentados dentro de algum controle do sinótico.
Paginação
Habilita na parte superior da tabela a Paginação de registros de dispositivos (indisponível quando utilizado o recurso de Agregação por colunas).
Ordenar por Alarmes
Habilita a ordenação dos dispositivos por alarmes ativos, ou seja, os dispositivos com alarmes ativos serão apresentados primeiro na tabela.
Atenção
Quando habilitado, não permite a ordenação inicial unida com outras colunas (personalizada nas configurações das colunas). Caso seja necessário, crie uma coluna para exibir os itens alarmados.
Estilo da tabela
Nesta seção, são apresentadas as opções de estilo disponíveis para a tabela:
Com bordas
Apresenta a tabela com bordas delimitando as células. Por padrão, a tabela é apresentada sem bordas. Quando a opção é habilitada, as seguintes opções de estilo ficam disponíveis para configuração:
Cor das bordas;
Estilo das bordas;
Espessura das bordas;
Restaurar para o padrão com bordas.
Condensado
Apresenta a tabela com um estilo mais condensado, ou seja, com menos espaçamento interno entre as linhas e colunas (padding). Por padrão, a tabela é apresentada com o estilo habilitado (5px de padding). Quando a opção de estilo condensado é desabilitada, fica com o espaçamento interno maior (8px de padding).
Listrado
Apresenta a tabela com cores listrada. Por padrão, a tabela é apresentada com o estilo listrado habilitado, permitindo a configuração da cor das linhas ímpares e pares. Além da possibilidade de restaurar para o padrão. Quando a opção é desabilitada, fica com a cor padrão do sistema, mas permitindo a configuração de estilo personalizado em cada coluna.
Enfatizar ao apontar
Apresenta um foco na linha ao apontar o mouse em algum item da lista. Por padrão, a opção é habilitada.
Abrir item por padrão
Após clicar sobre qualquer item da linha a tela associada é aberta. Por padrão, a opção é habilitada.
Altura da linha
Configura o tamanho da linha (0,5 à 10) de conteúdo inicial sem considerar o espaçamento interno (padding) e quebra de linha.
Configuração Global dos Títulos das Colunas
Define o estilo das colunas (globalmente) que não possuem personalização individual, configurado na seção Título das colunas:
Fonte: Define o tipo da fonte, negrito, itálico, tamanho do texto e tipo da unidade de medida (px, pt ou %).
Cores: Define a cor de texto e a cor de fundo.
Alinhamento: Define o alinhamento do texto nos títulos (esquerdo, direito e centralizado).
Atenção
Caso possua alguma coluna personalizada e queira que todas assumam a configuração global, utilize o botão aplicar que todas as colunas serão estilizadas com a configuração global, caso queira apenas aplicar a configuração global em uma coluna específica, restaure o estilo da coluna individualmente.
Colunas
Nesta seção, são apresentadas todas as colunas que estão configuradas na tabela, podendo remover todas as colunas ( ) ou ocultá-las ( ).
Em frente a identificação (nome) de cada coluna, são apresentados os seguintes botões:
: duplicar coluna (clonar);
: oculta a apresentação da coluna na tabela;
: remove a coluna.
Nota
Na frente do nome de cada coluna é exibido a indicação de qual é a coluna utilizada para realizar a agregação (agrupamento) e ordenação padrão com prioridade, caso exista.
Além dos botões citados acima, é possível reposicionar (ordenar) cada coluna da tabela clicando e segurando a coluna e reposicionando no local desejado.
As colunas (padrão) são as seguintes:
Conector: indica o nome do conector;
S/N: indica o Número de Série cadastrado para o conector;
Localização indica o “label” informado para a localização do conector;
Dispositivo: indica o nome do dispositivo;
Área de processo: indica o nome da Área de Processo do dispositivo;
O botão Adicionar coluna permite adicionar colunas customizáveis na tabela.
Propriedades de uma coluna
Ao expandir as configurações de uma determinada coluna, são apresentadas as seguintes seções de configuração para a coluna:
Configuração de Cada Título
Título da coluna que será exibido na tabela. Portanto, é nesta configuração que se deve definir qual o título será apresentado pela coluna.
Agrupar
Realiza o agrupamento () de dispositivos da tabela utilizando o valor da coluna (Agregação por colunas).
Atenção
Indisponível quando utilizado a exibição de controle.
Largura
Exibe a porcentagem da largura da coluna (alterado diretamente na tabela).
Ordenação
Permite iniciar a tabela com ordenação de itens pelo ícone :
: Ascendente (A - Z)
: Descendente (Z - A)
Atenção
Indisponível quando utilizado a exibição de controle.
Prioridade da Ordenação
Utilizado para fazer ordenação em conjunto.
Por exemplo: ordenar primeiro pelo Estado (1ª prioridade) e depois pela Cidade (2ª prioridade).
Estilo
Define o estilo do título da coluna personalizada, por exemplo para dar destaque entre as outras colunas:
Cores: Define a cor de texto e a cor de fundo.
Alinhamento: Define o alinhamento do texto nos títulos (esquerdo, direito e centralizado).
Atenção
Caso queira restaurar para o padrão, ou seguir o estilo dos títulos das colunas globalmente, utilize o ícone ( ).
Propriedades do Grupo (Coluna com agrupamento)
A seção de grupo é apresentada caso alguma coluna da tabela esteja marcada com a opção de agrupamento ().
Portanto, nesta seção são definidas as informações e estilos de apresentação para cada coluna na linha de grupo da tabela.
Expressão
Define se uma expressão irá determinar o conteúdo a ser apresentado para a coluna na linha de grupo.
Uma expressão pode ser a seleção de uma simples propriedade disponível, como a informação de “quantidade de conectores” do grupo. Também é possível escrever expressões que retornem o resultado de um cálculo ou mesmo combinando diversos resultados em uma única célula.
Ao entrar no Editor de expressão, são apresentadas as opções disponíveis para navegação/seleção e atualmente são as seguintes:
Estatísticas |
Descrição |
|---|---|
stats |
Opções de Estatísticas que se aplicam a cada grupo formado pela agregação:
|
name |
Nome do grupo |
icons |
Opções de Ícones que se aplicam a cada grupo formado pela agregação:
|
Seguem alguns exemplos:
Expressão |
Descrição |
|---|---|
${item.stats.connectors} |
Apresenta o número total de conectores do grupo |
${item.icons.alarm}${item.stats.alarmedConnectors?’Alarmado’:’Normal’} |
Apresenta o ícone dinâmico de alarme do grupo e um texto caso o grupo possua algum conector em alarme ou não |
${item.stats.connectedConnectors==item.stats.connectors?’Conectado’:’Desconectado’} |
Apresenta um texto caso o grupo possua todos seus conectores online(Conectado) ou não(Desconectado) |
Outro exemplo seria apresentar os ícones de conector, habilitado, conectado e alarmado com a quantidade de itens dentro do grupo com esses estados:
${item.icons.connector}
${item.stats.connectors}
${item.icons.enable}
${item.stats.enabledConnectors}
${item.icons.connected}
${item.stats.connectedConnectors}
${item.icons.alarm_on}
${item.stats.alarmedConnectors}
Para acompanhar um exemplo prático, siga o Exemplo de Agregação.
Aparência
Permite configurar a apresentação da célula associada a coluna, como cor da fonte e cor de fundo. As configurações são as seguintes:
Espaçamento
Propriedade |
Descrição |
Default |
|---|---|---|
Superior |
Define a distância, em pixels, de espaçamento entre a borda superior do controle e seu conteúdo(texto) |
Depende |
Direita |
Define a distância, em pixels, de espaçamento entre a borda direita do controle e seu conteúdo(texto) |
Depende |
Inferior |
Define a distância, em pixels, de espaçamento entre a borda inferior do controle e seu conteúdo(texto) |
Depende |
Esquerda |
Define a distância, em pixels, de espaçamento entre a borda esquerda do controle e seu conteúdo(texto) |
Depende |
Cores
Propriedade |
Descrição |
Default |
|---|---|---|
Ícone |
Cor da fonte(texto) |
Preto (#000000) |
Ícone balde |
Cor de fundo |
Branco (#FFFFFF) |
Texto
Define a configuração da fonte do texto apresentado pela coluna, como tamanho e alinhamento. As configurações são as seguintes:
Propriedade |
Descrição |
Default |
|---|---|---|
Fonte |
Define os atributos da fonte do controle Opções:
|
Source Sans Pro 18 |
Alinhamento |
Define o alinhamento horizontal do texto dentro do controle. Opções:
|
Centro |
Ícones
Define quais os ícones(e as cores dos mesmos) que serão utilizados no botão que representa o estado do grupo expandido(aberto) e recolhido(fechado).
Essa configuração é apresentada somente na coluna definida para realizar o agrupamento.
Ações do Grupo
Essa seção será apresentada apenas caso alguma coluna da tabela seja marcada com a opção de agrupamento e também se a coluna selecionada para edição não seja a coluna que define o agrupamento (pois está é utilizada para expandir ou recolher informações do grupo).
O objetivo de uma ação neste ponto é permitir que seja configurada uma ação de clique na informação apresentada por qualquer coluna(com exceção da coluna que define o agrupamento) na Linha do Grupo da tabela.
Portanto, quando se define uma ação em uma coluna, pode-se configurar a ação de duas maneiras:
Diretamente na coluna: a ação se aplicará de forma genérica para todos os grupos(conforme o clique na informação apresentada pela coluna na Linha do Grupo);
Para cada grupo de forma individual: quando se define uma ação em uma coluna, será apresentada uma seção chamada Telas no editor de propriedades. Nesta seção, serão apresentados todos os grupos formados pela agregação, sendo possível, por exemplo, associar uma tela especifica para cada grupo(quando um clique for realizado na informação apresentada pela coluna associada ao grupo).
Acesse Ações para mais informações sobre a configuração de ações.
Atenção
Atualmente, apenas as ações de Telas e Páginas estão disponíveis para configuração na ações de clique em uma coluna.
Propriedades do Conteúdo da Coluna (Tipo Texto)
Esta seção é apresentada para qualquer coluna independente se a tabela está ou não utilizando alguma coluna para agregação.
Portanto, as configurações são as seguintes:
Expressão
Define se uma expressão irá determinar o conteúdo a ser apresentado para a coluna na linha de grupo.
Uma expressão pode ser a seleção de uma simples propriedade disponível, como a informação de “nome” do conector. Também é possível escrever expressões que retornem o resultado de um cálculo ou mesmo combinando diversos resultados em uma única célula.
Ao entrar no Editor de expressão, são disponibilizadas algumas propriedades do conector/dispositivos, como nome, localização, status de conexão, além de eventuais Campos Customizados do Contrato.
Segue a definição de algumas dessas propriedades:
Propriedade |
Descrição |
|---|---|
name |
Nome do Conector |
location_name |
Identificação da localização cadastrada para o Conector |
location_address |
Informações da localização definida para o Conector(Cidade, Estado, Rua, Bairro, etc) |
is_connected |
Indicação do estado de conexão para o Conector |
number_active_alarms |
Número de alarmes ativos para o Conector |
has_active_alarms |
Indicação se há algum alarme ativo no Conector |
user_data |
Lista de Campos Customizados do Contrato |
device |
Lista com as propriedades do dispositivo associado ao Conector |
last_activity_at |
Indica a data/hora da última atividade/troca de informações entre o Conector e o Portal de Telemetria |
Estilo da coluna
Define o estilo do conteúdo e preenchimento da coluna do tipo texto.
Fonte
Define o tipo da fonte, negrito, itálico, tamanho do texto e tipo da unidade de medida (px, pt ou %).
Cores
Define a cor de texto e a cor de fundo.
Alinhamento
Define o alinhamento do texto nos títulos (esquerdo, direito e centralizado).
Quebra de linha
Define a exibição do conteúdo. Por padrão é habilitado, podendo exibir o item em mais de uma linha.
Quando habilitado, não permite que a coluna seja menor que o conteúdo (incluindo o conteúdo da linha de grupo), caso não seja possível exibir todas as colunas na tela, terá uma barra de rolagem.
Atenção
Caso queira restaurar para o padrão as Cores e o Alinhamento, utilize o ícone ().
Indicadores de estado
Define se um ícone será apresentado a direita () ou a esquerda () da informação da apresentada pela coluna. Caso desejado, podem ser removidos (). São eles:
Ícone |
Nome |
Descrição |
|---|---|---|
Conector Conexão |
Indica o estado de conexão do Conector com o Portal de Telemetria |
|
Conector Habilitado |
Indica o estado de habilitação do Conector no Portal de Telemetria |
|
Conector Alarme |
Indica a existência de algum alarme ativo no Conector |
|
Dispositivo Conexão |
Indica o estado de conexão do Dispositivo com o Portal de Telemetria |
|
Dispositivo Habilitado |
Indica o estado de habilitação do Dispositivo no Portal de Telemetria |
|
Dispositivo Alarme |
Indica a existência de algum alarme ativo no Dispositivo |
|
Conector Editor |
Permite o acesso ao cadastro do Conector |
|
Dispositivo Editor |
Permite o acesso ao cadastro do Dispositivo |
Ações da Coluna
O objetivo de uma ação neste ponto é permitir que seja configurada uma ação de clique na informação apresentada por qualquer coluna da tabela.
Portanto, quando se define uma ação em uma coluna, pode-se configurar a ação da seguinte maneira:
Diretamente na coluna: a ação se aplicará de forma genérica para todos os itens (conforme o clique na informação apresentada pela coluna);
Acesse Ações para mais informações sobre a configuração de ações.
Atenção
Atualmente, apenas as ações de Telas e Páginas estão disponíveis para configuração na ações de clique em uma coluna.
Propriedades do Conteúdo da Coluna (Tipo Controle)
Define o tipo de exibição do conteúdo da coluna como um controle do sinótico:
Controle
Define o controle a ser exibido:
Atenção
Aqui só vamos introduzir o conceito de cada seção, para mais informações, acesse: Controles de Tela.
Estilo da coluna
Define o estilo do preenchimento da coluna do tipo controle, pois as outras propriedades são definidas nas configurações do controle.
Cor de fundo
Define a cor de fundo (preenchimento da coluna).
Dado
Define o Dado associado ou propriedades que podem utilizar expressão.
Aparência
Define a aparência do controle (cores e bordas).
Texto
Define a fonte e alinhamento.
Informações
Define a Descrição do conteúdo (dica).
Permissões
Define as restrições (visualização e interação).
Propriedades específicas
Depende do tipo do controle:
TagDisplay: Formato e Valor padrão;
StaticLabel: Valor em texto ou html;
Image: URL da imagem (caso não seja imagem dinâmica);
TextList: Lista de textos;
ImageList: Lista de imagens;
Button: Valor em texto ou html;
ProgressBar: Valor mínimo, máximo e estilizações de nível de preenchimento.
Atenção
Todos os controles possuem as mesmas propriedades do sinótico, exceto o ProgressBar que possui:
Suporte apenas à orientação horizontal.
A linha de marcação de nível continua disponível.
Não possui o marcador externo com exibição do valor fora da barra.
Eventos
Define eventos de clique ou alteração de valor.
Agregação por colunas
Este recurso permite que os conectores/dispositivos do contrato sejam agrupados por determinadas características comuns entre eles.
Dessa forma, é possível obter uma apresentação mais dinâmica das informações, agrupando as colunas em diferentes níveis, de acordo com a necessidade.
Quando utilizada a agregação de colunas, a linha da tabela que contém a agregação pode exibir algumas estatísticas do grupo de conectores/dispositivos agrupados, como quantidades, alarmes e status de conexão do grupo como um todo. Chamamos essa linha da tabela de Linha do Grupo.
Ao selecionar e expandir a linha do Grupo (linha de agregação) na tabela, são exibidos os conectores/dispositivos que foram agrupados e é possível acessar o dashboard dos mesmos conforme o funcionamento da tabela padrão. Chamamos essas linhas da tabela de Linhas de Detalhes do grupo.
Para utilizar este recurso, siga os seguintes passos:
Acesse ou crie uma tela (ver Criando uma nova Tela (dashboard) para um Conector);
No layout da tela, selecione o Painel Tabela de Dispositivos e entre em seu editor;
Defina as colunas que farão parte da tabela e a ordenação das mesmas colunas conforme desejar;
Clique em na coluna em que deseja fazer a agregação (agrupamento) dos conectores(uma coluna que possua informações comuns entre os mesmos);
- Em Grupo:
Selecione a seção Expressão e posteriormente a(s) estatística(s) e/ou ícones que deseja apresentar na coluna na linha do grupo;
Defina os estilos de apresentação das informações através das propriedades Aparência e Texto;
Escolha os ícones de Aberto e Fechado assim como as cores na propriedade Ícones.
- Em Detalhes:
Selecione a seção Expressão e posteriormente a(s) informação(es) e/ou ícones que deseja apresentar na coluna na linha de detalhe;
Caso a coluna em questão possua um ícone associado, defina o alinhamento do mesmo através da propriedade Indicadores de estado.
Caso a coluna em questão não seja a de agregação, defina uma ação (caso desejado) na propriedade Ações a ser executado no clique nesta coluna na linha do grupo.
Exemplo de Agregação
Um exemplo de utilização do recurso pode ser observado abaixo:
Neste caso, foi cadastrado no contrato Campos Customizados do Contrato para que seja informado no cadastro de um Conector qual a Empresa que o mesmo está instalado.
Então, na agregação da tabela, foi utilizada a coluna de Empresa para agrupar os Conectores que estão instalados na mesma empresa.
Além disso, observe que na linha da tabela que determina a agregação(linha do grupo), foram definidas algumas estatísticas interessantes sobre o grupo de Conectores:
Coluna Conector
Linha do grupo
Foi montada uma expressão na linha do grupo para que seja apresentado o número de Conectores do grupo, ou seja, quantos conectores estão instalados em uma mesma Empresa. Expressão:
Total de Conectores: ${item.stats.connectors}
A expressão acima basicamente define um texto estático(Total de Conectores:) concatenando com a estatística que informa o número de conectores do grupo (${item.stats.connectors}).
Linha de detalhe
Já na linha de detalhe, foi utilizada apenas a expressão que retorna o nome do Conector:
${item.name}
Coluna Alarmes
Linha do grupo
Foi montada uma expressão na linha do grupo para que seja apresentado o Status de Alarme do grupo, ou seja, se qualquer conector do grupo possuir um alarme ativo, será indicado no ícone(será indicado Sem alarmes apenas se não houverem alarmes ativos somando-se os conectores). Expressão:
${item.icons.alarm}${item.stats.alarmedConnectors?'Alarmado':'Normal'}
A expressão acima basicamente define um ícone dinâmico de alarme (${item.icons.alarm}) concatenando os textos estáticos de Alarmado ou Normal caso a expressão que indica se já algum alarme ativo no grupo (item.stats.alarmedConnectors) seja verdadeira ou não.
Linha de detalhe
Já na linha de detalhe, foi utilizada apenas a expressão que apresenta os textos estáticos de Alarmado ou Normal caso a expressão que indica se o conector em questão possui algum alarme ativo(item.has_active_alarms) seja verdadeira ou não:
${item.has_active_alarms?'Alarmado' :'Normal'}
Coluna Status de Conexão
Linha do grupo
Foi montada uma expressão na linha do grupo para que seja apresentado o Status de Conexão do grupo, ou seja, se qualquer conector do grupo estiver desconectado, será indicado no ícone(será indicado Conectado apenas se todos os conectores do grupo estiverem online). Expressão:
${item.icons.connectorConnection}${item.stats.connectedConnectors==item.stats.connectors?'Conectado':'Desconectado'}
A expressão acima basicamente define um ícone dinâmico de status de conexão do grupo(${item.icons.connectorConnection}) concatenando os textos estáticos de Conectado ou Desconectado caso a expressão que indica o número de conectores online do grupo(item.stats.connectedConnectors) seja igual ao número total de conectores(item.stats.connectors) do grupo ou não.
Linha de detalhe
Já na linha de detalhe, foi utilizada apenas a expressão que apresenta os textos estáticos de Conectado ou Desconectado caso a expressão que indica se o conector em questão está conectado (item.is_connected) seja verdadeira ou não:
${item.is_connected?'Conectado':'Desconectado'}
Substituindo a tabela de Dispositivos padrão do Dashboard de Contrato
É possível substituir a tabela de dispositivos padrão das Informações da página da Home pelo painel customizado:
Para isso, basta clicar na opção Definir como padrão presente no topo do editor de propriedades do painel. Está opção só estará disponível caso a tela já esteja publicada.
Já para restaurar o painel original(padrão), clique no botão de restaurar (botão ao lado do texto “Este painel é o padrão”).
Atenção
As modificações só estarão disponíveis para telas já publicadas.