How to Hide the Add Parameter Button in Bold Reports Designer

By default, the Add Parameter button appears in the Parameters pane of Bold Reports Designer, allowing users to create new report parameters. In scenarios such as restricted workflows, simplified UIs for end-users, or enhanced security in embedded applications, you may want to hide this button.

This can be achieved by overriding the renderParameterList method in the Designer’s JavaScript utility. This customization removes the button from the UI while preserving all other parameter functionality.

Steps to Hide the Add Parameter Button

Locate the layout.cshtml file
Add the Custom Script for Hiding the Add Parameter button
- Insert the following script at the end of the tag or within a dedicated <script> section within layout.cshtml. This script overrides the ej.ReportDesignerUtility.Parameter.prototype.renderParameterList function to render the Parameters pane without the Add Parameter button.

<script type="text/javascript">
           ej.ReportDesignerUtility.Parameter.prototype.renderParameterList = function (parameterList) {
               var headerTag = ej.buildTag('div.e-rptdesigner-param-headerDiv e-rptdesigner-tab-focus', '', {
                   'height': '35px',
                   'display': 'block'
               }, { 'id': this.id + '_param_Hdr_Container', 'tabindex': '0', 'aria-label': this.getLocale('headerText') });
               var bodyTag = this.bodyContainer = ej.buildTag('div.e-lv e-js e-parentlv e-designer-hint-newparameter e-reportdesigner-scroller e-rptdesigner-param-bodyDiv', '', {
                   'display': 'block', 'height': '100%', 'overflow-y': 'scroll',
                   'box-sizing': 'border-box'
               }, { 'id': this.id + '_paramBdy_Container' });
               var editLayoutContainer = this.editLayout = ej.buildTag('div.e-designer-editlayout-label e-designer-fontfamily e-rptdesigner-headericon e-rptdesigner-box-sizing', '', {
                   'width': '100%', 'height': '20px', 'display': 'none', 'align-items': 'center', 'gap': '5px'
               }, { 'id': this.id + '_edit_Layout_div' });
               var editLayoutText = ej.buildTag('span.e-rptdesigner-tab-focus e-designer-fontfamily', this.getLocale('editLayout'), {}, {
                   'id': this.id + '_edit_Layout',
                   'tabindex': '0', 'role': 'button', 'aria-label': this.getLocale('editLayout')
               });
               var editLayoutIcon = ej.buildTag('span.e-reportdesigner-rightarrow e-designer-switchind-icon', '', {}, {});
               var footerTag = ej.buildTag('div.e-rptdesigner-param-footer', '', {
                   'height': '63px',
                   'display': 'block'
               }, { 'id': this.id + '_param_Footr_Container' });
               var headerMarkupTag = ej.buildTag('span.e-rptdesigner-header e-rptdesigner-cursor e-rptdesigner-param-header', this.getLocale('headerText'), {
                   'display': 'inline-block',
                   'max-width': '400px'
               }, { 'id': this.id + '_param_hdrSpan_Text' });
               var headerIcon = ej.buildTag('span.e-rptdesigner-headericon e-rptdesigner-data-icon e-reportdesigner-configuration-parameters e-rptdesigner-cursor ' +
                   'e-rptdesigner-param-headericon', '', {
                   'display': 'inline-block'
               });

               var divContainer = ej.buildTag('div.e-control e-lib e-listview e-touch', '', {}, {});
               var listContainer = this.listContainer = ej.buildTag('div.e-list-container e-content e-reportdesigner-dataset e-rptdesigner-param-list', '', {}, { 'id': this.id + '_div_paramList' });
               var ulContainer = this.paramUlTag = ej.buildTag('ul.e-list-parent e-ul', '', { 'width': 'auto', 'height': 'auto' });
               var footerSeperator = ej.buildTag('div.e-rptdesigner-new-btn-footer e-rptdesigner-param-separator', '', {});
               headerTag.append(headerMarkupTag);
               headerTag.append(headerIcon);
               footerTag.append(footerSeperator);
               listContainer.append(ulContainer);
               divContainer.append(listContainer);
               bodyTag.append(divContainer);
               editLayoutContainer.append(editLayoutText, editLayoutIcon);
               parameterList.append(headerTag);
               parameterList.append(bodyTag);
               parameterList.append(editLayoutContainer);
               parameterList.append(footerTag);
               this.renderContextMenu(bodyTag);
               this.rptDesigner.getInstance('ReportUtil').titleTip(footerTag.find('.e-title-tip'));
               headerMarkupTag.addClass(ej.ReportUtil.isTextOverFlow(headerMarkupTag, true) ? 'e-title-tip' : '');
               this.rptDesigner.getInstance('ReportUtil').titleTip(headerTag.find('.e-title-tip'));
               editLayoutText.bind('click', $.proxy(this.openParameterLayout, this));
           };
</script>

The provided script redefines the renderParameterList method to build the Parameters pane UI without the Add Parameter button in the footer, while keeping the header, list, edit layout, and other elements fully functional.

Save and run the application

Open Bold Reports Designer in a browser and navigate to the Parameters pane to verify that the Add Parameter button is no longer visible.
Before Customization: - The Add New Parameter button is available in the Parameters pane.

After Customization: - The button is removed from the Parameters pane UI.

These steps help secure Bold Reports by hiding the Add Parameter button, reducing the risk of unauthorized changes.

How to Hide the Add Parameter Button in Bold Reports Designer

Steps to Hide the Add Parameter Button

Access denied