Styling Reports in ConnectWise Report Writer

The Style tab controls the visual appearance of a report: colors, pagination, print settings, custom CSS, and how grouped data is displayed.

Style Properties

Six color pickers let you adjust the palette of the report grid. A sample grid below the pickers previews your changes in real time.

Setting	What it controls
Border Color	Color of the borders surrounding grid cells
Header Color	Background color of column headers (and visual group headers)
Header Foreground Color	Text color of all column headers
Item Color	Background color of odd-numbered rows
Item Foreground Color	Text color of all rows
Alternating Item Color	Background color of even-numbered rows
Restore Default	Resets all six color settings to their defaults

CSS and Printing Controls

These settings give you fine-grained control over print output and export behavior.

Setting	What it does
CSS	Custom CSS applied only to this report. Overrides the default report stylesheets.
Landscape printing	Prints the report in landscape orientation. Default is portrait.
Show page number	Adds page numbers to printed and XLS exports. Does not apply to the report viewer, XML, or CSV exports.
Show date and time	Adds a timestamp to printed and XLS exports. Does not apply to the report viewer, XML, or CSV exports.
Use pagination	Controls whether the report viewer paginates results.
Add bookmark for each visual group	Adds PDF bookmarks per visual group. PDF export only.
Page Break After Visual Groups (PDF)	Places each visual group on its own page in PDF exports. Does not apply to XML, XLS, or CSV.
Minimize Grid Width	Shrinks the grid to fit the data width. Columns may not be uniform size.
All field headers bold	Makes all column headers bold.
All field headers italic	Makes all column headers italic.
Remove Headers for CSV Export	Strips column headers from CSV exports.
Enable Responsive Grid	Resizes and reflows report columns based on browser window width. Fields that overflow move into an expandable + section. Charts also reflow.
Columns Width	Sets a uniform width for all columns.
Pivot Columns per exported page	When a pivot is used, sets how many columns appear per exported page.
Split all columns	Puts each pivot column on its own page when exporting a pivoted report.

Writing custom CSS

Use the CSS field to override the default report styles for a specific report. This requires some familiarity with browser developer tools.

1. Open ConnectWise in a browser (Chrome or Firefox), then open the report in Report Designer.

2. In Report Designer, go to the Preview tab.

3. Right-select the element you want to style, then select Inspect Element (or open your browser’s developer tools manually and locate the element in the HTML).

4. Note the CSS class name controlling that element. For example, the report title element uses the class ReportTitle.

5. Go back to the Style tab. In the CSS field, write your override:

   .ReportTitle {
     color: red;
   }

6. Go to the Preview tab to verify the change.

7. Add any additional rules, then save the report.

Note: Some report styles are hard-coded and cannot be overridden with custom CSS. Some elements use nested tags, so identifying the correct class may require trial and error.

Report Viewer Styling

These settings control the visual layout of the report as it appears in the report viewer.

Setting	What it does
Minimize Grid Width	Adjusts grid margins to match data width. Columns may be non-uniform.
Visual Group Style	Sets how visual groupings are displayed (see below).
Items Per Page	Number of rows shown per page in the report viewer.
Report Order	Sets the display order of report sections: Summary, Chart, Gauge, Map, Detail.
Field|Value Column Pairs	Sets how many field-value pairs display on a single row.
Show Main Report in Field | Value Style	Applies the field-value style to the main detail grid.
Show Summary Report in Field | Value Style	Applies the field-value style to the summary grid.

Visual Group Styles

Visual group styles control how grouped data is presented. Most styles place the grouped field values at the top and display ungrouped fields in a normal grid beneath them.

Comma Delimited and Line Delimited styles are straightforward — grouped values appear inline or one per line above the data rows. Comma Delimited with Labels adds field name labels to the grouped values.

Two styles work differently and are worth knowing:

Analysis Grid

Starts with every grouped row collapsed. Select the (+) next to a value to expand that section. Numeric fields in non-grouped columns are automatically totaled. Supports multiple nesting levels.

VG Hierarchy

Displays grouped data as a flat hierarchy, with each level shown to the right of its parent rather than below it. All levels start expanded. You can expand and collapse containers individually.

Note: In VG Hierarchy, expanding a child level without first expanding its parent has no visible effect. Expand the parent first — child levels then retain their expanded/collapsed state when you re-collapse and re-expand the parent.