Customizing the Parameter Panel Position in Bold Reports

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:
   
   

<bold-reportviewer
id="reportViewer_Control"
[reportServiceUrl] = "serviceUrl"
[reportPath] = "reportPath"
[toolbarRenderMode] = "toolbarRenderMode"
[parameterSettings] = "parameterSettings"
style="width: 100%;height: 950px"
processingMode = "Remote"
></bold-reportviewer>

3. Add the following code in your app.component.ts file to set the ToolbarRenderMode as Classic and set the parameterSettings position to Top.
   
   

`/// <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
    };
  }
}

4. 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:

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