Report Designer
The report designer allows you to fully customize the appearance and structure of your final PDF reports. There are no restrictions on design, ensuring that you can tailor reports to meet your specific needs.
Getting Started
There are two main approaches to designing a report:
-
Start from an existing design
Copy an existing report design (see Demo Reports) and modify it to fit your requirements.
-
Start from scratch
We recommend following approach:
- Before starting to design, define your report fields and finding fields
- Include base styles in CSS (
@import '/assets/global/base.css';
) - Define the basic report structure in the Layout editor
- Customize the HTML and CSS to your needs via the code editors
- Hint: Use "Preview Data" to test your design
Report Design Components
A report design consists of the following key parts:
-
Field Definitions
Field definitions determine what input fields are available in report sections and findings when writing reports (see Field Types).
- These fields appear as form inputs in the web interface for report creation.
- Field values can be used within Vue templates as variables for dynamic content rendering.
-
HTML + Vue.js Template
The report layout is defined using the VueJS template language, which is an extension of standard HTML and JavaScript.
- HTML structure defines the layout of the report.
- Vue.js enables dynamic content generation by using variables, loops, and conditions.
-
CSS Styles
CSS is used to style the report for PDF output.
Vue.js Template Basics
Here are some essential Vue.js template features for report design:
- Render variables with double curly braces
{{ var }}
:1
<h1>{{ report.title }}</h1>
- Conditional rendering with
v-if="var"
attributes:1 2
<section v-if="report.is_retest">...</section> <div v-if="finding.affected_components.length > 0">...</div>
- Interations with
v-for="var_item in var_list"
-loops:1 2 3
<section v-for="finding in findings"> <h2>Finding title: {{ finding.title }}</h2> </section>
For more details and advanced features see the VueJS documentation
Predefined Components
Predefined components are ready-to-use HTML+CSS snippets that help streamline the report design process. They provide commonly used report elements (e.g. cover page, page header/footer, table of contents, findings list, appendix, etc.) that can be easily customized to fit specific needs. They serve as a starting point when initially creating report designs.
Predefined components can be added via drag-and-drop in the desing editor's "Layout" tab. When adding, the HTML and CSS code predefined components is inserted in the design's HTML and CSS editor. This code can be customized afterwards.