How to configure custom styles

To configure custom styles in a Bold Reports^® embedding application, create a JSON style file, load it in the ReportingAPIController class, and select a style key in the Report Designer. These steps apply to all embedding platforms except WPF and UWP.

How do I create a custom style JSON file?

To create a custom style file for Bold Reports^®, define the CSS styles for the report in a JSON file that follows the format in the following example:

• 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:

  "table header": {
      "font-family": "arial",
      "font-size": "13.333333333333334px",
      "font-weight": "bold",
      "background-color": "#6495ED",
      "border-bottom-color": "navy",
      "border-right-color": "gray",
      "border-left-color": "gray",
      "border-right-width": "1.333px",
      "border-left-width": "1.333px",
      "border-top-width": "2px",
      "border-bottom-width": "2px",
      "border-bottom-style": "double",
      "border-top-color": "navy"
  },
  "header": {
      "background-color": "#6495ED",
      "font-family": "arial",
      "font-size": "0.16666979166666665in",
      "font-style": "normal",
      "font-weight": "bold",
      "color": "white"
  }

How do I initialize custom styles in the controller?

To initialize custom styles, add the IDesignerSettings interface to the ReportingAPIController class and assign the styles from the JSON file to the Bold Reports^® Report Designer and Report Viewer.

• Add the IDesignerSettings interface to the ReportingAPIController class as follows:

  public class ReportingAPIController : Controller, IReportDesignerController, IDesignerSettings
  

• To initialize the custom styles in the Bold Reports^® Embedding application, add the following methods to the ReportingAPIController.cs file:

  // To initialize the custom styles in the designer
  [NonAction]
  public void InitializeDesignerSettings(DesignerSettings designerSettings)
  {
      designerSettings.CustomStyleSheets = GetCustomStyles();
  }
  
  // To initialize the custom styles in the viewer
  [NonAction]
  public void OnInitReportOptions(ReportViewerOptions reportOption)
  {
      reportOption.ReportModel.CustomStyleSheets = GetCustomStyles();
  }
  
  [NonAction]
  public Dictionary<string, Dictionary<string, string>> GetCustomStyles()
  {
      // Define the file path
      string filePath = @"D:\Custom\custom_style.json"; // Specify the custom_style.json path
      // Check if the file exists
      if (!System.IO.File.Exists(filePath))
      {
          throw new FileNotFoundException($"The file '{filePath}' does not exist.");
      }
      try
      {
          // Read the file content
          string jsonContent = System.IO.File.ReadAllText(filePath);
          // Deserialize the JSON content into a dictionary
          var customStyles = JsonConvert.DeserializeObject<Dictionary<string, Dictionary<string, string>>>(jsonContent);
          // Return the deserialized dictionary
          return customStyles ?? new Dictionary<string, Dictionary<string, string>>();
      }
      catch (Exception ex)
      {
          // Handle and log the exception (if needed)
          throw new Exception("An error occurred while reading or deserializing the custom styles.", ex);
      }
  }

How do I choose a custom style in the Report Designer?

To choose a custom style in the Bold Reports^® Report Designer, select a style key in the Custom Style dropdown under Miscellaneous in the Properties panel.

• The Report Designer renders as in the following image:

• Navigate to the Properties panel. In the Report Properties section under Miscellaneous, the Custom Style dropdown displays the style keys from the uploaded file. Select the appropriate style key.

• In the previous step, the custom style was applied at the report level. You can also apply custom styles to specific report sections (header, body, report items and footer) as needed.

How do I view the custom style in preview?

When you preview the report, the styles defined in the selected Style Key from the previous step apply to all parts of the Bold Reports^® report. The report keeps consistent custom styling in both the preview and the exported outputs.