Editores de painéis Padrões

O Portal de Telemetria disponibiliza um editor para cada tipo de painel que pode ser associado em uma célula do layout. Para acessar o editor de um painel em especifico basta clicar em cima do painel presente em cada célula do layout (quando há um painel associado).

Existe um comportamento padrão entre todos editores de painéis e eles que serão especificados a seguir.

Propriedades Genéricas

Todos os painéis, possuem propriedades comuns entre eles e cada editor possibilita a configuração dessas propriedades clicando-se no painel apresentado no layout.

Após o clique, é exibido no lado direito da tela, um editor com as opções de Propriedades do Painel e Barra de Ferramentas.

Propriedades do Painel

Em Propriedades do Painel, temos as seguintes configurações:

Identificação	Descrição
Título	Define o título a ser apresentado no cabeçalho do painel
Altura	Define algumas configurações da altura do painel, sendo: Proporcional: Define a porcentagem de proporção de altura do painel caso esteja empilhado com outro painel considerando a altura do painel(célula) imediatamente a sua esquerda. Caso configurado como auto, o sistema calcula automaticamente a proporção. Mínimo: Define a altura(em pixels) mínima para o painel independente da configuração de proporção. Máximo: Define a altura(em pixels) máxima para o painel independente da configuração de proporção.
Barras de rolagem	Define o modo de apresentação de barras de rolagem nas posições Vertical e Horizontal do painel. Em cada posição, e temos as seguintes configurações: Nunca: Não apresenta a barra de rolagem em nenhuma situação; Automático: Apresenta a barra de rolagem caso o conteúdo apresentado no painel seja maior que sua altura/largura;
Cor de fundo	Define a cor de fundo para o painel.

Restringir Visualização

Nesta configuração, é possível definir uma ou mais Área de Processo para restringir a visualização do painel na tela(dashboard) de um Conector.

Caso especificada uma ou mais áreas, somente usuários com as permissões pertinentes na(s) Área(s) de Processo selecionada(s) poderão visualizar o painel.

Caso nenhuma Área de Processo seja selecionada, o painel será visível na tela(dashboard) de um Conector para qualquer usuário com acesso ao mesmo.

Barra de Ferramentas

A Barra de Ferramentas de um painel é uma área localizada no topo de um painel (em frente ao texto onde é localizado seu título) em que é permitido adicionar botões com Ações que executem determinadas funções disponibilizadas pelo Portal.

Para acessar a barra de ferramentas de um painel, acesse as propriedades do painel escolhido e clique sobre a aba de “ Ações”:

Clicando sobre o tópico “Barra de ferramentas” teremos uma nova opção:

Novo botão: insere um novo botão na barra de ferramentas.

Clicando sobre o tópico “Novo botão”, o Portal adicionará um novo botão na barra de ferramentas respectiva ao painel e assim que o botão for criado, poderemos visualizá-lo ao lado do título:

As configurações de um botão de ação possuem as seguintes propriedades:

Definição da apresentação do botão:

Ícone: apresenta somente o ícone definido para o botão;

Título: apresenta somente o título definido para o botão;

Ambos: apresenta o ícone e o título definido para o botão

Definição do Título a ser apresentado para o botão;

Seleção do Ícone a ser apresentado pelo botão.

Informações

Este campo é responsável por exibir uma breve descrição sobre a função do botão de ação. As Informações aparecem ao passar o mouse sobre o botão na barra de ferramentas.

O funcionamento deste campo com algumas pré-definições é descrito a seguir:

Comportamento ao não preencher: Caso não haja informações preenchidas, o campo mostrará o título do botão;

Exibição das informações: Se o campo de informações estiver preenchido, o campo exibirá essa informação;

Ocultar as informações: Para evitar que o campo apareça, é necessário inserir ao menos um espaço no tópico de informações.

Selecione uma ação

Seleção/configuração da Ação associada ao botão. Veja a seção de Ações para maiores detalhes de como utilizar este conceito.

Personalizar Botões

Permite definir o tamanho dos botões criados na barra de ferramentas utilizando a grandeza pt(ponto):

Requer Confirmação

Define se uma mensagem de confirmação será exibida para o usuário, possibilitando confirmar ou cancelar as ações do clique.

Título

Especifica o título da mensagem de confirmação.

Exemplo: Tem certeza?

Texto

Especifica o texto da mensagem de confirmação.

Exemplo: Você não poderá reverter este processo.

Ícone

Define o ícone que será exibido na mensagem. O ícone padrão é nomeado “Atenção”.

Opções disponíveis:

Nenhum;
Atenção;
Erro;
Sucesso;
Informação.

Botões

Define a visualização dos botões na mensagem de confirmação:

Permite alterar o título do botão “Cancelar” ou remover sua visualização utilizando o ícone “”;
Permite alterar o título do botão “Confirmar”.

Simulação

Ao clicar no botão de Simulação, uma pré-visualização da janela com a mensagem configurada será exibida na tela.

Restringir visualização

Nesta configuração, é possível definir uma ou mais Área de Processo para restringir a visualização do botão na tela(dashboard) de um Conector.

Caso especificada uma ou mais áreas, somente usuários com as permissões pertinentes na(s) Área(s) de Processo selecionada(s) poderão visualizar o botão.

Caso nenhuma Área de Processo seja selecionada, o botão será visível na tela(dashboard) de um Conector para qualquer usuário com acesso ao mesmo.

Restringir interação

Nesta configuração, é possível definir uma ou mais Área de Processo para restringir a interação(clique) no botão na tela(dashboard) de um Conector.

Caso especificada uma ou mais áreas, somente usuários com as permissões pertinentes na(s) Área(s) de Processo selecionada(s) poderão interagir(clicar) no botão para que o mesmo execute a ação configurada.

Caso nenhuma Área de Processo seja selecionada, o botão permitirá a interação de qualquer usuário com acesso ao mesmo.

Atenção

Realizada as configurações dos botões de ações na barra de ferramentas de um painel e publicadas as configurações, as ações poderão ser executadas diretamente em uma tela(dashboard) de conector.

Estilo de Apresentação dos Botões de Ação na Tela

Na seção Estilo, é possível definir a formato de presentação dos botões com as seguintes opções:

Automático: Os botões são exibidos à direita do título do painel sinóptico, acompanhados de uma barra de rolagem, caso seja necessário. Em telas menores, é adicionado um menu suspenso (Dropdown) para facilitar a navegação;

Dropdown: O menu suspenso é exibido sempre, independentemente do tamanho da tela.

Atenção

Quando a visualização estiver como Dropdown, o título será exibido, mesmo que a opção de mostrar apenas o ícone esteja selecionada. Para ocultar a visualização do título, é necessário adicionar pelo menos um espaço no campo correspondente.

Comandos

Em todos os painéis, são disponibilizados algumas opções de comandos em seu cabeçalho visando facilitar o fluxo de algumas ações necessárias. São elas:

Identificação	Descrição
Propriedades do painel	Abre o editor de propriedades do painel;
Exportar	Exporta um arquivo de definição de tela(arquivo JSON);
Restaurar	Atualiza a versão da tela local do navegador com a última versão publicada da tela;
Publicar	Atualiza a versão da tela no servidor do Portal de Telemetria com a versão local alterada pelo usuário;
Expandir/colapsar painel	Expande ou colapsa a apresentação do painel na página;
Sair do modo edição	Sai do modo de edição do painel e apresenta a visualização do mesmo.

Ações

O conceitos de Ações no Portal de Telemetria envolve a configuração da execução de alguma funcionalidade disponibilizada na plataforma, sem exigir nenhuma codificação por parte do usuário. Ou seja, cada funcionalidade possui configurações próprias para serem executadas por um determinado controle no contexto do Portal.

Essas ações podem ser configuradas em botões na barra de ferramentas de um painel ou serem disparadas por eventos de controles utilizados em painéis sinóticos (botões, imagens, etc). As ações são dividas em grupos de funcionalidades e cada grupo possui um conjunto de ações. Abaixo, vamos listar cada ação, como funcionam e a que grupo pertencem:

Grupo: Tela

Ações	Descrição	Parâmetros
Abrir Tela	Abre uma tela(dashboard) na mesma página onde a ação foi executada	Tela(dashboard) a ser aberta
Abrir Tela(guia)	Abre uma tela(dashboard) em uma nova guia do navegador	Tela(dashboard) a ser aberta
Abrir Tela(janela)	Abre uma tela(dashboard) em uma nova janela do navegador	Tela(dashboard) a ser aberta
Abrir Tela(modal)	Abre uma tela(dashboard) em um painel modal	Tela(dashboard) a ser aberta
Abrir Tela(popup)	Abre uma tela(dashboard) em um painel popup	Tela(dashboard) a ser aberta
Tela cheia	Abre uma tela(dashboard) em tela cheia	Tela(dashboard) a ser aberta

Grupo: Página

Ações	Descrição	Parâmetros
Abrir Página	Abre uma página(URL) na mesma página onde a ação foi executada	URL da página
Abrir Página(guia)	Abre uma página(URL) em uma nova guia do navegador	URL da página
Abrir Página(janela)	Abre uma página(URL) em uma nova janela do navegador	URL da página
Abrir Página(modal)	Abre uma página(URL) em um painel modal	URL da página
Abrir Página Inicial	Abre a página inicial do portal
Voltar à página anterior	Navega para a página anterior
Ir à próxima página	Avança a próxima página
Atualiza conteúdo da página	Atualiza informações da página (Comando para atualizar informações da interface)

Grupo: Impressão

Ações	Descrição	Parâmetros
Pré visualização	Exibe a pré visualização de impressão de uma tela(dashboard)	Tela(dashboard) a ser visualizada
Impressão nativa	Utiliza o recurso de impressão em PDF do próprio navegador

Grupo: Painel

Ações	Descrição	Parâmetros
Expande Painel	Expande um painel associado a ação em toda área útil da página	Painel a ser expandido
Tela cheia	Expande um painel associado a ação em toda a tela	Painel a ser expandido

Grupo: Dado

Ações	Descrição	Parâmetros
Atribuir valor ao dado	Atribui um valor em um dado(conforme configurado na ação)	Valor a ser atribuído e o Dado a receber o valor
Inverter valor do dado	Inverte valores em um dado(conforme configurado na ação)	Valores a serem invertido e o Dado a receber o valor

Grupo: Form

Ações	Descrição	Parâmetros
Enviar	Envia a escrita para cada Dados que foi modificado nos controles do formulário	Nome do formulário
Restaurar	Restabelece os valores nos controles do formulário que foram modificados e não enviados	Nome do formulário

Grupo: Usuário

Ações	Descrição	Parâmetros
Efetuar logout	Efetua o logout do usuário autenticado do Portal
Abrir perfil do usuário	Abre a página de perfil do usuário
Abrir controle de acesso	Abre a página de gerência de usuários

Grupo: OnlinEE

As ações deste grupo estão associadas ao produto OnlinEE e só devem ser utilizadas em Contratos que habilitem tal recurso.

Ações	Descrição	Parâmetros
Lista de Máquinas	Abre a página que Lista as Máquinas no OnlinEE
Dashboard de Máquina	Abre o dashboard da Máquina associada ao Conector definido no parâmetro da ação	Conector associado a Máquina

Editor de Título dos Painéis

Nas propriedades dos painéis, além de adicionar um título simples. Existe a possibilidade de criar um título personalizado com dados do cadastro do conector e do sistema. Também é possível incorporar o painel junto com o título ativando o iframe e adicionar ícone do lado esquerdo do título.

Atenção

Nem todos os painéis implementam o título e ícone, como:

Status de Conector;
Status de Conector / Dispositivos;
Barra de Ferramentas;
Cartões de Conectores;
Estatística Conectores / Dispositivos;
Gráfico;
Imagem;
Texto;
Tabela de Dispositivos.

Outros painéis que não implementam somente o ícone:

Tabela;
Histórico de Eventos.

iFrame ou Embed

O recurso serve para deixar o título visível quando renderizado em iframe (painel embutido em outra página), pois por padrão só vai o corpo.

Para ativar o recurso basta, clicar no ícone que mudará para visível com o ícone .

Ícone

Para adicionar um ícone do lado esquerdo do título do painel, precisa ativar a opção que irá aparecer um botão com um ícone padrão para selecionar o desejado.

Título

Serve para adicionar um texto simples alfanumérico ou criar um título personalizado com dados do cadastro do conector e do sistema.

Atualmente somente o painel sinótico vem por padrão com um título personalizado feito por expressão.

${connector?.name||''} ${connector?.serial_number||''}

Aparece o valor da variável connector?.name se tiver, que é o nome do conector, Ou não aparece nada (‘’). Depois aparece um espaço. E caso tenha valor na variável connector?.serial_number, aparecerá o número de série, caso contrário, não aparecerá nada.

O portal disponibiliza a função de excluir o título com o ícone e caso precise restaurar o nome apagado, utilize o ícone .

O conteúdo da expressão pode ser informado diretamente no editor de propriedades no campo de título ou pode-se abrir o editor de expressões clicando-se com a tecla CTRL pressionada dentro do campo de título ou no ícone .

Este editor de expressão permite navegar e selecionar propriedades do conector e cadastro do sistema que serão utilizados para escrever expressões que retornem o título personalizado. Se houver conteúdo no cadastro, ele será exibido, caso contrário, nada será exibido.

../_images/title_panel_expression_editor.png

Atenção

ENTER e SHIFT + ENTER são usados para organizar a expressão, não sendo apresentados na visualização do conteúdo do título.

Note que nesse editor de expressão tem um exemplo de utilização, clicando nos itens desejados, mostrando as informações do cadastro do conector sem condição para aparecer, usando textos simples no meio e ENTER para organizar a expressão:

${connector.name} -
S/N: ${connector.serial_number}
CLP: ${connector.connector_type.name} -
${connector.contract_process_area.name} -
${connector.location_name} -
${connector.user_data.extended_properties.empresa}

Então é exibido as seguintes informações:

Nome do Conector;

Número Serial;

Modelo do Hardware;

Área de Processo;

Localização do Conector;

Empresa dos Campos Customizados.

É possível modificar as expressões em JavaScript para apresentar dados de acordo com comparações, usando o operador ternário.

Operador Ternário

Utilizado caso queira usar um valor, se verdadeiro, e outro, se falso.

Visite o link para saber mais sobre o funcionamento do Operador condicional (ternário).

${connector.serial_number ? 'S/N: ' : ''}

Se tiver cadastro no número serial, será mostrado, caso contrário, não mostrará nada.

${connector.serial_number ? ' - ' : ''}

Se tiver cadastro no número serial, será mostrado um traço com espaços, caso contrário, não mostrará nada.

Editor de painéis de Dados

Atualmente o editor de painéis de dados permite apenas edição das propriedades genéricas de painéis e também as operações comuns, conforme essa Propriedades Genéricas.

Atenção