How to Use the Bold Reports Report Designer 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 Designer, 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 Designer is primarily designed for JavaScript-based applications, leverage its powerful functionalities in a Flutter application by utilizing an ASP.NET Core service as an intermediary. In this article, you will explore the process of integrating the JavaScript Report Designer 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 Designer in Flutter, ensure your development environment includes the following,

Download and extract the Flutter SDK file, then 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 “New” followed by “OK.”
Now, open Visual Studio Code and install Flutter and Dart in your application as shown in the following screenshot.

Creating a Flutter project

Now, create a new folder named “Flutter,” 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, 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 designer to index.html located in the web folder.
In the report_designer.html file, include the necessary JavaScript code to create and configure the Bold Report Designer. Refer to the JavaScript documentation provided by Bold Reports for detailed instructions on displaying an SSRS RDL report in a JavaScript application: Javascript Report Designer

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 Designer, and load the display of an SSRS RDL report.

The Web Report Designer requires a Web API service to process data and file actions. Therefore, you must create one of the following Web API services to run this application.

<!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
         <title>Report Designer HTML page</title>
         <link href="https://cdn.boldreports.com/5.1.20/content/material/bold.reports.all.min.css" rel="stylesheet" />
         <link href="https://cdn.boldreports.com/5.1.20/content/material/bold.reportdesigner.min.css" rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
         <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
         <script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
         <script src="https://cdn.boldreports.com/external/jsrender.min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/vb/vb.min.js" type="text/javascript"></script>
 
         <!--Used to 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>
 
         <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>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/common/bold.report-designer-widgets.min.js"></script>
 
         <!--Used to 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" type="text/javascript"></script>
         <script src="https://cdn.boldreports.com/5.1.20/scripts/bold.report-designer.min.js" type="text/javascript"></script>

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

      </head>
      <body>
         <div style="height: 600px; width: 950px;">
               <!-- Creating a div tag which will act as a container for boldReportDesigner widget.-->
               <div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div>
               <script type="text/javascript">
                  window.addEventListener('load', function(ev) {
                     $(function () {
                        $("#designer").boldReportDesigner({
                           serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI",
                        });
                     });
                  });
               </script>
         </div>
      </body>
   </html>

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

ReportDesigner.zip

Was this article useful?

Dislike

Comments (0)

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

Prerequisites

Creating a Flutter project

Access denied