How to Customize Export Filenames with the Current Date in Bold Reports

Published:

Updated:

This guide explains how to customize export filenames in Bold Reports by appending the current date (e.g., in YYYY-MM-DD or other formats) to improve file organization and traceability. Using the renderingComplete and exportItemClick events, you can programmatically modify exported report filenames (e.g., PDF, Excel) to include the report name and a date stamp, such as sales-order-detail_2025-08-22.pdf.

Understanding Dynamic Filename Customization

Bold Reports allows you to customize the filename of exported reports using two key events:

renderingComplete: Triggered when the report is fully loaded, allowing you to get the report’s base name (e.g., sales-order-detail from sales-order-detail.rdl).
exportItemClick: Starts when the Export button is clicked, allowing you to change the filename before download.

In this guide, you will learn how to:

Use the renderingComplete event to get the default export filename and add details like the current date.
Use the exportItemClick event to append the current date (e.g., YYYY-MM-DD) to the filename before exporting.
Change the date format (e.g., DD-MM-YYYY, YYYYMMDD, etc.) as needed.

This approach ensures exported files have unique, easily identifiable names for better organization and tracking.

Steps to Customize Export Filenames

1. Set Up the Report Viewer with Event Handlers

Action: Initialize the Bold Reports Report Viewer in your HTML file, binding the renderingComplete and exportItemClick events.
Purpose: This configures the Report Viewer to load a report and handle export filename customization.

Add the code to the <script> tags in your app.component.ts file.

$(function () {
    var reportName = '';
    $("#viewer").boldReportViewer({
        reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
        reportPath: "~/Resources/docs/sales-order-detail.rdl",
        renderingComplete: onRenderingComplete,
        exportItemClick: onExportItemClick
    });
});

Code Breakdown	Explanation
`reportServiceUrl`	Points to the Bold Reports server API.
`reportPath`	Specifies the report file to display (e.g., `sales-order-detail.rdl`).
`renderingComplete`	Calls the `onRenderingComplete` function when the report loads.
`exportItemClick`	Calls the `onExportItemClick` function when the Export button is clicked.
`reportName`	Stores the report’s base name for export customization.

2. Extract the Report Name on Rendering Complete

Action: Define the onRenderingComplete function to extract the report name (without the .rdl extension) from the report path.
Purpose: This ensures the base filename is available for constructing the export filename.

Code (add to <script>):

function onRenderingComplete(event) {
    var reportPath = event.model.reportPath;
    var reportNameWithExtension = reportPath.split("/").pop();
    reportName = reportNameWithExtension.split(".")[0];
}

Code Breakdown	Description
`event.model.reportPath`	Retrieves the full report path (e.g., `~/Resources/docs/sales-order-detail.rdl`.)
`reportPath.split("/").pop()`	Extracts the filename with extension (e.g., `sales-order-detail.rdl`.)
`reportNameWithExtension.split(".")[0]`	Removes the extension to store `sales-order-detail` in the global `reportName` variable.

Ensure reportName is declared globally (outside the function) to be accessible in the exportItemClick event.
- The onRenderingComplete function captures the report’s base name to use in the export filename, ensuring consistency across exports.

3. Append Current Date to the Filename on Export

Action: Implement the onExportItemClick function to append the current date to the filename in YYYY-MM-DD format (or other formats as needed).
Purpose: This dynamically constructs a unique filename (e.g., sales-order-detail_2025-08-22) for each export.

Code (add to <script>):

function onExportItemClick(event) {
    if (reportName) {
        var currentDate = new Date();
        var formattedDate = currentDate.getFullYear() + "-" +
                           ("0" + (currentDate.getMonth() + 1)).slice(-2) + "-" +
                           ("0" + currentDate.getDate()).slice(-2);
        event.fileName = `${reportName}_${formattedDate}`;
    }
}

Code Breakdown	Description
`reportName`	Uses the base name extracted in Step 2 (e.g., `sales-order-detail`).
`new Date()`	Creates a Date object for the current date and time.
`formattedDate`	Constructs a date string in `YYYY-MM-DD format` (e.g., `2025-08-22`).
`currentDate.getFullYear()`	Gets the year (e.g., `2025`)
`("0" + (currentDate.getMonth() + 1)).slice(-2)`	Adds leading zeros to the month (e.g., `08` for August)
`("0" + currentDate.getDate()).slice(-2)`	Adds leading zeros to the day (e.g., `22`)
`event.fileName`	Sets the export filename to `reportName_formattedDate` (e.g., `sales-order-detail_2025-08-22`)

Alternative Date Formats:

DD-MM-YYYY: Modify formattedDate to:

var formattedDate = ("0" + currentDate.getDate()).slice(-2) + "-" +
                    ("0" + (currentDate.getMonth() + 1)).slice(-2) + "-" +
                    currentDate.getFullYear();

Example output: sales-order-detail_22-08-2025.

YYYYMMDD: Modify formattedDate to:

var formattedDate = currentDate.getFullYear() +
                    ("0" + (currentDate.getMonth() + 1)).slice(-2) +
                    ("0" + currentDate.getDate()).slice(-2);

Example output: sales-order-detail_20250822.

The onExportItemClick function ensures the exported filename includes the report name and current date, enhancing file organization.

4. Test the Export Functionality

Action: Run the application and test the export feature.
Steps:
1. Open the application in a browser.
2. Click the Export button in the Report Viewer toolbar (e.g., select PDF or Excel).
3. Verify the downloaded file name — it should follow the format sales-order-detail_YYYY-MM-DD (e.g., sales-order-detail_2025-08-22.pdf).
Visual Reference:
Tips:
- Verify the date matches the current system date.
- Test multiple export formats (PDF, Excel) for consistency.
- Implements the event handlers as described in Steps 1–3.

Download a sample application demonstrating this setup here.

Tips for Success

Custom Date Formats: Modify the formattedDate logic in onExportItemClick to support formats like DD-MM-YYYY, YYYYMMDD, or include time (e.g., YYYY-MM-DD_HH-MM-SS).

Example for time inclusion:

var formattedDate = currentDate.getFullYear() + "-" +
                    ("0" + (currentDate.getMonth() + 1)).slice(-2) + "-" +
                    ("0" + currentDate.getDate()).slice(-2) + "_" +
                    ("0" + currentDate.getHours()).slice(-2) + "-" +
                    ("0" + currentDate.getMinutes()).slice(-2);

Example Output: sales-order-detail_2025-08-22_14-19.

Was this article useful?

Dislike

Comments (0)