Geração de Relatórios

Essa funcionalidade permite a geração de relatórios em PDF para exportar de forma organizada e formatada a partir de dados da plataforma.

De forma a suportar modelos de página distintos, a plataforma cria PDFs individuais e depois consolida todos em um único arquivo gerando o relatório final.

Como criar um novo relatório

Acesse a área administrativa e navegue para o grupo "Elementos Visuais" e depois selecione a opção: "Relatórios". Clique no botão de mais para criar um novo Relatório. Preencha todos os campos e clique em "salvar".

Uma vez criado o novo relatório devemos seguir com as definições e configurações, navegando para a página de detalhes do relatório.

O campo "Arquivos" é utilizado para anexar imagens e outros arquivos que estarão disponíveis para todos os Modelos de Página. Para acessar as imagens anexadas no campo de arquivos a plataforma vai disponibilizar automaticamente um objeto chamado "report" que vai conter um atributo "resources" com todas as imagens que forem anexadas.

{
	...
	"report": {
		"generatedAt": "2025-06-18T17:36:44Z",
		"language": "pt",
		"resources": {
			"report_bg": "storage-url-to-file"
		}
	},
	...
}

ATENÇÃO

Importante ressaltar que o nome do arquivo não deve conter acentuação, espaços em branco e nem nennum caracter especial para evitar o mal funcionamento da plataforma.

O campo "CSS Global" deve ser utilizado para incluir código CSS que estará disponível para todos os Modelos de Página. Essa funcionalidade faz sentido quando temos mais de um template e não é uma boa prática ficar duplicando o código em cada uma delas.

O campo "Importação Global" deve ser utilizado para incluir códigos para importar bibliotecas externas que estarão disponíveis para todos os Modelos de Página. Essa funcionalidade faz sentido quando temos mais de um template e não é uma boa prática ficar duplicando o código em cada uma delas. Um caso comum de uso desse campo é para importar as fontes que serão utilizadas no relatório.

O campo de "Usar o Mock" deve ser selecionado para poder gerar uma versão de testes do relatório utilizando os dados simulados e não os dados carregados a partir das fontes de dados.

INFO

Lembre-se que é necessário pelo menos um modelo de página para que a plataforma possa gerar o relatório.

Criando um Módelo de Página

Os modelos de página são as estruturas da plataforma que devem ser utilizadas para a definição do layout que será aplicado para geração do relatório.

Para criar um novo modelo de página clique na aba "Modelos de Página", depois clique no botão de mais, preencha todos os campos e clique em "salvar".

O campo "Tipo" define como a plataforma vai tratar a geração do PDF para esse modelo de página. Aqui temos 3 opções para serem selecionadas:

• Página Única, define um modelo que não vai gerar paginação. Todos os dados serão exibidos em uma única página. Os campos Altura e Largura são obrigatórios para esse tipo.
• Itens com tamanho Variável, nesse caso não sabemos qual será o tamanho de cada item que fará parte da página assim sendo a plataforma vai criar páginas dinamicamente para acomodar os itens de acordo com a altura de cada um deles.
• Itens com tamanho Fixo, define um modelo onde a plataforma vai gerar quantas páginas forem necessárias para acomodar os itens definidos no campo Total de Itens por Página. O campo Largura é obrigatório.

O campo "Ordem" define a ordenação dos modelos de página no relatório final que será gerado.

O campo "Ignorar Paginação" é utilizado para que não seja levada em conta as páginas desse modelo no calculo de paginação global do relatório final. Essa funcionalidade é mais utilizad em modelos que são criados para gerar uma capa para o relatório.

O campos "Largura" e "Altura" definem a largura e altura da página desse modelo em pixels.

Para seguir com a configuração do Modelo de Página você deve acessar a página de detalhes do Modelo e preencher os dados para poder gerar um página de testes e validar o resultado antes mesmo de executar o relatório.

O campo "Código do Modelo" é onde se define o código HTML para definir o layout que será aplicado. Nesse campo também é possível utilizar a tecnologia Go Templates (text/Templates), assim é possível consumir as informações das suas fontes de dados para construir o HTML que será gerado. Além disso é possível utilizar loops e funções para processar os dados.

ATENÇÃO

Mantenha as tags html e body do seu modelo sempre sem nenhum atributo, assim a plataforma consegue adicionar automaticamente códigos para melhorar a visualização do resultado do seu modelo durante a fase de desenvolvimento.

O campo "Mock" é one definimos os dados simulados para que possamos construir o nosso modelo antes mesmo de definir as fontes de dados.

{
  "project": {
    "label": "Sports program for everyone",
    "vote": {
      "avg": 4
    },
    "votes": [
      {
        "comment": "Not such a good Projetct.",
        "name": "Lee Richards",
        "value": 3
      },
      {
        "comment": "I really liked this project",
        "name": "Ruth Perez",
        "value": 4
      },
      {
        "comment": "Remarkable idea with lots of social topics",
        "name": "Mark Banta",
        "value": 5
      }
    ]
  }
}

O campo "CSS" é one definimos o código CSS que estamos utilizando em nosso modelo. Além do código definido aqui o modelo também vai ter acesso ao que foi nefinido no campo CSS Global nas definições do Relatório.

.logo {
  background-color: blue;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
ul {
  text-align: left;
}
html,
body {
  font-family: DM Sans, serif !important;
  font-size: 16px !important;
}

INFO

Para poder testar como está ficando o layout do seu modelo de página basta clicar no icone "Visualizar Resultado".

Modelo Página Única

Para criar um modelo de página do tipo: Página Única você deve definir a largura e altura da página que será gerada. Além disso deve seguir com o preenchimento dos campos que definem o layout que será aplicado.

Atributos	Descrição
__pageNumber	Número da página desse modelo baseado no relatório final
__totalPages	Valor do total de páginas baseado no relatório final

<!DOCTYPE html>
<html>
  <body>
    <div class="content">
      <div class="logo">
        <img src="https://hrz.digital/assets/logo-BWik2h09.svg" />
      </div>
      <div>
        <h2>Horizon - Serviço de Geração de Relatórios</h2>
        <h1>Single Page Template</h1>
        <h2>Projeto: {{.project.label}}</h2>
      </div>
      <div class="votes">
        <h1>Lista de Votos</h1>
        <ul>
          {{range $vote := .project.votes}}
          <li>{{$vote.name}}: {{$vote.value}}</li>
          {{end}}
        </ul>
      </div>
      <h3>
        Executado em: {{format "date" "02/01/2006" .report.generatedAt}} |
        Página: {{.__pageNumber}} / {{.__totalPages}}
      </h3>
    </div>
  </body>
</html>

Modelo Página Variável

Nesse modelo de página temos itens de tamanhos diferentes de forma que não é possível definir em qual parte do conteúdo devemos quebrar as páginas. Sendo assim a plataforma vai gerar quantas páginas forem necessárias de acordo com o HTML que for gerado. Você deve definir a largura e altura das páginas que serão geradas para acomodar todos o conteúdo que será exibido.

Para utilizar um cabeçalho e/ou um rodapé em cada uma das páginas, é obrigatória a criação de uma tag do tipo div com o atributo "id" igual a header e footer respectivamente.

Para exibir o número da página e o total de páginas, devemos colocar um elemento HTML com as classes: pageNumber e totalPages.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .header-bg {
        background-color: blue;
      }
      .footer-bg {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <div class="header-bg">
        <div class="logo">
          <img src="https://hrz.digital/assets/logo-BWik2h09.svg" />
        </div>
        <div style="font-size: 30px;">
          Lista de Votação
        </div>
        <div style="padding: 0 20px; width: 300px; text-align:right;">
          {{format "date" "02/01/2006" .report.generatedAt}}
        </div>
      </div>
    </div>
    <div class="content">
        {{range $vote := .project.votes}}
          <div>{{$vote.name}}: {{$vote.value}}</div>
        {{end}}
      </div>
    </div>
    <div id="footer">
      <div class="footer-bg">
        <div>© 2025 Horizon. All rights reserved.</div>
        <div>
          <span class="pageNumber"></span> / <span class="totalPages"></span>
        </div>
      </div>
    </div>
  </body>
</html>

ATENÇÃO

No caso do modelo de página com itens de altura variavel é importante lembrar que os estilos que vamos utilizar no cabeçalho e no rodapé devem obirgatoriamente serem definidos dentro da tag head para que a plataforma consiga aplicar corretamente em cada uma das páginas.

Modelo Página Fixo

Esse tipo de modelo de página deve ser utilizado quando temos um cenário onde precisamos exibir uma lista de itens onde o tamanho do item é fixo. Você deve definir a largura e altura das páginas que serão geradas para acomodar todos os itens.

Para que seja possível exibir corretamente o conteúdo de cada página é obrigatório que o exista uma div HTML com a classe "page" e que todo o conteúdo estaja dentro dessa div.

O campo "Itens por Página" é obrigatório e utilizado para informar à plataforma a quantidade máxima de itens que deve ser exibido por página.

O campo "Caminho para os Itens" é obrigatório e utilizado para que a plataforma saiba de onde pegar os itens que estarão disponíveis em cada página.

project.votes

Atributos	Descrição
__totalItems	Número total de itens na lista de acordo com o campo Caminho para os Itens
__totalPages	Valor do total de páginas baseado no relatório final
__pages	Lista de páginas que foram calculadas pela plataforma.

Cada página que faz parte da lista de páginas definida pelo atributo: __pages possue os seguintes valores:

• FirstItemIndex: Índice do primeiro elemento dessa página;
• LastItemIndex: Índice do último elemento dessa página;
• PageNumber: Número dessa página de acordo com o relatório final;
• Content: A lista de itens que devem ser exibidos por essa página. De acordo com os campos: "Itens por Página" e "Caminho para os Itens";

INFO

Para que seja possível utilizar os valores de qualquer atributo ou dado dentro da página deve ser criada uma variável antes da div da página para que o mecanismo de processamento do modelo possa localizar o valor corretamente.

{{$project := .project}} {{$totalPages := .__totalPages}}

<!DOCTYPE html>
<html>
  {{$report := .report}} {{$totalPages := .__totalPages}} {{$totalItems :=
  .__totalItems}}
  <body>
    {{range $page := .__pages}}
    <div class="page">
      <div class="header">
        <div class="logo">
          <img src="https://hrz.digital/assets/logo-BWik2h09.svg" />
        </div>
        <div style="font-size: 30px;">
          {{$page.FirstItemIndex}} - {{$page.LastItemIndex}} de
          {{.__totalItems}} Instâncias de Votos
        </div>
        <div style="padding: 0 20px; width: 300px; text-align:right;">
          {{format "date" "02/01/2006" .report.generatedAt}}
        </div>
      </div>
      <div class="content">
        {{range $vote := $page.Content}}
        <div class="item">
          <div>Usuário: {{$vote.name}}</div>
          <div>Voto: {{$vote.value}}</div>
          <div>Comentário: {{$vote.comment}}</div>
        </div>
        {{end}}
      </div>
      <div class="footer">
        <div>© 2023 Horizon. All rights reserved.</div>
        <div>{{$page.PageNumber}} / {{.__totalPages}}</div>
      </div>
    </div>
    {{end}}
  </body>
</html>

Funções Auxiliares

Pra facilitar a manipulação dos dados nos Modelos de Página, estão disponíveis algumas funções auxiliares.

Formatação de Data, Números e Valores Financeiros

Define como deve ser exibido os dados para os usuários. A função necessita de 3 parâmetros para ser executada:

Parâmetro	Descrição
tipo	Define qual o tipo de dados, opções disponívveis: "number", "date" e "money"
padrão	Define qual o padrão de formatação deve ser aplicado
dado	Qual o valor que será formatado

{{format "number" "%.2f" .project.vote.avg}}
{{format "date" "02/01/2006" .report.generatedAt}}
{{format "money" "%.2f" .project.custom.budget}}

Verifica se um valor existe em uma lista de itens

Retorna válido caso o valor exista na lista de itens. A função necessita de 2 parâmetros para se executada:

Parâmetro	Descrição
valor	Define qual o valor a ser pesquisado
itens	Define a lista de itens que serão utilizados para pesquisar o valor

{{if (contains "REQ001" .project.custom.requirements) }}
Código que será exibido caso a condição seja atendida
{{else}}

Definindo Parâmetros

Parâmetros são utilizados para definir as informações iniciais necessárias para a execução do relatório. Um exemplo de utilização seria em um relatório de Resumo de Projeto criar um parâmetro "Código do Projeto" para que seja possível definir qual projeto deve fornecer os dados para gerar o relatório.

Para criar um novo parâmetro deve-se navegar para a aba de Parâmetros dentdo dos detalhes do rtelatório, clique no botão de mais, preencha todos os campos e clique em "salvar".

Uma vez criados os parâmetros estarão disponíveis para serem utilizados a partir do objeto param. Assim é possível utilizar o valor em Fontes de Dados ou mesmo nos Modelos de Página.

{ "code": "${param.projeto}" }

Fontes de Dados

Fontes de Dados são utilizados para definir de onde virão os dados que vão fazer parte do relatório. Todos os dados definidos aqui estarão disponíveis para todos os Modelos de Página.

Para criar uma nova fonte de dados deve-se navegar para a aba de Fontes de Dados dentdo dos detalhes do rtelatório, clique no botão de mais, preencha todos os campos e clique em "salvar".

O campo "Ordem" define a ordenação que serão carregados os dados, lembre-se que se você for usar as informação de uma determinada fonte de dado em outra el tem que possuír um valor maior para que os dados estejam disponíveis quando forem necessários.

O campo "Tipo do Resultado" define essa fonte de dados vai exibir uma lista de itens (array) ou um único objeto.

Uma vez criadas as fontes de dados elas estarão disponíveis para serem utilizadosem outras Fontes de Dados e nos Modelos de Página. Para utilizar o resultado de uma fonte de dados em outra fonte de dados deve ser utilizado o prefixo data conforme exemplo a baixo. Já para consumir os dados em um modelo de página basta utilziar o código da fonte de dados.

{ "code": "${data.prj.clientCode}" }

INFO

Quando uma fonte de dado contem campos do tipo documento e o resultado possue o atributo documents a plataforma vai processar esses dados e gerar um novo atributo docs contendo as URLs de cada documento disponível.

{
  "product": {
    "docs": {
      "presentation": {
        "url": "STORAGE-URL/documents/DOC.0001/V1/pres.pdf"
      },
      "slides": [
        {
          "url": "STORAGE-URL/documents/DOC.0002/V1/s1.png"
        },
        {
          "url": "STORAGE-URL/documents/DOC.0003/V1/s2.png"
        }
      ]
    }
  }
}