How to Add Report Designer to a JavaScript Application

With our Bold Reports embedded platform, you can easily embed reporting components in your project to create, bind data to, view, and export pixel-perfect, paginated reports.

In this article, we’ll walk you through the integration of our JavaScript Report Designer component in a web app. It comes with a wide range of report items to transform data into meaningful information and quickly build business reports.

Prerequisites

Microsoft Visual Studio Code
A browser (Chrome, Edge, Firefox, etc.) Create the HTML File
To get started, create a new folder with the name js-report-designer.

Create a new folder for JavaScript

Open the folder in Visual Studio Code.
Create a new HTML file, name it html, and enter the following code snippet into it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>        
<title>Report Designer first HTML page</title>
</head>    
<body>    
</body>
</html>

Report Designer Index File

Reference the scripts and CSS
Reference the following scripts and style sheets in the tag as provided below.

<link href="https://cdn.boldreports.com/3.3.23/content/material/bold.reports.all.min.css" rel="stylesheet" />

<link href="https://cdn.boldreports.com/3.3.23/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/3.3.23/scripts/common/ej2-base.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/common/ej2-data.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/common/ej2-pdf-export.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/common/ej2-svg-base.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/data-visualization/ej2-lineargauge.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/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/3.3.23/scripts/data-visualization/ej2-maps.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/common/bold.reports.common.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/common/bold.reports.widgets.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/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/3.3.23/scripts/data-visualization/ej.chart.min.js"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/bold.report-viewer.min.js" type="text/javascript"></script>

<script src="https://cdn.boldreports.com/3.3.23/scripts/bold.report-designer.min.js" type="text/javascript"></script>

Reference the scripts and CSS

Purpose of the scripts and CSS
Let’s see the purposes of the required scripts and stylesheets that are required to render the web Report Designer.

bold.reports.all.min.cs- Includes the UI theme for the JavaScript reporting control.

bold.reportdesigner.min.css- Includes the UI theme to render the JavaScript Report Designer widget.

codemirror.min.css and show-hint.min.css -The Report Designer requires the CodeMirror styles to edit SQL queries and Visual Basic Code functions with syntax highlighting.

jQuery 3.5.1- Common jQuery script used to render JavaScript reporting widgets in the Report Designer control.

jsrender.min.js-Renders the template in the browser. JsRender is a powerful templating engine, highly extensible, and optimized for high-performance rendering without DOM dependency.

codemirror.min.js,show-hint.min.js,sql-hint.min.js,sql.min.js, and vb.min.js-The Report Designer requires these scripts to edit SQL queries and Visual Basic Code functions with syntax highlighting.
CodeMirror is a JavaScript component that provides a code editor in the browser.

ej2-base.min.js,ej2-data.min.js,ej2-pdf-export.min.js, andej2-svg-base.min.js-Renders the gauge item. Add this script only if your report contains the gauge report item.

ej2-lineargauge.min.js-Renders the linear gauge item. Add this script only if your report contains the linear gauge report item.

ej2-circulargauge.min.js- Renders the circular gauge item. Add this script only if your report contains the circular gauge report item.

ej2-maps.min.js-Renders the map item. Add this script only if your report contains the map report item.

ej.chart.min.js-Renders the chart item. Add this script only if your report contains the chart report item.

bold.reports.common.min.js,bold.reports.widgets.min.js,
bold.report-designer-widgets.min.js,bold.report-viewer.min.js, and bold.report-designer.min.js-Required to render the Report Designer.

Refer to the dependencies documentation to learn more details about the web Report Designer’s scripts and style sheet links.

Initialize Report Designer
Now, let’s see how to add the Report Designer widget in the client side.

Add the following div element and script within the

<body> tag.
<!-- 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">
$(function () {
$("#designer").boldReportDesigner();
});
</script>

The following highlighted div acts as a container for rendering the Report Designer widget.

Rendering the Report Designer widget

The following highlighted script tag is used to and initialize the Report Designer widget.

Initializing the Report Designer widget

Set the web API service

In Bold Reports, the report processing and rendering in-browser will be handled using a server-side web API and a client-side HTML page, respectively.
The web API service is hosted as an Azure web app.
The serviceUrl property specifies the report web API service URL.
To render the Report Designer, set the serviceUrl property of the Report Designer web API as follows. In this blog, a Bold Reports demo web API service link is used to render the designer. You can use your own web API service.

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

Property of ServiceURL

Save the file. To preview the report, open the html file in a browser.
The following figure shows the Report Designer loaded in the browser. From here, we can start creating stunning professional reports.

Report Designer page for JavaScript

By clicking the Save icon and then the Save option, a report definition file of the report will be automatically downloaded.

Save the Report in JavaScript Report Designer

Conclusion
In this blog, we learned how to integrate the Report Designer component in a JavaScript application. To explore further, check out our sample reports and documentation.

If you have any questions, please post them in the comments section below. You can also contact us through our contact page, or if you already have an account, you can log in to submit your question.

Bold Reports now comes with a 15-day free trial with no credit card information required. We welcome you to start a free trial and experience Bold Reports for yourself. Give it a try and let us know what you think!

Stay tuned to our official Twitter, Facebook, LinkedIn, Pinterest, and Instagram pages for announcements about upcoming releases.

Blog

How to Add Report Designer to a JavaScript Application

BarbraWeke

Join Our Newsletter. No Spam, Only the good stuff.

Related