Página Customizada

O recurso de Página Customizada permite transformar uma tela em um modelo personalizado para a criação de relatórios que apresenta um plano de fundo ao abrir a tela com o evento de abertura de página customizada. O plano de fundo pode ser desenvolvido em um editor de imagens (como Paint ou Canvas) ou por meio de HTML e CSS, garantindo maior flexibilidade na personalização.

Esse plano de fundo ficará oculto em um iFrame, que permitirá que a Tela do Relatório seja aberta dentro da imagem contida no iFrame através de um Botão de Ação. Por estar oculto, o plano de fundo irá aparecer após o clique no botão.

Criar Página Customizada

Para criar uma Página Customizada em uma Tela, siga os passos abaixo:

  • Acesse o editor de Telas;

  • Clique no menu do cabeçalho “Tela” ou “Layout”;

  • Selecione a aba Layout;

  • Expanda a seção Página Customizada;

  • Selecione um HTML Modelo (Branco ou A4):

../../../_images/page_custom_access.png

Criar Página em Branco

Esta opção gera um iFrame da tela atual com fundo transparente, permitindo personalização por meio de HTML, CSS e JavaScript.

Atenção

Recurso destinado a usuários com domínio de HTML, CSS e JavaScript. Seu uso exige conhecimento técnico em Desenvolvimento Front-End.

Criar Página Simples A4

Esta opção gera um iFrame da tela atual, incorporando um plano de fundo ilustrativo para relatórios na hora da impressão. O modelo no formato A4 apresenta bordas de página, logotipo, cabeçalho e rodapé, todos integrados em uma imagem demonstrativa.

Atenção

Limitação: O relatório deve ser projetado para caber em uma única página, pois o sistema não suporta quebra automática de página.

Opções Disponíveis

Após a criação de uma Página Customizada, as seguintes opções estarão disponíveis nessa seção:

  • Deletar: Remove a página customizada criada;

  • Editar: Permite modificar a estrutura e o conteúdo da página.

Personalização do Plano de Fundo no Modelo A4

O modelo A4 utiliza uma folha de estilo na aba (style) que usa o CSS para adicionar um plano de fundo de exemplo ao relatório em:

  • Seletor: .paper;

  • Propriedade: background-image:

../../../_images/page_custom_style_example.png

Para baixar a imagem de exemplo acesse o link aqui:

../../../_images/page_custom_bg_frame_example.jpg

Com base nesse modelo, é possível personalizar um plano de fundo (823 x 1163) específico em um editor de imagem para atender às necessidades da empresa:

../../../_images/page_custom_bg_frame_example_custom.jpg

Após, a imagem pode ser enviada para a Biblioteca de Imagens, permitindo a cópia do link correspondente nas propriedades específicas do Controle no Sinótico:

../../../_images/page_custom_bg_frame_example_custom_link.png

Para substituir o link da imagem no editor de página customizada:

../../../_images/page_custom_style_example_img.png

Criação do Relatório para o Modelo A4

Na tela configurada como Página Customizada, configure os painéis para montar o Relatório:

Atenção

Lembre-se que o Relatório não deve ultrapassar o tamanho de uma página.

../../../_images/page_custom_report_screen.png

Para aplicar o plano de fundo no Relatório é necessário adicionar um botão com uma ação de “Abrir tela em página customizada” para abrir o Relatório com a imagem de fundo.

Após Criar Página Customizada Única A4, siga os passos para configurar um botão de ação:

  • Acesse as configurações do Painel no ícone ;

  • Acesse aba Ações;

  • Clique em Novo Botão;

  • Selecione o tipo de botão como Ambos (ícone e título);

  • Adicone um título para o botão de ação;

  • Escolha um ícone;

  • Clique no botão Adicionar Ação;

  • Utilize o grupo Tela;

  • Selecione a ação Abrir tela em página customizada;

  • Clique no ícone para adicionar ação;

  • Escolha a Tela com a página customizada criada (tela atual).

../../../_images/page_custom_button_action.png

Análise do Resultado

Após publicar a tela, defini-la como Dashboard de um Conector e clicar no botão de ação, selecione períodos válidos para a consulta. Com isso, será possível visualizar e analisar os resultados na página customizada:

../../../_images/page_custom_dashboard.gif

Para imprimir a página customizada corretamente, siga estas configurações no Google Chrome ou em navegadores similares:

  • Pressione Ctrl + P para abrir as opções de impressão;

  • Defina o layout como Retrato;

  • Configure as margens como Mínima;

  • Ajuste a escala personalizada para 95%;

  • Ative o cabeçalho e rodapé;

  • Ative a opção Imprimir gráficos de segundo plano.

Essas configurações garantem um melhor posicionamento do conteúdo na folha:

../../../_images/page_custom_print.png