Custom Actions

To add custom actions to the Bold Reports^® JavaScript Report Viewer, add user-defined buttons to the toolbar and invoke custom actions. For example, you can create a custom email button that sends the rendered report to users, or a cancel button that stops report processing.

How do I send the report as an email attachment?

To send a report from the JavaScript Report Viewer as an email attachment, create a custom email button in the toolbar and a custom email action in the Web API service.

To add an email button to the JavaScript Report Viewer toolbar, define a custom toolbar item with the customItems property and handle the toolBarItemClick event.

Create email button option in the toolbar using the customItems property with the values such as groupIndex, index, itemType, cssClass, tooltip, toolBarItemClick event to fire when you click the button.

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

    <script type="text/javascript">
        $(function () {
            $("#viewer").boldReportViewer({
                reportServiceUrl: "/api/ReportViewer",
                reportPath: '~/Resources/docs/sales-order-detail.rdl',
                toolbarSettings: {
                    showToolbar: true,
                    items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Print,
                    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>

You can view the Web API service used in the preceding code in the Reporting Service GitHub location. For more information, see Samples and demos.

How do I create a custom email action?

To create a custom email action for the JavaScript Report Viewer, follow these steps:

Create a new action method SendEmail in the Web API service.
Export the report to the required type using the ReportHelper.GetReport method to send a report stream as an attachment.

The following code sample exports the report to a stream and sends it as an attachment to a specified mail address. In the code, SmtpClient is used to send 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("[email protected]");
            mail.To.Add("[email protected]");
            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("[email protected]", "xx");
            SmtpServer.EnableSsl = true;
            SmtpServer.Send(mail);

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

        return false;
    }

In the preceding code sample, the report is exported to PDF and sent to users using SmptClient.

Build and run the application. Preview and edit the result using the following:

index.html

index.js

    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>

//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
            })
        }
    }

$(function () {
    $("#viewer").boldReportViewer({
        reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
        reportPath: '~/Resources/docs/sales-order-detail.rdl',
        toolbarSettings: {
            showToolbar: true,
            items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Print,
            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
    });
});

How do I cancel report processing in the Report Viewer?

To cancel report processing in the JavaScript Report Viewer, add a custom cancel button to the toolbar and call the cancelRendering method when the user clicks it.

How do I add a cancel report button?

To add a cancel report button to the JavaScript Report Viewer toolbar, follow these steps:

Create a cancel button in the toolbar using the customItems property with the values such as cssClass, tooltip.
Register the event toolBarItemClick, ajaxSuccess, ajaxBeforeLoad, renderingComplete to handle the cancel button click action.

You can use the following client side codes to create the cancel button.

    <script type="text/javascript">
        $(function () {
            $("#viewer").boldReportViewer({
                reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                reportPath: '~/Resources/demos/Report/product-line-sales.rdl',
                toolbarSettings: {
                    showToolbar: true,
                    customItems: [{
                        type: 'Default',
                        cssClass: "e-icon e-close e-reportviewer-icon",
                        id: 'Stop',
                        tooltip: {
                            header: 'Stop',
                            content: 'Stop processing the report'
                        }
                    }]
                },
                toolBarItemClick: 'onToolbarItemClick',
                ajaxSuccess: onAjaxSuccess,
                ajaxBeforeLoad: onAjaxRequest,
                renderingComplete: onRenderingComplete
            });
        });

        //Toolbar click event handler
        function onToolbarItemClick(args) {
            if (args.value === "Stop") {
                var proxy = $('#viewer').data('boldReportViewer');
                proxy.cancelRendering();
                $('#viewer_toolbar_Stop').addClass('e-disable');
            }
        }

        //Ajax request event handler to enable cancel button
        function onAjaxRequest() {
            $('#viewer_toolbar_Stop').removeClass('e-disable');
        }

        //Ajax success event handler to disable cancel button
        function onAjaxSuccess() {
            $('#viewer_toolbar_Stop').addClass('e-disable');
        }

        //Rendering complete event handler to disable cancel button
        function onRenderingComplete() {
            $('#viewer_toolbar_Stop').addClass('e-disable');
        }
    </script>

Build and run the application. Preview and edit the result using the following: