How to Customize the Waiting Popup Template in the Bold Reports Blazor Viewer

Customizing the waiting popup template in a Bold Reports Blazor application allows you to replace the default loading animation with a custom GIF or an SVG. This enhances the user experience by providing a consistent look and feel that aligns with your application’s branding. Follow the steps below to customize the waitingPopupTemplate property effortlessly.

Steps to Customize the waitingPopupTemplate

1: Modify the boldreports-interop.js File

• Open the boldreports-interop.js file in the wwwroot/Scripts folder and update it with the following code. This sets a custom loading animation using the waitingPopupTemplate property:

  window.BoldReports = {
      RenderViewer: function (elementID, reportViewerOptions) {
          $("#" + elementID).boldReportViewer({
              reportPath: reportViewerOptions.reportPath,
              reportServiceUrl: reportViewerOptions.serviceURL,
              waitingPopupTemplate: '<div id="customLoadingtemplate" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif); width: 400px; height: 250px"><p>Loading reports... </p></div>'
          });
      }
  }
  

  Code Segment	Description
  waitingPopupTemplate: '...'	Defines a custom HTML template for the loading popup displayed while the report is being fetched or rendered.
  <div id="customLoadingtemplate" ...>	Creates a <div> element with the ID customLoadingtemplate to contain the loading popup content.
  style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif);"	Applies inline CSS to set a loading GIF as the background image.
  width: 400px; height: 250px;	Sets the dimensions of the <div> to 400 pixels wide and 250 pixels tall.
  <p>Loading reports... </p>	Displays a message indicating that the report is loading.

2. Test the Custom Animation:

• Run your application and confirm that the custom loading animation displays correctly during the report loading process.
  
  

Conclusion

Customizing the waiting popup template in your Bold Reports Blazor application helps create a more engaging and visually consistent reporting environment that matches your brand. You can download the customized sample application in the link provided here.