Customizing the Close Preview Button in Bold Reports JavaScript Report Designer

This guide details how to customize the action of the Close Preview button in the Bold Reports JavaScript Report Designer using the previewReport property. By defining a custom function, you can initiate specific actions when the preview is closed, thereby enhancing interactivity and tailoring workflows to meet user requirements. This functionality is particularly useful for incorporating dynamic behaviors into reporting applications.

Prerequisites

• Bold Reports JavaScript Report Designer must be installed and configured.
• A JavaScript application should be set up with the Report Designer integrated, as per the JavaScript Report Designer Documentation.
• Basic knowledge of HTML, JavaScript, and jQuery is required.

Project Setup

1. Create a new JavaScript application or use an existing one that includes the Bold Reports Report Designer.
2. Ensure that the index.html file includes the necessary Bold Reports scripts and CSS, typically added via CDN:

   <script src="https://cdn.boldreports.com/5.4.21/scripts/common/bold.reports.all.min.js"></script>
   <script src="https://cdn.boldreports.com/5.4.21/scripts/bold.report-designer.min.js"></script>
   <link href="https://cdn.boldreports.com/5.4.21/content/bold.reports.material.min.css" rel="stylesheet" />
   

3. Verify that jQuery is included (required for Bold Reports):

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   

4. Locate the index.html file in your project’s root directory or the designated HTML folder.

Steps to Customize the “Close Preview” Button

Step 1: Add the previewReport Property

1. Open the index.html file in your code editor.

2. Locate the JavaScript code initializing the Report Designer, usually found within a <script> tag.

3. Add the previewReport property to the boldReportDesigner configuration, directing it to a custom function (e.g., reBindClick).

4. Example initialization:

   $(function () {
       $("#designer").boldReportDesigner({
           serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI",
           previewReport: reBindClick
       });
   });
   

   Snapshot: Adding the previewReport property in the Report Designer initialization code.

   

Step 2: Create the Custom Function

1. Define the reBindClick function to handle the Close Preview button’s click event.

2. Retrieve the DOM element for the button using its ID, which includes the Report Designer’s control ID (e.g., reportControlId + '_toolbar_btn_closePreview').

3. Attach an event listener to execute custom actions and switch back to design mode.

4. Define a customActions function for additional functionalities like alerts, logging, or API calls.

5. Example code:

   function reBindClick() {
       var button = document.querySelector('#' + reportControlId + '_toolbar_btn_closePreview');
       if (button) {
           button.addEventListener('click', function (event) {
               event.preventDefault(); // Prevent default behavior
               var designer = $('#' + reportControlId).data('boldReportDesigner');
               designer.showDesign(); // Switch to design mode
               customActions(); // Execute custom actions
           });
       } else {
           console.error('Close Preview button not found');
       }
   }
   
   function customActions() {
       // Example: Display an alert
       alert('Preview closed. Performing custom actions.');
       // Add more actions, e.g., logging, saving state, or API calls
       console.log('Custom actions executed at ' + new Date().toISOString());
   }
   

   Snapshot: JavaScript code for handling the Close Preview button.
   

   

Step 3: Test the Application

1. Save the index.html file.

2. Run the application in a web browser (e.g., via a local server or by opening the file directly if CORS is not an issue).

3. Open the Report Designer, preview a report, and click the Close Preview button.

4. Verify that:

   • The designer switches back to design mode.
   • The customActions function executes (e.g., an alert appears).
   • No errors appear in the browser’s console.

   Snapshot: Testing the Close Preview button in the Report Designer.
   

   

Complete Sample index.html

Below is an example of the complete index.html file integrating the Close Preview customization:

<!DOCTYPE html>
<html>
<head>
    <title>Bold Reports JavaScript Report Designer</title>
    <meta charset="utf-8" />
    <link href="https://cdn.boldreports.com/5.4.21/content/bold.reports.material.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.21/scripts/common/bold.reports.all.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.21/scripts/bold.report-designer.min.js"></script>
</head>
<body>
    <div id="designer" style="width: 100%; height: 600px;"></div>
    <script type="text/javascript">
        var reportControlId = 'designer';

        $(function () {
            $("#designer").boldReportDesigner({
                serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI",
                previewReport: reBindClick
            });
        });

        function reBindClick() {
            var button = document.querySelector('#' + reportControlId + '_toolbar_btn_closePreview');
            if (button) {
                button.addEventListener('click', function (event) {
                    event.preventDefault();
                    var designer = $('#' + reportControlId).data('boldReportDesigner');
                    designer.showDesign();
                    customActions();
                });
            } else {
                console.error('Close Preview button not found');
            }
        }

        function customActions() {
            alert('Preview closed. Performing custom actions.');
            console.log('Custom actions executed at ' + new Date().toISOString());
        }
    </script>
</body>
</html>

Troubleshooting

• Button not found:
  • Verify the reportControlId matches the ID of the designer container (designer in the example).
  • Ensure the Report Designer version supports the previewReport property (check the documentation).
  • Confirm the button’s ID structure hasn’t changed in newer versions (e.g., _toolbar_btn_closePreview).
• Custom actions not executing:
  • Check the browser console for errors (e.g., jQuery not loaded, designer instance unavailable).
  • Ensure the customActions function is defined and accessible.
• CORS or service URL issues:
  • If using a demo service URL, ensure internet connectivity and no CORS restrictions.
  • For local APIs, configure the serviceUrl to point to a valid Reporting API endpoint.
• Cross-browser issues:
  • Test in multiple browsers (Chrome, Firefox, Edge) to ensure the event listener works consistently.
  • Use addEventListener for compatibility (avoid older methods like onclick).

Deployment

1. Test Locally: Run the application locally (e.g., using a simple HTTP server like http-server or VS Code’s Live Server) to verify functionality.
2. Save: Commit the index.html file and related assets to a version-controlled repository.
3. Deploy: Host the application on a web server (e.g., IIS, Apache, or a cloud service like Azure) with access to the Bold Reports API.
4. Integrate: Embed the Report Designer in a larger web application or link it from the company intranet.
5. Secure: Ensure the serviceUrl uses HTTPS and restrict API access to authorized users.