How to Use the Bold Reports Report Viewer in a Flutter Application

Published:

Updated:

Flutter, a popular cross-platform framework, allows developers to create beautiful and interactive mobile applications. However, when it comes to integrating reporting capabilities into a Flutter application, native support may be limited. Fortunately, with the help of the Bold Reports Report Viewer, we can seamlessly incorporate advanced reporting features into our Flutter projects. Flutter uses the Dart programming language, which is also developed by Google.

While the Bold Reports Report Viewer is primarily designed for JavaScript-based applications, leverage its powerful functionalities in a Flutter application by utiliizing an ASP.NET Core service as an intermediary. In this article, you will explore the process of integrating the JavaScript Report Viewer with an ASP.NET Core service and demonstrate how to use it effectively in a Flutter application.

Prerequisites

Before getting started with the Bold Report Viewer in Flutter, make sure your development environment includes the following:

First, download and extract the Flutter SDK file, and place it in the designated folder. For example, I have stored it in C:\src. Next, set the environment variable path by pressing Win + R and pasting the following command.
```
 rundll32.exe sysdm.cpl,EditEnvironmentVariables
```
Copy the path of the bin folder, which is C:\src\flutter\bin, and paste it by clicking the “New” button, followed by the “OK” button.
Now, open Visual Studio Code and install Flutter and Dart in your application, as shown in the following snapshot.

Creating a Flutter project

Now, create a new folder named “Flutter” and then open a new terminal by clicking on “Terminal -> New Terminal”. Create a new sample project using the following command.
```
 flutter create project_name
```
If you already have a new project, you need to run the following command:
```
 flutter pub get
```
After creating the project, navigate to the project directory by running the following command: cd project_name.
Then, you need to add the script and bold report viewer to index.html, located in the web folder.
In the report_viewer.html file, you’ll need to include the necessary JavaScript code to create and configure the Bold Report Viewer. You can refer to the JavaScript documentation provided by Bold Reports for detailed instructions on displaying an SSRS RDL report in a JavaScript application: Javascript Report Viewer.

In that documentation, you will find step-by-step instructions on how to include the required JavaScript files, create an instance of the Bold Report Viewer, and load and display an SSRS RDL report.

The Report Viewer requires a Web API service to process the report files. You should create any one of the following Web API services to run this application.

<!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
         <title>Report Viewer HTML page</title>
         <link href="https://cdn.boldreports.com/5.1.20/content/material/bold.reports.all.min.css" rel="stylesheet" />
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

         <!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
         <script src="https://cdn.boldreports.com/5.1.20/scripts/common/ej2-base.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/common/ej2-data.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/common/ej2-pdf-export.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/common/ej2-svg-base.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/data-visualization/ej2-lineargauge.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/data-visualization/ej2-circulargauge.min.js"></script>

         <!--Render the map item. Add this script only if your report contains the map report item.-->
         <script src="https://cdn.boldreports.com/5.1.20/scripts/data-visualization/ej2-maps.min.js"></script>

         <!-- Report Viewer component script-->
         <script src="https://cdn.boldreports.com/5.1.20/scripts/common/bold.reports.common.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/common/bold.reports.widgets.min.js"></script>

         <!--Render the chart item. Add this script only if your report contains the chart report item.-->
         <script src="https://cdn.boldreports.com/5.1.20/scripts/data-visualization/ej.chart.min.js"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/bold.report-viewer.min.js"></script>

         <script src="flutter.js" defer></script>

      </head>
      <body>
         <div style="height: 600px; width: 950px;">
               <!-- Creating a div tag that will act as a container for the boldReportViewer widget.-->
               <div style="height: 600px; width: 950px; min-height: 400px;" id="viewer"></div>
               <!-- Setting property and initializing boldReportViewer widget.-->
               <script type="text/javascript">
                  $(function () {
                     $("#viewer").boldReportViewer({
                           reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                           reportPath: '~/Resources/docs/sales-order-detail.rdl'
                     });
                  });
               </script>
         </div>
      </body>
   </html>

Finally, run the command with the flutter run -d chrome to launch the application. The report will be rendered and displayed as shown in the following screenshot.

ReportViewer.zip

Was this article useful?

Dislike

Comments (0)

How to Use the Bold Reports Report Viewer in a Flutter Application

Prerequisites

Creating a Flutter project

Access denied