How to Show or Hide the Configuration Pane in the Bold Reports Designer

The Bold Reports Designer includes a Configuration Pane that provides access to key design options such as Properties, Data, Parameters, and the Image Manager. While this pane is essential during report creation, some applications require a cleaner interface, restricted editing, or a customized user experience.
Bold Reports allows developers to programmatically show or hide the Configuration Pane using the showPane property within configurePaneSettings option when initializing the Report Designer to customize the workspace or restrict report editing.

This article explains how to control the visibility of the Configuration Pane using JavaScript.

Step-by-Step Instructions

Step 1: Add Configuration Settings

Locate the JavaScript file or script block where the Bold Reports Designer control is initialized. Within the designer initialization options, add the configurePaneSettings object.

Step 2: Set Visibility

Define the showPane property.

Set it to true to display the configuration pane
Set it to false to hide the configuration pane

Save the project and run the application to verify that the configuration pane visibility reflects your settings.

Example

The following example demonstrates how to configure this property within a standard Bold Reports Designer initialization block:

$(function () {
    $("#designer").boldReportDesigner({
        serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI",
        // Hides the configuration pane (Properties, Data, Parameters, and Image Manager)
        configurePaneSettings: { 
            showPane: false 
        }
    });
});

Property Definitions

Property	Type	Description
`configurePaneSettings`	Object	Defines settings for the designer configuration pane (Properties, Data, Parameters, and Image Manager)
`showPane`	Boolean	Controls the visibility of the configuration pane. Set to `false` to hide the pane or `true` to display it

Preview

Configuration Pane Visible

When showPane is set to true, users can access the Properties, Data, and Parameters tabs on the right side of the designer.

Configuration Pane Hidden

When showPane is set to false, the right-hand pane is removed, providing more horizontal space for the design canvas.

You can download a sample application demonstrating this configuration here