Editing Report Styles

3 minute read time.

In this article I want to consider how report styles can be edited.

Consider this report which lays its list out with grid lines.

And this report which lays its list out without grid lines.

The choice of whether the report should be displayed with grids or not is controlled within the setup of the report as you can see in the image below.

These are the reports styles.

The styles that control the output when reports are run are controlled through the use of XSL files and CSS files. They also have an interaction with the Sage CRM Themes.

XSL stands for Extensible Stylesheet Language. There are a few different types of XSL but in Sage CRM report the files that control the output of the reports are written in XSL Transformation (XSLT). This is an XML language for transforming XML into the HTML and code that will output from Sage CRM.

If you remember from when a report is run there are different output options available.

XSL is used to transform the original XML that is generated by the system into the output that we request. The XML is output as HTML to the desktop device, PDF or to CSV or Excel spreadsheet format. And if the report it output to HTML then the format will be different whether the device is a large screen desktop PC or a mobile phone as the user can request the report through the mobile optimised screens.

And of course the report can be either landscape or portrait and that need the XSL to control how the page structure is generated.

In addition to XSL files being used to define how reports generated as HTML their look and feel is further controlled through the use of CSS files. Cascading Style Sheets (CSS) define how to display HTML elements.

Sage CRM makes use of 'Themes' or sets of CSS and image files to control how it looks.

The XSL and CSS files that control the reports are found under the Theme folders e.g.

  • C:\Program Files\Sage\CRM\CRM\WWWRoot\Themes\Reports\ergonomic

The image above shows that the XSL and CSS exist in trios.

There is the CSS file and then there are two versions of the XSL file; one for the mobile device and the other for the desktop PC.

Standard with Grids
StdGridsPC.xsl
StdGridsCE.xsl
StdGrids.css

Standard without Grids
StdPlainPC.xsl
StdPlainCE.xsl
StdPlain.css

To go any further with customizing the styles you would need to know both CSS and XSL very well.

The point that I wish to make is that it is possible to change the existing report styles and importantly you can add your own.

The easiest way of creating your own new report styles is to copying an existing trio of files and then alter them. (You will have to do this for each of the Themes that are implemented in your system.)

E.g. Copy

  • StdGridsPC.xsl
  • StdGridsCE.xsl
  • StdGrids.css

and rename them to

  • CustomGridsPC.xsl
  • CustomGridsCE.xsl
  • CustomGrids.css

Note: Any of the new XSL files must have the correct LINK to the new css file.

To allow the user to be able to select the new Style from within the reports definition screen you will need to add translations that add the caption to the selection list.

Add the Translations

  • CaptionCode: CustomGrid
  • Caption Family: ReportStyles

Note: There is No PC or CE at the end of the Code as this will be added automatically when the report is run.

The new Report Style will then be available in in the report definition screen.