Report Designer Tutorial
The Report Designer is the WYSIWYG editor at the heart of QuickInspect and YachtInspect. It lets you build inspection reports by dragging elements onto a canvas, configuring their properties, and previewing the result in real time. Both apps share the same editor, so this tutorial applies to either.
Opening the Report Designer
- Navigate to the Reports tab (the third tab in the bottom navigation bar).
- Open an existing report or create a new one.
- The Report Designer loads with the editor canvas in the center.
On the left side you will find the Element Palette, and on the right a Properties Panel for configuring the selected element. Above the canvas are undo/redo controls (up to 50 states of history).
The Element Palette
The palette contains 13 element types divided into two categories: adjustable elements that you configure freely, and predefined elements that pull data automatically.
Adjustable Elements
| Element | Description |
|---|---|
| Text | Rich text block with bold, italic, underline, and color formatting |
| Heading | Section heading that is automatically included in the Table of Contents |
| Image | Single image placement |
| HTML Template | Reusable HTML block from your company's HTML Template library |
| Divider | Horizontal line separator |
| Table | Data table with configurable rows, columns, header rows, calculations, currency formatting, totals, and border styles (bordered, striped, minimal, or none) |
| Table of Contents | Auto-generated ToC from headings, with numbered, bulleted, or plain style options |
Predefined Elements
| Element | Description |
|---|---|
| Cover Page | Displays product info, company logo, date, and report number |
| Findings Table | Configurable columns: ID, title, status, priority, system, location, description, date, comments, cost, and images. Supports filtering and sorting. |
| Executive Summary | Charts for status, priority, and system distribution, plus metrics and custom text |
| Signature Block | Captures a signature image with name, date, and title fields |
| Image Table | Photo grid with 1 to 4 columns, optional numbering, and descriptions |
| Product Info Table | Selectable product fields with an optional image |
Adding Elements to the Canvas
- Open the Element Palette if it is not already visible.
- Tap or drag an element from the palette onto the canvas.
- The element appears on the canvas at the drop position.
- Select the element to open its properties in the Properties Panel.
Tip
Use drag-and-drop to reorder elements on the canvas. Grab the drag handle on any element and move it to a new position.
Configuring Element Properties
Select any element on the canvas to open the Properties Panel on the right side. The available settings depend on the element type:
- Text: font size, bold/italic/underline toggles, text color, background color
- Heading: heading level, text content
- Table: number of rows and columns, header row count, border style (bordered/striped/minimal/none), currency formatting, calculation formulas, totals row
- Findings Table: select which columns to display, set filters (by status, priority, system, etc.), choose sort order
- Image Table: number of columns (1--4), toggle image numbering, toggle descriptions
- Table of Contents: style (numbered, bulleted, or plain)
Page Layout Settings
Access layout settings from the designer toolbar:
- Page size: A4, Letter, or A3
- Orientation: Portrait or Landscape
- Margins: Custom margin values for all four sides
- Headers and footers: Custom text, company logo, page numbers
- Page number position: Bottom-left, bottom-center, or bottom-right
Styling Options
The Report Designer supports global styling that applies across the entire report:
- Colors: primary, secondary, accent, header background, table header
- Fonts: separate heading font and body font
- Font sizes: configurable for headings and body text
- Company logo: displayed on cover pages, headers, or both
- Custom header/footer text: appears on every page
Real-Time Preview
Tap the Preview button in the toolbar to generate a live PDF preview of your report. The preview reflects all elements, styling, and layout settings exactly as they will appear in the exported PDF.
Note
The preview uses the same rendering engine as the final export, so what you see is what you get.
Undo and Redo
The editor maintains up to 50 undo/redo states. Use the undo and redo buttons in the toolbar to step backward or forward through your editing history. This covers element additions, deletions, moves, and property changes.
Saving Your Report
Reports are saved automatically as you work. You can also manually trigger a save from the toolbar. The saved state includes all elements, their positions, properties, and the layout/styling configuration.
Next Steps
- Learn how AI can help build your reports in the AI Tools Tutorial
- See how to export finished reports in the PDF Generation Tutorial
- Master photo workflows in the Photo Documentation Tutorial