Articles in this section
Category / Section

Customizing the Parameter Panel Position in Bold Reports

Published:
Updated:

Customizing the parameter panel position in Bold Reports Report Viewer allows users to tailor the user interface to their preferences. By default, the parameter panel is rendered on the right side of the report viewer, but with the ability to customize it, users can choose to dock it at the top, left, and bottom. This flexibility enhances the user experience, making it easier to input parameter values and interact with reports. Also, users can position the parameter panel in a way that suits their workflow, enhancing usability and making it more convenient to interact with reports.

Follow the steps below to achieve this requirement:

  1. Create an Angular application by following our Angular Report Viewer documentation.
  2. In your app.component.html file, register the toolbarRenderMode and parameterSettings properties for the Bold Reports V2.0 Report Viewer component. Use the following code snippet as a reference:
    image.png
<bold-reportviewer
id="reportViewer_Control"
[reportServiceUrl] = "serviceUrl"
[reportPath] = "reportPath"
[toolbarRenderMode] = "toolbarRenderMode"
[parameterSettings] = "parameterSettings"
style="width: 100%;height: 950px"
processingMode = "Remote"
></bold-reportviewer>
  1. Add the following code in your app.component.ts file to set the ToolbarRenderMode as Classic and set the parameterSettings position to Top.
    image.png
`/// <reference types="reports.all" />`
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Report Viewer';
  public serviceUrl: string;
  public reportPath: string;
  public toolbarRenderMode: any;
  public parameterSettings: any;
 
  constructor() {
    this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
    this.reportPath = '~/Resources/demos/Report/product-line-sales.rdl';
    this.toolbarRenderMode = ej.ReportViewer.ToolbarRenderMode.Classic;
    this.parameterSettings = {
      position: ej.ReportViewer.Position.Top
    };
  }
}
  1. After configuring the properties in your Angular application, save the changes and run the application. The parameter panel will now be docked at the top of the report viewer, providing a customized user experience.

Default Preview Snapshot:

image.png

Customized Preview Snapshot:
image.png

Users can also dock the parameter panel to the Left or Bottom if needed by changing the position of the parameterSettings property.

  constructor() {
    ...
    ...
    this.toolbarRenderMode = ej.ReportViewer.ToolbarRenderMode.Classic;
    this.parameterSettings = {
      position: ej.ReportViewer.Position.Left
    };
  }
}

image.png

This feature is available only in our Bold Reports V2.0 Report Viewer. Please refer this documentation to migrate Bold Reports V2.0 Report Viewer.

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied