How to Reset the Bold Reports Angular Report Designer to the Default State
You can restore the Bold Reports Designer to its default layout using the showDesign() method.
After making layout changes, applying customizations, or previewing reports, you may want to return the designer to its original state. The showDesign() API reinitializes the designer, clears temporary changes, and restores the default UI layout.
This article explains how to use the showDesign() method in an Angular application. The same approach works for both the Angular component–based designer and the jQuery-initialized designer.
Prerequisites
Before proceeding, ensure that the following requirements are met:
- An Angular application with
BoldReportDesignerComponentor a jQuery-based Report Designer @boldreports/angular-reportingpackage is installed- The Report Designer is already rendered on the page
Steps to Reset the Report Designer
1. Open the Component File
Open src/app/app.component.ts (or the TypeScript file containing your designer logic).
2. Call the showDesign()Method
Recommended: Angular @ViewChild Approach
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { BoldReportDesignerComponent } from '@boldreports/angular-reporting';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('designer') reportDesigner!: BoldReportDesignerComponent;
ngAfterViewInit() {
// Optional: Auto-reset after initial load
// this.reportDesigner.showDesign();
}
// Call this method from a button click or any event
resetDesignerToDefault() {
if (this.reportDesigner) {
this.reportDesigner.showDesign();
}
}
}
HTML template (app.component.html):
<div style="height: 100vh;">
<bold-report-designer
#designer
id="designer"
[serviceUrl]="'https://demos.boldreports.com/services/api/ReportingAPI'">
</bold-report-designer>
</div>
<button (click)="resetDesignerToDefault()">Reset Designer to Default</button>
Alternative: jQuery Widget Approach (as shown in original example)
If you are using the jQuery-based Report Designer, you can access the designer instance and call the showDesign() method.
<div id="container"></div>
<script>
// Initialize the designer
$("#container").boldReportDesigner({
serviceUrl: 'https://demos.boldreports.com/services/api/ReportingAPI'
// other options...
});
// Get the designer instance and reset
var designerObj = $("#container").data("boldReportDesigner");
designerObj.showDesign();
</script>
3. Run the Application
- Save the changes.
- Run the Angular application using:
ng serve. - The Report Designer returns to its default state with the original layout, no unsaved changes, toolbars, and panels.
Download Sample Application
You can download and run the sample Angular application to test this functionality.
