Detect and Handle the Preview Button Click Event in Bold Reports Designer

This guide explains how to implement the previewReport event to customize the Preview button click behavior in the Bold Reports Designer. This allows you to execute custom logic when the Preview button is clicked.

Steps to Customize the Preview Button

1. Bind the previewReport Event

• Add the following code to your HTML file to bind the previewReport function to the previewReport event:

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

export default App; 

2. Implement the previewReport Function

• Define a custom function previewReport to handle the event triggered when the Preview button is clicked:

function previewReport() {
      alert("Preview Options Clicked");
    } 

Preview

Conclusion

By following these steps, you can effectively capture and handle the Preview button click event in your Bold Reports Designer application.

Related Articles

• Customizing the Close Preview Button in Bold Reports JavaScript Report Designer
• Customizing the Close Preview Button in Bold Reports Angular Report Designer