How to Customize the Report Viewer Background in Angular Reporting

Customizing the appearance of the Bold Report Viewer enables seamless integration with your application’s theme, enhancing the overall user experience. This article provides a step-by-step guide to modifying the background of the Report Viewer in an Angular application.

By applying custom CSS, you can change the background color, add an image, or apply a gradient to match your application’s branding and design requirements—resulting in a cohesive and visually appealing report viewer.

Steps to Change the Background Color

1. Apply Custom CSS to Target Containers.
   To modify the background color of the Bold Report Viewer, use CSS to target the pageviewOuterContainer and viewerContainer elements elements. The element IDs follow a specific format: <<applicationId>>_Control_pageviewOuterContainer and <<applicationId>>_Control_viewerContainer, where <<applicationId>> is the ID of the <bold-reportviewer> tag defined in your HTML file (e.g., src/app/app.html). Replace <<applicationId>> with the actual ID used in your application.

Sample CSS Code:
Add the following CSS snippet to your application’s stylesheet:

#reportViewer_Control_pageviewOuterContainer {
    background-color: aquamarine;
}
 
#reportViewer_Control_viewerContainer {
    background-color: bisque;
} 

2. Save and preview the Changes.
   • Before: The default background color is grey.
     
     
   • After: Your customized background will reflect the styles defined in your CSS.
     
     

Customizing the background color of the Bold Reports Report Viewer is a simple yet effective way to enhance its visual integration with your application. By applying the provided CSS snippet and ensuring the correct element ID is used, you can achieve a personalized look that improves the overall user experience.

For best results, always validate your changes across different browsers and environments to maintain a consistent and professional appearance.