How to Customize Exported File Names in Report Designer Preview for React Applications

In Bold Reports, you can customize the names of exported files in the Report Designer preview when using a React application. This feature is useful for setting file names according to specific requirements, ensuring better organization and clarity for exported reports.

By utilizing the exportItemClick event within the previewOptions settings, you can dynamically modify the default export file name.

Steps to Customize Exported File Names

Follow the steps below to set up and customize the exported file names in a React-based report designer application:

Step 1: Create a React Designer Application

Start by creating a basic React application with the Bold Reports Designer component. You can follow the official documentation to set up the environment.

Step 2: Add Code to Capture the onExportItemClick Event

Modify your App.js file to include the necessary code for handling the onExportItemClick event. This event allows you to define a custom file name during the export process.

/* eslint-disable */
import React from 'react';
import './App.css';
//Report Designer component styles
import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css';
//Report Designer component dependent scripts
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
//Report Viewer and Designer component scripts
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';
//Reports react base
import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';

var designerStyle = {
 'height': '700px',
 'width': '100%'
};

function App() {
 return (
   <div id="Designer" style={designerStyle}>
     <BoldReportDesignerComponent
     id="reportdesigner"
     serviceUrl={'https://demos.boldreports.com/services/api/ReportingAPI'}
     previewOptions={{ exportItemClick: onExportItemClick }} >
     </BoldReportDesignerComponent>
     </div>
 );
}

function onExportItemClick(args) {

 args.fileName = 'DemoReport'

}

export default App; 

Step 3: Run the Application

Start your application and navigate to the Report Designer Preview. When you export a report, the file name will be customized to “DemoReport”.

A simple React Designer sample application is also attached here for your reference.