How to Add Custom Email and Edit Toolbar Buttons in the Bold Reports Angular Report Viewer

This guide explains how to enhance the Bold Reports Report Viewer in an Angular application by adding custom Email and Edit buttons to the toolbar. These buttons allow tailored actions, such as emailing the report as a PDF attachment or navigating to an editing interface, improving user interaction and functionality. Customizing the toolbar allows you to align the Report Viewer with your application’s specific requirements.

Understanding Toolbar Customization

In Bold Reports Report Viewer, the toolbar can be customized using the toolbarSettings property, which allows you to add, remove, or modify buttons. This guide focuses on adding two custom buttons:

• Email Button: Sends the rendered report as a PDF attachment to specified recipients.
• Edit Button: Opens an editing interface or triggers logic for modifying the report.

To define custom buttons and handle their click events, modify the Angular component files (app.component.html and app.component.ts). The process involves configuring the toolbar to include all default items (except the Print button) and adding custom buttons with specific icons, tooltips, and behaviors.

Prerequisites

• An Angular project with Bold Reports Report Viewer installed. Refer to the Bold Reports Angular Setup Guide if needed.
• A Bold Reports service URL (e.g., https://demos.boldreports.com/services/api/ReportViewer).
• A report file (e.g., sales-order-detail.rdl) hosted on the Bold Reports server.
• Basic knowledge of Angular, TypeScript, and HTML.

Steps to Add Custom Toolbar Buttons

1. Modify the HTML Template (app.component.html)

• Action: Update the app.component.html file to bind the Report Viewer component with toolbarSettings and an event handler for toolbar clicks.
• Purpose: This sets up the Report Viewer to display the customized toolbar and respond to user interactions with the custom buttons.
• Code:

  <bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl]="serviceUrl"
    [reportPath]="reportPath"
    [toolbarSettings]="toolbarSettings"
    (toolBarItemClick)="ontoolBarItemClick($event)"
    style="width: 100%;height: 950px">
  </bold-reportviewer>
  

• Explanation:
  • reportServiceUrl: Connects to the Bold Reports server API.
  • reportPath: Specifies the report file to be displayed.
  • toolbarSettings: Configures the toolbar, including custom buttons.
  • toolBarItemClick: Binds a function to handle toolbar item clicks.
  • style: Sets the viewer’s dimensions for proper display.

2. Configure the Component Logic (app.component.ts)

• Action: Update the app.component.ts file to define the service URL, report path, toolbar settings, and custom button configurations.
• Purpose: This configures the toolbar to include all default items (excluding Print) and adds the Email and Edit buttons with their properties (icons, tooltips, and positions).
• Code:

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'Report Viewer';
    public serviceUrl: string;
    public reportPath: string;
    public toolbarSettings: any;
  
    constructor() {
      this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
      this.reportPath = '~/Resources/docs/sales-order-detail.rdl';
      this.toolbarSettings = {
        showToolbar: true,
        items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Print,
        customItems: [
          {
            groupIndex: 1,
            index: 1,
            type: 'Default',
            cssClass: 'e-icon',
            prefixIcon: 'e-mail e-viewer-icons',
            id: 'E-Mail',
            tooltip: {
              header: 'E-Mail',
              content: 'Send rendered report as mail attachment'
            }
          },
          {
            groupIndex: 1,
            index: 2,
            type: 'Default',
            cssClass: 'e-icons',
            prefixIcon: 'e-edit',
            id: 'EditIcon',
            tooltip: {
              header: 'Edit',
              content: 'Edit button'
            }
          }
        ]
      };
    }
  
    ontoolBarItemClick(args: any): void {
      if (args.value === 'E-Mail') {
        // Add logic to export report as PDF and send via email
        console.log('Email button clicked');
        // Example: Call an API to export report as PDF and trigger email
      } else if (args.value === 'EditIcon') {
        // Add logic to open report editor or perform edit action
        console.log('Edit button clicked');
        // Example: Navigate to report designer or trigger edit mode
      }
    }
  }
  

• Code Breakdown:

  Code Snippet	Definition
  items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Print	Includes all default toolbar buttons except Print using bitwise operations.
  customItems	Defines an array of custom buttons (Email and Edit) with their properties.
  groupIndex: 1	Positions the button in the first toolbar group (adjustable for layout).
  index: 1 or 2	Sets the button’s order within the group (1 for Email, 2 for Edit).
  prefixIcon	Assigns icons (e-mail e-viewer-icons for Email, e-edit for Edit).
  id	Unique identifier for the button, used in the click handler.
  tooltip	Provides a header and description when hovering over the button.
  ontoolBarItemClick	Handles click events and differentiates between Email and Edit actions.

3. Run and Preview the Application

• Action: Run your Angular application using the command:

  ng serve --open
  

• Outcome: The Report Viewer will display with the customized toolbar, including the new Email and Edit buttons.
• Visual Reference:
  
  
• Tips:
  • Ensure the buttons appear with correct icons and tooltips.
  • Test click functionality using console logs or by implementing the desired logic.