How to Add a Custom Button to the Report Viewer Toolbar

Published:

Updated:

In Bold reports, customize the toolbar in the Report Viewer by adding a button with specific functionality. An example of this is adding an email button to the toolbar, which allows users to send the rendered report as an email attachment. To achieve this, you need to create the email button in the toolbar and implement the necessary code in both the client-side and server-side Web API services. Here are the steps you can follow:

Add email button in Report Viewer

Create the email button option in the toolbar by using the customItems property. Specify the necessary properties such as groupIndex, index, itemType, cssClass, tooltip, and the toolBarItemClick event handler. This event will be triggered when the button is clicked.

Access the Report Viewer model and create a JSON array for sending requests to the Web API server. Use the following codes for creating the event with a custom action.

    <script type="text/javascript">
        $(function () {
            $("#viewer").boldReportViewer({
                reportServiceUrl: "/api/ReportViewer",
                reportPath: 'sales-order-detail.rdl',
                toolbarSettings: {
                    showToolbar: true,
                    customItems: [{
                        groupIndex: 1,
                        index: 1,
                        type: 'Default',
                        cssClass: "e-icon e-mail e-reportviewer-icon",
                        id: 'E-Mail',
                        tooltip: {
                            header: 'E-Mail',
                            content: 'Send rendered report as mail attachment'
                        }
                    }]
                },
                toolBarItemClick: 'ontoolBarItemClick'
            });
        });

        //Toolbar click event handler
        function ontoolBarItemClick(args) {
            if (args.value == "E-Mail") {
                var proxy = $('#viewer').data('boldReportViewer');
                var Report = proxy.model.reportPath;
                var lastsIndex = Report.lastIndexOf("/");
                var reportName = Report.substring(lastsIndex + 1);
                var requrl = proxy.model.reportServiceUrl + '/SendEmail';
                var _json = {
                    exportType: "PDF", reportViewerToken: proxy._reportViewerToken, ReportName: reportName
                };
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: requrl,
                    data: JSON.stringify(_json),
                    dataType: "json",
                    crossDomain: true
                })
            }
        }
    </script>

Note: You need to change the reportServiceUrl and reportPath. To set up the reportServiceUrl, create a Web API service to process the report files in the Report Viewer. Refer to the ASP.NET Web API Service documentation here.

Creating a custom email action

Create a new method called SendEmail in the Web API service.
To send a report stream as an attachment, utilize the ReportHelper.GetReport method to export the report to the desired format.

The following code sample exports the report to a stream and sends it as an attachment to a specified email address. The SmtpClient sends the report as an email attachment.

    public object SendEmail(Dictionary<string, object> jsonResult)
    {
        string _token = jsonResult["reportViewerToken"].ToString();
        var stream = ReportHelper.GetReport(_token, jsonResult["exportType"].ToString());
        stream.Position = 0;

        if (!ComposeEmail(stream, jsonResult["reportName"].ToString()))
        {
            return "Mail not sent !!!";
        }

        return "Mail Sent !!!";
    }

    public bool ComposeEmail(Stream stream, string reportName)
    {
        try
        {
            MailMessage mail = new MailMessage();
            SmtpClient SmtpServer = new SmtpClient("smtp.gmail.com");
            mail.IsBodyHtml = true;
            mail.From = new MailAddress("xx@gmail.com");
            mail.To.Add("xx@gmail.com");
            mail.Subject = "Report Name : " + reportName;
            stream.Position = 0;

            if (stream != null)
            {
                ContentType ct = new ContentType();
                ct.Name = reportName + DateTime.Now.ToString() + ".pdf";
                System.Net.Mail.Attachment attachment = new System.Net.Mail.Attachment(stream, ct);
                mail.Attachments.Add(attachment);
            }

            SmtpServer.Port = 587;
            SmtpServer.Credentials = new System.Net.NetworkCredential("xx@gmail.com", "xx");
            SmtpServer.EnableSsl = true;
            SmtpServer.Send(mail);

            return true;
        }
        catch (Exception ex)
        {
            return ex.ToString();
        }

        return false;
    }

Kindly refer to the following output snapshot for your reference.

Find the following help documentation for creating a custom email button and sharing a report as an email attachment with other users on various platforms.

Was this article useful?

Dislike

Comments (0)

How to Add a Custom Button to the Report Viewer Toolbar

Add email button in Report Viewer

Creating a custom email action

Access denied