How to Add Custom Buttons to the Toolbar in the Bold Reports JavaScript Report Viewer

Published:

Updated:

The Bold Reports JavaScript Report Viewer allows you to enhance its toolbar by adding custom buttons to trigger specific actions, such as sending emails. This article provides step-by-step instructions for adding custom buttons using the toolbarSettings property. With this customization, users can share reports as PDF attachments directly from the toolbar in web applications.

To achieve this, define buttons using the toolbarSettings.customItems property with attributes like groupIndex, cssClass, and itemType, and handle their actions using the toolBarItemClick event.

Steps to Add Custom Toolbar Buttons

1. Add Custom Buttons to the Toolbar

Use the customItems property within toolbarSettings of the Bold Reports Report Viewer. This property allows you to define the appearance and behavior of custom buttons.

<body>
<div id = "viewer" style = "height: 950px; width: 100%"></div>
<script type = "text/javascript">
$(function(){
   $("#viewer").boldReportViewer({
       reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
       reportPath: '~/Resources/docs/sales-order-detail.rdl',
       toolbarSettings: {
           showToolbar: true,
           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'
                   }
               }
           ]
       },

   });
});
</script>
  
</body>

Code Breakdown

Property	Description
`groupIndex: 1`	Specifies the toolbar group where the button appears.
`index: 1`	Sets the button’s position within the group.
`customItems`	Array defining custom toolbar buttons with user-specified functionality.
`prefixIcon`	Defines the icon class for the button (e.g., `e-mail e-viewer-icons`).
`tooltip`	Provides a header and description for the button’s hover text.

Note: Replace reportServiceUrl and reportPath with your own server configuration to load and render reports.

2. Handle Button Actions with `toolBarItemClick`

To implement functionality for custom buttons (e.g., sending an email with a report attachment), use the toolBarItemClick event. Below is an example of handling the “E-Mail” button click to trigger an email action.

$("#viewer").boldReportViewer({
  // ... other settings from above ...
  toolBarItemClick: function (args) {
    if (args.item.id === "E-Mail") {
      // Logic to export report as PDF and send via email
      alert("E-Mail button clicked! Add email functionality here.");
      // Example: Call an API to export report as PDF and attach to email
    } else if (args.item.id === "EditIcon") {
      alert("Edit button clicked! Add edit functionality here.");
    }
  },
});

3. Preview the Toolbar

Run the application to see the customized toolbar with the “E-Mail” and “Edit” buttons. The toolbar will display all default tools (except Print) alongside your custom buttons.

Conclusion

Adding custom buttons to the Bold Reports JavaScript Report Viewer toolbar enhances user interaction by enabling tailored actions, such as emailing reports or editing content directly. This customization improves workflow efficiency and aligns the toolbar with your application’s needs.

You can download the working sample from here.

Was this article useful?

Dislike

Comments (0)