Customize the Parameter Panel Position in the Bold Reports Blazor Viewer

In Bold Reports, the parameter panel in the Report Viewer is docked to the right side by default in newer versions. This guide provides clear, step-by-step instructions to reposition the parameter panel to the top in a Blazor Viewer application, enhancing usability and aligning the interface with user preferences.

Repositioning the parameter panel improves the user experience by placing controls in a more accessible location—especially for reports with frequent parameter interactions. You can also adapt these steps to dock the panel to other positions, such as left or bottom, depending on your layout needs.

Steps to Reposition the Parameter Panel

1. Locate the JavaScript Interop File

1. Navigate to the wwwroot/scripts directory in your Blazor Viewer project.
2. Open the boldreports-interop.js file, which handles the JavaScript interop for the Bold Reports Viewer.

2. Update the JavaScript Code

1. Modify the boldreports-interop.js file to configure the Report Viewer with the parameter panel positioned at the top.
2. Add or update the RenderViewer function as shown below:

window.BoldReports = {
    RenderViewer: function (elementID, reportViewerOptions) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportPath,
            reportServiceUrl: reportViewerOptions.serviceURL,
            locale: "en-GB",
            toolbarRenderMode: ej.ReportViewer.ToolbarRenderMode.Classic,
            parameterSettings: {
                position: ej.ReportViewer.Position.Top
            }
        });
    }
}

Code Breakdown

Note: Ensure the reportPath and reportServiceUrl are set to your Bold Reports server’s configuration.

3. Alternative Positioning (Optional)

To dock the parameter panel to the left or bottom instead, update the position property in the parameterSettings object. For example, to position it on the left:

window.BoldReports = {
    RenderViewer: function (elementID, reportViewerOptions) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportPath,
            reportServiceUrl: reportViewerOptions.serviceURL,
            locale: "en-GB",
            toolbarRenderMode: ej.ReportViewer.ToolbarRenderMode.Classic,
            parameterSettings: {
                position: ej.ReportViewer.Position.Left
            }
        });
    }
}

4. Preview the Changes

1. Save the boldreports-interop.js file and run your Blazor application.

2. Before Customization: The parameter panel appears on the right side of the Report Viewer.

   

3. After Customization: Verify that the parameter panel is now docked at the top.

   

Conclusion

Customizing the parameter panel position in Bold Reports Blazor Viewer allows you to tailor the report interface to your users’ needs. Whether you prefer the panel at the top, left, bottom, or right, this flexibility ensures a more intuitive and user-friendly reporting experience.