Styling Reports

Styled reports organize details, order fields, and generally control how information is presented.

Selecting Modes

The right-side panel of a newly opened template begins in block mode, but Report Builder has two primary modes:

1. Block mode: Where elements or data from collections are placed into a report as "blocks" that form a complete report.
2. Style mode: Where specific element styles can be adjusted.

Workflow typically involves switching between block mode for arranging what data is displayed and where, and style mode to control how that data looks on a finished report.

Block Mode

Block mode enables building a report with blocks that display specific data from a collection, custom text (such as a title or headline), or n/a if no data is available for the field referenced by the block.

To add blocks to reports:

1. From the right side navigation panel, locate Design Elements you wish to place.
2. Left click a design element and drag it into the report. A green line across the report denotes where the block will be placed.
3. Release left click to place the block.

Tip

Use the "Headline" or "Text" block to name each collection’s data block, as field names are not included when a collection data block is dragged onto the template.

Beneath Design Elements, Collection Data blocks populate a field with data from the collection used to build the report. The preceding workflow can be used to drag collection data into any open fields in a report.

For more information regarding each block, see Collection Data and Style Blocks.

Adjusting Blocks

Blocks can be moved, duplicated, or deleted as needed.

To manage blocks:

1. From an open report, hover over a block and click it. Icons appear on the right side of the block.
2. Select the icon that represents the action to be performed:
   1. Click the UP arrow icon to select any child elements within a parent element (for example, all text elements within a section or an absolute block).
   2. Click and drag the move icon to move a block, using the green line to denote block placement.
   3. Duplicate a block to place a copy of the block beneath the selected block.
   4. Click the trash can icon to delete the block.

Tip

Add a new "Page" block to the template to allow more space to drop blocks on the template. Each new "Page" block renders as a new page on the PDF output, allowing users control to define page breaks.

Style Mode

Styling is generally separated into five panels:

1. General controls the positioning and display of the block. Users with advanced CSS knowledge can also utilize floats and flex boxes.
2. Dimension controls the sizing and spacing of a block (width, height, margin, and padding).
3. Typography controls the font family, size, weight, spacing, line height, color, alignment, and shadow.
4. Decorations applies a border, radius, background color, or shadow to an element.
5. Extra transformations include perspective, rotation, and scale.

To adjust the style of blocks:

1. From the right-side navigation, click the Styles paintbrush icon to switch to Style Mode.
2. From an open report containing at least one field, hover over a block and click it. On the right side navigation, the panel changes to reveal all possible classes to be adjusted.
   1. To select multiple styles, press and hold the SHIFT key and click each block.
   2. Each change made is reflected across all blocks.
3. When working with a single block, changes to any style affect only that block.