How to configure custom styles into report items

On an on-premise server, you can configure external custom styles. Follow these steps to add and use them in the report designer.

Steps to Configure Custom Styles in report designer

You can configure custom styles for report items in the Report Designer using either of these two methods:

• Custom Location.
• Preconfigured Location.

Using a Custom Location

1. Create a JSON file with a user-defined name, represented as {name of file}.json, to define the required CSS styles for the report. The file should follow the specified format:

   "header": {
       "background-color": "#6495ED",
       "font-family": "arial",
       "font-size": "0.16666979166666665in",
       "font-style": "normal",
       "font-weight": "bold",
       "color": "white"
   }

2. Add the custom_style JSON file reference path in the configuration settings using the following format:

   <CustomStyleSheet>
   <FilePath>{path-to-your-custom-style-JSON-file} </FilePath>
   </CustomStyleSheet>

Note: Replace {path-to-your-custom-style-JSON-file} with the path where your custom-style JSON file is located.

Using the preconfigured location

1. Create a folder named custom-styles in the preconfigured location: {Installed location}\BoldServices\app_data\reporting\configuration.

2. Add a JSON file named custom_style.json in the folder and include your styles in the format shown in the example below:

   "header": {
       "background-color": "#6495ED",
       "font-family": "arial",
       "font-size": "0.16666979166666665in",
       "font-style": "normal",
       "font-weight": "bold",
       "color": "white"
   }

Note: The folder must be named custom-styles and the JSON file must be named custom_style.json.

Restart the on-premise server to load the custom styles, then select your style key from the Custom Style dropdown in the Miscellaneous section of the Properties panel in the Report Designer.

For detailed instructions and examples, refer to the blog: Enhance Reporting with CSS

This blog explains the configuration process step-by-step, ensuring seamless integration of custom styles into your reports.