Set Custom Export File Names in the Bold Reports JavaScript Designer

Published:

Updated:

This guide explains how to customize export file names for reports in a JavaScript application using the Bold Reports Report Designer. By leveraging the exportItemClick event in the previewOptions settings, you can assign meaningful names (for example, DemoReport) to exported reports, improving file organization and user experience.

Steps to Implement Custom Export File Names

Step 1: Add Code to Your HTML File

Include the following JavaScript code in your HTML file to capture the exportItemClick event and set a custom file name for exported reports:

$(document).ready(function () {
    $("#container").boldReportDesigner({
        serviceUrl: 'https://demos.boldreports.com/services/api/ReportingAPI',
        previewOptions: {
            exportItemClick: function(args) {
                args.fileName = "DemoReport";
            }
        }
    });
});

Ensure the serviceUrl points to your Bold Reports API endpoint.

Code Explanation

Code Component	Description
`previewOptions`	Configures preview-related settings, including export behavior.
`exportItemClick`	Triggered when an export option is selected, allowing customization of export settings.
`args.fileName`	Sets the custom file name for the exported report (e.g., `DemoReport`).

Step 2: Preview and Verify

Open your JavaScript application and navigate to the Report Designer.
Click the Export option in the report viewer.
Verify that the exported file uses the specified custom name (for example, DemoReport).

Conclusion

Customizing export file names in Bold Reports using the exportItemClick event enhances report organization and improves usability in JavaScript applications. This simple configuration ensures that exported files are easily identifiable.