Customizing the Close Preview Button in Bold Reports Angular Report Designer

This guide explains how to customize the Close Preview button action in the Bold Reports Angular Report Designer using the previewReport property. By defining a custom function, you can initiate specific actions when the preview is closed, thereby enhancing interactivity and adapting workflows to meet user requirements. This functionality is especially beneficial for dynamic reporting applications developed with Angular.

Project Setup

1. Create a new Angular application (ng new my-report-app) or use an existing one.
2. Install Bold Reports Angular package:

   npm install @boldreports/angular-reporting-components --save
   

3. Configure the Report Designer in your Angular module (app.module.ts):

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { BoldReportDesignerModule } from '@boldreports/angular-reporting-components';
    import { AppComponent } from './app.component';
   
    @NgModule({
      declarations: [AppComponent],
    imports: [BrowserModule, BoldReportDesignerModule],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
   

   Snapshot: app.module.ts customization code.
   
   
4. Include jQuery (required by Bold Reports):

   npm install jquery --save
   

   Add the following to angular.json under scripts:

   "scripts": ["node_modules/jquery/dist/jquery.min.js"]
   

5. Navigate to the src/app folder to modify app.component.ts and app.component.html.

Steps to Customize the “Close Preview” Button

Step 1: Update app.component.ts

1. Open src/app/app.component.ts in your code editor.

2. Define the reportControlId property to reference the designer’s ID.

3. Add a serviceUrl property for the Bold Reports API.

4. Create a reBindClick method to attach an event listener to the Close Preview button.

5. Implement a customActions method for custom logic (e.g., alerts, logging).

6. Ensure jQuery is imported for DOM manipulation.

7. Here’s the complete example:

   import { Component } from '@angular/core';
   declare var $: any; // Declare jQuery
   
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
   })
   export class AppComponent {
       reportControlId = 'designer';
       serviceUrl = 'https://demos.boldreports.com/services/api/ReportingAPI';
   
       reBindClick(event: any) {
           const button = document.querySelector(`#${this.reportControlId}_toolbar_btn_closePreview`);
           if (button) {
               button.addEventListener('click', (event: any) => {
                   event.preventDefault(); // Prevent default behavior
                   const designer = $(`#${this.reportControlId}`).data('boldReportDesigner');
                   if (designer) {
                       designer.showDesign(); // Switch to design mode
                       this.customActions(); // Execute custom actions
                   } else {
                       console.error('Report Designer instance not found');
                   }
               });
           } else {
               console.error('Close Preview button not found');
           }
       }
   
       customActions() {
           alert('Preview closed. Performing custom actions.');
           console.log('Custom actions executed at ' + new Date().toISOString());
           // Example: Save state, call API, or update UI
       }
   }
   

   Snapshot: Code for app.component.ts with Close Preview customization.
   

   

Step 2: Update app.component.html

1. Open src/app/app.component.html in your code editor.

2. Add the <bold-reportdesigner> component with id, serviceUrl, and previewReport bindings.

3. Set the component’s dimensions for proper rendering.

4. Here is the example code:

   <bold-reportdesigner
       id="designer"
       [serviceUrl]="serviceUrl"
       (previewReport)="reBindClick($event)"
       style="position: absolute; height: 550px; width: 1250px;">
   </bold-reportdesigner>
   

   Snapshot: Configuration of the Report Designer in app.component.html.
   

   

Step 3: Test the Close Preview Functionality

1. Save all changes to app.component.ts and app.component.html.

2. Run the Angular application:

   ng serve
   

3. Open the application in a browser (default URL is: http://localhost:4200).

4. Load a report in the Report Designer, switch to preview mode, and click the Close Preview button.

5. Verify that:

   • The designer returns to design mode.
   • The customActions function executes (e.g., an alert appears).
   • No errors are present in the browser’s console.

   Snapshot: Testing the “Close Preview” button in the Angular application.
   

   

Troubleshooting

• Button not found:
  • Verify the button’s ID (#designer_toolbar_btn_closePreview) matches the expected structure. Note that the article’s provided ID (#designer_designButton) is incorrect; use the correct ID for the Close Preview button.
  • Ensure that reportControlId matches the <bold-reportdesigner> ID (designer).
• Designer instance not found:
  • Confirm that jQuery is loaded and the Bold Reports scripts are correctly included.
  • Check that the Report Designer version supports the previewReport property (refer to documentation).
• CORS or service URL issues:
  • For a demo service URL, confirm internet connectivity and absence of CORS restrictions.
  • For local APIs, configure serviceUrl to a valid Reporting API endpoint with the correct CORS settings.
• TypeScript errors:
  • Ensure declare var $: any; is added to avoid jQuery type errors.
  • Install @types/jquery for better TypeScript support:

    npm install @types/jquery --save-dev
    

• Cross-browser issues:
  • Test in different browsers like Chrome, Firefox, and Edge to ensure consistent event listener functionality.
  • Use modern event handling (addEventListener) for compatibility.

Additional Resources

• Sample Application: A sample application is available here for reference.
• Documentation: Link to relevant Bold Reports documentation for further details:
  • Angular Report Designer
  • JavaScript Close Preview Customization

Conclusion

Customizing the Close Preview button in the Bold Reports Angular Report Designer boosts application interactivity by embedding specific functionalities into the reporting workflow. This method enables developers to create dynamic, user-responsive reporting experiences with minimal code modifications.