How to Customize Parameter Panel Font Properties in Bold Reports

In Bold Reports Angular Viewer, you can customize the default design of the parameter panel to align with your application’s theme or branding guidelines. This includes modifying font styles, sizes, colors, and the borders of input elements within the parameter section.

This article explains how to customize the parameter panel styles using CSS in an Angular application.

Steps to Customize the Parameter Panel

1. Open the Component’s Stylesheet:
   Navigate to the src/app/. folder and open the app.component.css file.
2. Add the CSS Code
   Add the following CSS code into the app.component.css file to modify the design properties of the parameter panel:

/* Parameter LABEL Size, Color, Font Family */
#reportViewer_Control_param_block_table span[id^="reportViewer_Control_Param_"] {
   font-size: 18px;
   font-family: 'Times New Roman', serif;
   color: rgb(255, 0, 0);
}

/* Parameter VALUE Size, Color, Font Family */
#reportViewer_Control_param_block_table input.e-input,
#reportViewer_Control_param_block_table textarea.e-input,
#reportViewer_Control_param_block_table .e-input-group,
#reportViewer_Control_param_block_table .e-input-group.e-control-wrapper,
#reportViewer_Control_param_block_table .e-input-group.e-disabled,
#reportViewer_Control_param_block_table .e-input-group.e-control-wrapper.e-disabled {
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 15px;
   font-weight: normal;
   color: rgb(255, 0, 0);
}

/* Parameter Dropdown border */
#reportViewer_Control_param_block_table .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
#reportViewer_Control_param_block_table .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
   border-color: #1a9540;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
} 

• #reportViewer_Control_param_block_table - This ID selector targets the main container (likely a ) that holds all parameter labels and input elements in the Bold Reports Viewer. All style rules are applied within this container.
• input.e-input - This selector targets <input> elements that contain the class e-input, which represent parameter input fields in the parameter panel.
3. Encapsulation Consideration:
   By default, Angular components use ViewEncapsulation.Emulated, which scopes styles to the component’s template only. To apply the custom styles globally, disable view encapsulation by setting it to ViewEncapsulation.None in the component decorator.

`/// <reference types="reports.all" />`
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 encapsulation: ViewEncapsulation.None
}) 

4. Verify the Output
   Run the Angular application and check the parameter panel in the Report Viewer to confirm that the customized styles have been applied.
   Before
   
   
   
   After
   
   

Download Sample

You can download the sample application from the following link:

reportviewerapp.zip

Conclusion

By following these steps, you can customize the font properties and overall appearance of the parameter panel in the Bold Reports Angular Viewer to match your application’s design requirements.

See Also

• How to customize the parameter block items
• Customizing the Parameter Panel Position in Bold Reports