Add Custom Styles to Reports in Bold Reports ASP.NET Core Designer

Customizing reports in the Bold Reports Web Designer allows you to modify colors, fonts, and other UI elements to create a consistent user experience. This can be achieved by defining custom styles in a JSON configuration file and applying them through the ReportingAPIController. This article demonstrates how to configure and apply custom report styles in a Bold Reports ASP.NET Core application.

Step-by-Step Instructions

Follow these steps to configure and apply custom styles in the Bold Reports Web Designer using a JSON configuration file.

Step 1: Create the Custom Style JSON File

The appearance of report elements is controlled through a JSON file.

Create a file named custom_style.json in a location accessible to your application (for example, D:\custom-styles\custom_style.json).
Define the required styles using the following structure:

{
  "tableHeader": {
    "fontFamily": "Arial, sans-serif",
    "fontSize": "13px",
    "fontWeight": "bold",
    "textAlign": "center",
    "verticalAlign": "middle",
    "color": "#ffffff",
    "backgroundColor": "#6495ED"

  },

  "header": {
    "backgroundColor": "#6495ED",
    "fontFamily": "Arial, sans-serif",
    "fontSize": "14px",
    "fontStyle": "normal",
    "fontWeight": "bold",
    "color": "#ffffff"
  }
}

Step 2: Configure the ReportingAPIController

To apply the custom styles, create a method that reads and deserializes the JSON file.

Open the ReportingAPIController.cs file.
Add a GetCustomStyles() method to read the JSON file and deserialize its content.
Specify the path where the JSON file is stored.

Code Implementation

The following code reads the JSON file and returns the custom styles as a dictionary:

using Newtonsoft.Json;
using System.Collections.Generic;
using System.IO;
using System;

// Add this method inside your ReportingAPIController class
public Dictionary<string, Dictionary<string, string>> GetCustomStyles()
{
    // Define the file path where your JSON is stored
    string filePath = @"D:\custom-styles\custom_style.json"; 
    
    // Check if the file exists before attempting to read
    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 nested dictionary
        var customStyles = JsonConvert.DeserializeObject<Dictionary<string, Dictionary<string, string>>>(jsonContent);
        
        // Return the deserialized dictionary or an empty one if null
        return customStyles ?? new Dictionary<string, Dictionary<string, string>>();
    }
    catch (Exception ex)
    {
        // Handle and log the exception
        throw new Exception("An error occurred while reading or deserializing the custom styles.", ex);
    }
}

Step 3: Apply Styles in OnInitReportOptions

To apply the styles retrieved in the previous step, call the GetCustomStyles() method within your OnInitReportOptions handler.

        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();
        }

Step 4: Verify the Implementation

Run the ASP.NET Core application and open the Report Designer. The custom styles defined in the custom_style.json file should now be applied to the report elements.

Download the sample application here.

Was this article useful?

Dislike

Comments (0)