Como criar telas de Relatório no Portal de Telemetria
Introdução
Este tutorial tem como objetivo descrever o passo a passo para a criação de uma Tela no Portal de Telemetria contendo um Relatório com algumas informações de um Conector. Também serão apresentadas configurações básicas de utilização.
O conceito de Relatório no Portal de Telemetria corresponde ao uso de Painéis específicos em uma Tela (verificar Elementos de uma Tela de um Conector), nos quais é possível exibir objetos gráficos e registros históricos. O usuário define o layout mais adequado para sua aplicação.
Atenção
Para uma melhor compreensão do funcionamento do Relatório e de seus Painéis, recomendamos a participação no curso gratuito sobre o uso das ferramentas do Portal. Esse treinamento oferece uma visão prática e detalhada dos principais recursos disponíveis.
Criando Tela
Primeiramente, precisamos criar uma Tela para configurar os Painéis do Relatório. Para isso, siga os passos abaixo:
Selecione o ícone Telas () no menu lateral e acesse “ Nova tela”;
Crie uma nova Tela.
Para este exemplo, utilizaremos os Painéis:
Barra de Ferramentas;
Painel de Texto;
Painel de Imagem;
Painel Gráfico;
3 Painéis Tabela.
Definindo Layout da Tela do Relatório
O layout proposto para este tutorial utilizará a estrutura abaixo:
Uma linha com o Painel que permite ao usuário definir o período de consulta (entre outras opções) para os registros;
Uma segunda linha contendo o cabeçalho do Relatório, utilizando Texto para o título e uma Imagem;
Uma terceira linha com uma Tabela, contendo informações introdutórias ao Relatório;
Na penúltima linha, uma Tabela com estatísticas e um Gráfico apresentando a evolução no tempo dos dados filtrados;
Por fim, uma linha contendo uma Tabela com todos os registros existentes no período selecionado.
Veja um exemplo da adição dos Painéis ao layout:
Ao final, a Tela ficará semelhante ao exemplo abaixo:
Linha de seleção de período
Na primeira linha do Relatório, será utilizado o Painel Barra de Ferramentas.
Este Painel permite selecionar o período de consulta, visualizar a pré-visualização de impressão da Tela, entre outras funções.
Para configurá-lo:
Clique na opção Selecionar painel na primeira linha do layout;
Na lista apresentada, selecione o Painel Barra de Ferramentas.
Linha de cabeçalho
Nesta linha do Relatório, utilizaremos o Painel Texto para definir o título e um Painel de Imagem para inserir o logotipo da empresa.
Linha de informações gerais (introdução)
Nesta linha, utilizaremos o Painel Tabela para exibir informações gerais introdutórias do Relatório.
Linha de conteúdo do Relatório
Nesta linha, utilizaremos o Painel Tabela para exibir estatísticas dos dados filtrados e um Painel Gráfico para apresentar a evolução dos valores ao longo do tempo.
Linha de conteúdo da tabela
Por fim, utilizaremos novamente o Painel Tabela para exibir o histórico dos dados.
Painéis para Utilização em Relatórios
Os Painéis utilizados pelo recurso de impressão da Barra de Ferramentas são componentes específicos projetados para gerar documentos em PDF prontos para impressão.
Atenção
Utilizando a impressão do navegador CTRL + P, fora do recurso de impressão do Portal, o resultado será diferente do esperado, pois o Portal não possui controle sobre esse método.
Esses Painéis permitem criar uma Tela personalizada contendo informações como:
Conector selecionado;
Usuário responsável pela geração do Relatório;
Período definido;
Registros históricos dos dados;
Outras informações relevantes.
Foram definidos cinco Painéis, categorizados como Painéis de Relatório, que atuam corretamente com o recurso de Relatórios para Impressão:
Barra de Ferramentas: essencial para impressão. Possui o botão de imprimir e o controle de período;
Painel de Texto: permite inserir pequenas descrições, títulos e subtítulos;
Painel de Imagem: permite inserir imagens previamente adicionadas ao Portal ou via URL;
Painel Gráfico: exibe graficamente os valores dos Dados do Conector dentro do período filtrado;
Tabela: exibe informações do Conector ou histórico dos valores de Dados.
Além dos Painéis acima, é possível utilizar o Painel Sinótico:
Sinótico: análise visual de informações com imagens e controles para Dados correntes ou estatísticos.
Atenção
Os demais Painéis disponíveis serão ignorados pelo recurso de impressão.
Requisitos Principais Para Impressão
Para que a impressão e o download funcionem corretamente, algumas configurações são necessárias:
Os Painéis devem possuir altura mínima definida, exceto a Tabela, que usa tamanho auto baseado nas linhas exibidas;
Barra de Ferramentas: se necessário, defina a altura mínima como auto para ocupar o menor espaço possível. Embora não seja impressa, sua área será utilizada como margem superior em branco no PDF.
Pré-visualização da Impressão
Ao clicar no botão de impressão da Barra de Ferramentas, o Portal gera uma pré-visualização em HTML.
Essa pré-visualização serve como referência, mas o PDF final pode apresentar pequenas diferenças.
Nota
A pré-visualização não consegue prever quebras automáticas de página ao exibir grandes volumes de dados ou múltiplos Painéis.
Apenas as quebras de página configuradas no layout serão exibidas.
Atenção
Recomenda-se sempre validar a impressão e consultar os Problemas Comuns na Geração de PDF.
Utilizando CTRL + P ou o botão de download da pré-visualização, o PDF do Relatório será gerado.
Utilização de Imagens na pré-visualização e Impressão
Atualmente, para utilizar arquivos de mídia nos Painéis o Portal de Telemetria oferece duas opções:
Utilizar imagens hospedadas externamente, através de links URL;
Utilizar imagens salvas na Biblioteca de Imagens.
Atenção
Embora seja possível utilizar imagens externas por link (URL) para exibição na Tela, esse tipo de arquivo via URL não é suportado na pré-visualização e na geração do Relatório em PDF.
Para que as imagens sejam apresentadas corretamente no Relatório, é necessário que os arquivos de mídia utilizados estejam salvos em uma Biblioteca de Imagens do Portal de Telemetria. Somente imagens hospedadas em Bibliotecas são processadas no mecanismo de renderização da impressão e exportação do relatório em PDF.
Detecção automática de URLs externas
Ao tentar gerar a pré-visualização ou impressão do Relatório, o Portal verifica automaticamente os arquivos utilizados nos Painéis. Caso seja identificado um ou mais arquivos de mídia configurados via link externo, o usuário será alertado informando que essas imagens não serão exibidas na impressão:
Esse alerta tem como objetivo orientar o usuário a substituir as imagens externas por versões armazenadas na Biblioteca de Imagens, garantindo o correto funcionamento do Relatório.
Além disso, o portal também exibe o nome do(s) arquivo(s) que não serão renderizados no PDF, facilitando a identificação e correção do problema. Clicando sobre o nome do arquivo, o usuário é direcionado para a página referenciada pelo link externo, para que o usuário possa visualizar a imagem e substituí-la por uma versão armazenada na Biblioteca de Imagens.
Nota
A imagem vinculada por URL continuará sendo exibida normalmente na Tela, porém não será renderizada no PDF.
Para maiores informações sobre o uso de imagens no Painel Sinóptico e no Painel Imagem , consulte Imagens.
Limitações na Geração de Relatórios em PDF
O Portal de Telemetria oferece a funcionalidade de geração de relatórios, que converte o Dashboard exibido no navegador (página HTML) para um arquivo PDF. No entanto, essa conversão apresenta algumas limitações que estão listadas abaixo:
Botão de Ação dos Painéis
Os botões (ícone e título) na barra de ferramentas do painel não são renderizados no processo de impressão.
Ação de Animação de Controles
No Painel Sinótico, objetos configurados com algum atraso (delay) na Ação de Animação de Controles não são renderizados.
Atenção
A configuração de atraso deve ser padrão, ou seja, sem atraso ao ser ativada, para renderizar na impressão.
Espaçamento Vertical
Espaços em branco maiores que o esperado podem ocorrer entre painéis, comprometendo assim a compactação e a estética do documento em PDF.
Nota
Esse comportamento acontece:
Após a utilização de pelo menos um Painel Gráfico ou Painel Sinótico posicionado lado a lado com outro painel no layout.
Após a aplicação do recurso de quebra de página manual no layout de tela.
Essas situações geram espaçamentos verticais adicionais que não refletem no layout da pré-visualização, resultando em páginas PDF com áreas vazias desnecessárias.
Atenção
Não há configurações disponíveis para controlar esses espaçamentos desnecessários.
Dica
Para minimizar o impacto visual desses espaçamentos, considere:
Organizar esses painéis verticalmente (empilhados) ao invés de lado a lado.
Imagens
O Painel imagem e o Sinótico possuem limitações específicas relacionadas às imagens utilizadas:
Links externos que apontam para fontes externas, ou seja, não hospedadas no Portal, podem não ser carregadas corretamente dependendo do navegador de reconhecê-las.
Atenção
Recomenda-se não utilizar imagens externas, então utilize imagens que estejam salvas ou salve-as na Biblioteca de Imagens do Portal de Telemetria para evitar problemas na impressão.
Imagens muito grandes (alta qualidade em pixel) em excesso podem não ser renderizadas corretamente, ocupando muito tempo para carregar, causando lentidão, ou até mesmo gerar erro na geração do PDF.
Atenção
Recomenda-se utilizar imagens com tamanho em pixel mais próximo do uso nos painéis, a fim de garantir melhor desempenho e qualidade na apresentação dos resultados.
Tabelas
O Painel Tabela pode apresentar pequenas variações no tamanho da fonte e no espaçamento do texto. Para uma leitura ideal, ajuste manualmente nas propriedades da célula.
A largura das colunas no Portal pode divergir da visualização em edição e pré-visualização. Por padrão, a última coluna absorve o espaço restante da tabela.
Ajuste de Impressão: Pode ser necessário redimensionar as colunas manualmente para evitar cortes;
Distribuição Perfeita: Configure a largura de cada coluna para que o somatório totalize 100%, garantindo o preenchimento harmônico da área.
Nota
As tabelas de histórico são otimizadas para impressão: não possuem cortes de informações, permite aplicar quebra de linha em textos longos e possuem suporte nativo a múltiplas páginas.
Gráficos em Tempo real
No Painel Sinótico os Controles Gráficos em Tempo real não serão apresentados na impressão.
Atenção
Recomenda-se utilizar o Painel Gráfico que cumpre essa e outras funções de maneira adequada para a criação de relatórios.
Configurando os Painéis do Relatório
Nesta seção, vamos configurar os painéis definidos na estrutura no relatório. Portanto, siga os seguintes passos para configurar cada um dos painéis:
Configurando o Painel de Texto
Aqui, vamos configurar o Painel Texto referente ao título do nosso relatório.
Portanto, siga os seguintes passos:
No Painel Texto, clique sobre o painel para acessar suas configurações;
Em “Propriedades específicas”, acesse “Propriedades do painel” e digite o título do relatório;
Para finalizar, personalize o título da maneira preferível.
Veja um exemplo do passo a passo acima:
Configurando o Painel de Imagem
Aqui, vamos configurar o o Painel Imagem referente ao cabeçalho do nosso relatório.
Portanto, siga os seguintes passos:
Clique sobre o painel para acessar suas configurações;
Selecione a imagem que será utilizada no ícone ao lado do campo “url”;
Em seguida, em Alinhamento, escolha o canto superior direito.
Veja um exemplo do passo a passo acima:
Após essas configurações, basta ajustar o Painel Texto e o Painel Imagem, para deixar o texto centralizado.
Para isso, siga os seguintes passos:
Clique sobre o Painel Imagem e em seguida Propriedades;
No campo Altura , selecione o Mínimo para auto;
Para o Painel Texto, defina a altura para 100;
Arraste a barra central até onde desejar para o enquadramento dos 2 painéis;
Veja um exemplo do passo a passo acima:
Configurando o Painel de Tabela de informações gerais
Aqui, vamos configurar o Painel Tabela referente as informações gerais de introdução ao relatório. Então vamos aos passos:
Acesse as configurações do Painel Tabela;
Em Título, deixe em branco para retirá-lo;
Em Subtítulo, deixe em branco para retirá-lo;
Para acrescentar linhas e colunas, basta clicar o botão direito do mouse em qualquer célula para o que o menu de contexto seja apresentado;
Acrescente ou remova linhas e/ou colunas conforme desejado;
Escreva, do lado esquerdo, as opções do cabeçalho;
Selecione a primeira célula da segunda coluna (à direita das opções) e clique no botão Propriedades da célula. Será apresentada uma janela modal com todas as configuração da célula selecionada;
Na guia Propriedades, em Conteúdo da Célula, selecione a opção Sistema;
Atenção
Para maiores informações sobre a utilização de expressões e opções disponíveis, acesse Expressões Do Dado.
Continuando a configuração:
Na seção Expressão, clique no ícone para abrir o editor de expressões (no contexto de conteúdos de sistema);
No editor, selecione a informação desejada, como por exemplo, o nó user -> full_name para apresentar na célula o nome completo do usuário logado no Portal.
Já para configurar o estilo da célula, basta utilizar as configurações disponíveis na guia Estilo.
Veja um exemplo da configuração visual da tabela:
Para exemplificar a configuração acima, adicionaremos os valores das células da seguinte forma:
Nome da célula |
Conteúdo |
Formato |
Conteúdo final da expressão |
|---|---|---|---|
Período |
Sistema |
Data e hora : ‘DD/MM/YY HH/mm’ |
${data.history.start} - ${data.history.end} |
Usuário |
Sistema |
Não definido |
${data.user.full_name} |
Conector |
Dado |
Não definido |
Vazio |
Data de Geração do Relatório |
Sistema |
Data e hora : ‘DD/MM/YYYY HH/mm/ss’ |
${data.history.created} |
Veja um guia de exemplo das configurações de aplicação das células responsáveis por exibir as informações da tabela:
Para finalizar, defina nas propriedades do Painel Tabela, a Altura mínima como “auto”:
Configurando o Painel de Tabela de conteúdo do relatório
Aqui, vamos configurar o Painel Tabela referente as informações de conteúdo do relatório. Então vamos aos passos:
Clique sobre o Painel Tabela para acessar suas configurações;
Acesse as Propriedades do Painel;
Em Título, escreva o título da tabela;
Em Subtítulo, escreva o subtítulo da tabela, se não houver, deixe em branco;
Para acrescentar linhas e colunas, basta clicar o botão direito do mouse em qualquer célula para o que o menu de contexto seja apresentado;
Acrescente ou remova linhas e/ou colunas conforme desejado;
Após alterar a primeira parte visual da tabela, teremos um painel semelhante ao exemplo abaixo:
Seguindo com a configuração:
Para abrir o editor de expressões, acesse as Propriedades da célula, localizada na aba Célula e clique no ícone ;
No editor, selecione o nó history -> stats para visualizar as opções de estatísticas disponíveis para serem aplicadas nas amostradas do Dado retornadas no período selecionado;
Atenção
Para maiores informações sobre a utilização de expressões e opções de estatísticas disponíveis, acesse Expressões Do Dado.
Neste ponto basta selecionar qual estatística se deseja apresentar na célula (automaticamente o editor irá preencher com a expressão correspondente) e fechar o editor.
Já para configurar o estilo da célula, basta utilizar as configurações disponíveis na guia Estilo.
Para o nosso exemplo, na primeira coluna da tabela (referente ao primeiro dado), foram realizadas as seguintes configurações:
Nome da célula |
Conteúdo |
Histórico |
Formato |
Conteúdo final da expressão |
|---|---|---|---|---|
Nome do Dado |
Dado |
Desabilitado |
Numérico |
${data.name} |
Quantidade de Amostras |
Dado |
Habilitado |
Numérico |
${data.history.stats.count} |
Valor Inicial |
Dado |
Habilitado |
Numérico |
${data.history.stats.first} |
Valor Final |
Dado |
Habilitado |
Numérico |
${data.history.stats.last} |
Valor Mínimo |
Dado |
Habilitado |
Numérico |
${data.history.stats.minimum} |
Valor Máximo |
Dado |
Habilitado |
Numérico |
${data.history.stats.maximum} |
Valor de Amplitude |
Dado |
Habilitado |
Numérico |
${data.history.stats.amplitude} |
Valor Total (soma) |
Dado |
Habilitado |
Numérico |
${data.history.stats.sum} |
Valor Médio |
Dado |
Habilitado |
Numérico : ‘%.2f’ |
${data.history.stats.average} |
Configurando a primeira coluna com os parâmetros acima:
Para definir o formato de um valor de uma célula, acesse as Propriedades da célula e em formato, neste exemplo, defina “Customizado” e seleciona a opção “%.2f”. Desta forma, o valor exibido pela célula será apresentado com 2 casas decimais.
Esta configuração está exemplificada na imagem abaixo:
Já para a segunda coluna da tabela (referente ao segundo dado), foram realizadas as mesmas configurações, diferenciando apenas a qual dado de referência os valores seriam exibidos:
Configurando a segunda coluna com os seus respectivos itens e configurando a altura da tabela:
Para adicionar mais dados a tabela, basta criar uma nova coluna e referencia-la ao novo dado. Já para visualizar todas as opções de informações dos dados que podem ser exibidas, basta expandir as opções da aba Expressões, localizada nas propriedades da célula.
Atenção
Apesar de não ser utilizado neste exemplo, existe um recurso interessante no Painel Tabela chamado de Conjunto de Dados. Nesta configuração, é possível configurar o painel para apresentar todos os registros de amostra dos Dados configurados no conjunto para o período selecionado.
Configurando o Painel Gráfico de conteúdo do relatório
Neste ponto, iremos configurar o Painel Gráfico de conteúdo do relatório.
Para isso, siga os seguintes passos:
Clique sobre Painel Gráfico para acessar o modo de edição;
Em Série de Dados, selecione o dado que será utilizado;
Depois clique no botão Adicionar série;
Repita o processo para todos os dados que deseja inserir no gráfico;
Veja um exemplo do passo a passo acima:
Configurando o Painel de Tabela com o histórico de dados
Por fim, vamos configurar o Painel Tabela referente a apresentação dos registros do histórico para os dados utilizados no relatório.
Então vamos aos passos:
Para a personalização visual, vamos alterar as colunas, retirar o sub título e alterar o título padrão da tabela. Já nas configurações da tabela, acesse a aba Cabeçalho, e altere o Título. Neste exemplo vamos utilizar Histórico de dados;
Ainda na aba Cabeçalho, em Sub título, vamos remove-lo clicando no ícone ;
Já em relação de dados, ao expandir as configurações do painel pelo ícone , podemos observar a opção Conjunto de dados. Ao expandi-la com o ícone , devemos selecionar os dados que serão monitorados pelo conector em que os mesmos foram cadastrados. Neste exemplo, vamos ativar as opções número da linha, data e hora e selecionar a célula “A2” como célula alvo. Para maiores informações sobre Conjunto de dados, acesse Conjunto de Dados.
Aplicando as configurações do Conjunto de dados, teremos uma configuração semelhante ao exemplo abaixo:
Veja um exemplo aplicando as configurações descritas acima:
Personalizando os painéis do relatório
O relatório de estatísticas contém várias informações sobre o conector, e seus respectivos dados.
Para facilitar a visualização de todas as informações, vamos personalizar os painéis da tela.
Neste exemplo, vamos alterar principalmente as tabelas, identificando as células fixas e as diferenciando das outras células que receberão os dados.
Ao final da personalização, teremos uma tela semelhante a imagem abaixo:
(TELA PRONTA)
Configurando a visualização do Relatório em um Conector
Nesta seção, vamos verificar uma das maneiras de visualizarmos o conteúdo do nosso relatório na prática.
Nos passos seguintes, utilizaremos uma tela de sinótico com apenas um botão que abrirá nossa tela de relatório em uma janela modal.
Portando, para visualizarmos o relatório com dados reais, realize os seguintes passos:
Publicando a tela de Relatório
Clique em Publicar na parte superior da edição da tela;
Insira o nome da sua tela e uma descrição (Opcional);
Clique em Confirmar.
Veja um exemplo do passo a passo acima:
Criando uma tela de sinótico com o acesso ao Relatório
Crie uma nova tela de sinótico conforme os passos descritos em Criando Tela;
Insira o controle Button, conforme os passos descritos em Adicionando um Controle no painel sinótico;
No editor de propriedades do botão, selecione a aba e modifique o nome, fonte e tamanho do botão conforme desejado;
Agora, selecione a aba de “ Eventos”;
Em Eventos, adicione o evento Clique;
Na seção Ao Clicar, selecione a opção Tela na configuração de Grupo do evento;
Já na seleção da Ação, selecione a opção Abrir tela (guia) e confirme através do botão ;
Na configuração da ação em Ações, selecione a tela que irá ser aberta como modal;
Em parâmetros, dê um título que será apresentado na janela modal.
Veja um exemplo do botão cadastrado acima:
Publicando a tela de Sinótico
Clique em “ Publicar”;
Insira o nome da sua tela e uma descrição (Opcional);
Clique em Confirmar.
Associando a tela de sinótico a um conector
Após a publicação, clique em ;
Clique no conector que ira receber a tela;
No campo Tela, selecione a tela sinótico com apenas um botão recém criada;
Clicar em Salvar:
Visualizando o relatório no dashboard do conector
Acesse o dashboard do contrato clicando em ;
Clique na linha do conector que associamos a tela;
Clique no botão para visualizar o relatório;
Se desejar pré-visualizar o relatório para impressão, clique no botão ;
Caso deseje imprimi-lo, clique em .
Veja um exemplo do passo a passo acima:
Problemas Comuns na Geração de PDF
Durante o processo de construção da Tela de Relatório e Geração do PDF podem ocorrer conflitos entre o resultado da Tela visualizada no Portal e o PDF. Em sua maioria, esses conflitos podem ser resolvidos nas configurações dos painéis.
Abaixo estão listados os problemas mais comuns e como eles podem ser resolvidos no Portal.
Painel Gráfico encolhido
Em alguns casos, o Painel Gráfico pode aparecer comprimido em uma única linha no PDF e visualização da Tela, principalmente se houver outro painel na mesma linha que ele, como mostra a imagem:
Isso ocorre devido à altura mínima estar definida como “auto”. Para resolver, deve-se alterar a altura mínima para um valor numérico, que irá depender da altura de preferência do usuário, como mostra o exemplo:
O resultado obtido será o seguinte:
Utilizar o Painel Histórico de Dados
O Painel de Histórico de Dados NÃO é impresso ao gerar o PDF de uma Tela de Relatório, mesmo utilizando sua visualização de gráfico. Por conta disso, a presença desse painel na Tela pode afetar a organização dos outros painéis no PDF, deixando a página com espaços indesejados.
O ideal é a utilização do Painel Gráfico para a visualização gráfica dos registros de histórico, que cumpre a mesma função e é específico para criação de Relatórios.
Coluna da Tabela Fora da Célula
Em alguns casos, pode ocorrer da última coluna do Painel Tabela ser impressa fora das células da área do painel. Esse comportamento pode ocorrer por causa da quantidade de colunas configuradas no painel e da distribuição das larguras dessas colunas.
Não será possível visualizar esse comportamento na pré-visualização do relatório, somente após a impressão do PDF.
Um exemplo na pré-visualização desse comportamento seria o demonstrado na imagem abaixo:
Na pré-visualização conseguimos ver alguns títulos de colunas cortados devido à disposição das larguras das colunas. Porém, no resultado do PDF, as colunas se reajustam e a última coluna acaba ficando fora da área da tabela, como mostra a imagem abaixo:
Para resolver esse problema é necessário reajustar a largura das colunas para que a última não fique fora das células da tabela e prejudique o resultado da impressão, como demonstrado no exemplo abaixo:
Após o reajuste das larguras, a última coluna deve ser impressa dentro das células da tabela, como mostra esse resultado do PDF impresso de exemplo:
