Custom Actions

To add custom actions to the Bold Reports® Blazor Report Viewer, add user-defined buttons to the toolbar and invoke custom actions using the Report Viewer property. For example, you can create a custom email button that sends the rendered report to users.

How do I add an email button to the Report Viewer toolbar?

To add an email button to the Blazor Report Viewer toolbar, define a custom toolbar item and handle the toolbar item click event in the boldreports-interop.js file.

  1. Create an email button in the toolbar using the CustomItems property with the values such as GroupIndex, Index, Type, CssClass, and Tooltip. The tool-bar-item-click event triggers when you click the email button.

  2. Access the Report Viewer model and create a JSON array for sending requests to the Web API Server.

  3. Use the following code in the boldreports-interop.js file to add the email button in a Blazor application.

    // Interop file to render the Bold Report Viewer component with properties.
window.BoldReports = {
    RenderViewer: function (elementID, reportViewerOptions) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportName,
            reportServiceUrl: reportViewerOptions.serviceURL,
            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'
        });
    }
}

function ontoolBarItemClick(args) {
    if (args.value == "E-Mail") {
        var proxy = $('#report-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
        })
    }
}

How do I send the report as an email attachment?

To send a report from the Blazor Report Viewer as an email attachment, add a custom email action to the Web API service that exports the report to a stream and attaches it to a mail message.

  1. Create a new action method SendEmail in the Web API service.

  2. Export the report to the required type using the ReportHelper.GetReport method to send a report stream as an attachment.

  3. The following code sample exports the report to a stream and sends it as an attachment to a specified mail address. In the code, the SmtpClient method is used to send the report as an email attachment.

    public object SendEmail([FromBody] Dictionary<string, object> jsonResult)
{
    string _token = jsonResult["reportViewerToken"].ToString();
    var stream = ReportHelper.GetReport(_token, jsonResult["exportType"].ToString(), this, _cache);
    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)
    {
        throw ex;
    }

    return false;
}

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

See also