In this blog, I am going to walk you through the following:
- How to create a JavaScript application
- How to load an already published SSRS RDL report from our Report Server into the JavaScript
The Report Server is a report management studio provided by Syncfusion that allows the user to create, manage, and share reports securely and easily. Bold Reports provides a built-in REST API service that helps you embed the Server’s reports.
Generate Personal Access Token from Report Server
For security reasons we need to generate the personal access token, first, you need to log into the Bold Reports Report Server.
You will be able to see the list of reports published in the Report Server.
To generate the personal token from Report Server
Click the user emoji icon in the left navigation bar, then click the user profile. You will be directed to the My Profile page.
Click Personal Access Token in the top panel.
On the personal access token page, click Generate Token. You will see the bearer token as displayed in the authentication token text box. A dialog is displayed to confirm you want to generate the personal access token. Click Yes.
Note: Store the authentication token somewhere safe. As soon as you navigate away from this page, we will not be able to retrieve or restore this authentication token. The generated token will expire in 7 days.
Steps to Create the HTML File
- HTML file creation.
- Create a new folder and name it.
- Open the folder in Visual Studio Code.
- Create a new basic HTML file, name it in the index, and type the code.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Report Designer first HTML page</title> </head> <body> </body> </html>
Reference Scripts and CSS
Directly reference the scripts and style sheets that are required to render the web Report Designer from CDN links.
Open the \Pages\Shared\_Layout.cshtml page and reference the scripts and styles, as shown in the following example code.
Replace the following code in your \Pages\Shared\_Layout.cshtml page <head> tag.
<link href="https://cdn.boldreports.com/4.2.52/content/material/bold.reports.all.min.css" rel="stylesheet"/> <link href="https://cdn.boldreports.com/4.2.54/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/4.2.54/scripts/common/ej2-base.min.js"></script> <script src="https://cdn.boldreports.com/4.2.54/scripts/common/ej2-data.min.js"></script> <script src="https://cdn.boldreports.com/4.2.54/scripts/common/ej2-pdf-export.min.js"></script> <script src="https://cdn.boldreports.com/4.2.54/scripts/common/ej2-svg-base.min.js"></script> <script src="https://cdn.boldreports.com/4.2.54/scripts/data-visualization/ej2-lineargauge.min.js"></script> <script src="https://cdn.boldreports.com/4.2.54/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/4.2.54/scripts/data-visualization/ej2-maps.min.js"></script> <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> <script src="https://cdn.boldreports.com/4.2.54/scripts/common/bold.reports.common.min.js"></script> <script src="https://cdn.boldreports.com/4.2.54/scripts/common/bold.reports.widgets.min.js"></script> <script src="https://cdn.boldreports.com/4.2.54/scripts/common/bold.report-designer-widgets.min.js"></script> <script src="https://cdn.boldreports.com/4.2.54/scripts/data-visualization/ej.chart.min.js"></script> <!-- Report component script--> <script src="https://cdn.boldreports.com/4.2.54/scripts/bold.report-viewer.min.js"></script> <script src="https://cdn.boldreports.com/4.2.54/scripts/bold.report-designer.min.js" type="text/javascript"></script>
Refer to Dependencies to learn more about the Report Designer’s dependent scripts and style sheets. Check out the documentation to learn more about how to render data visualization report items.
How to Add the Report Viewer in the JavaScript Application
Add the <div> element within the <body> section, which acts as a container for the boldReportViewer widget to render. Then, initialize the boldReportViewer widget within the script section, as shown in the following.
<div style="height: 600px; width: 950px;">
<!-- Creating a div tag which will act as a container for 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();
});
</script>
</div>Cloud reporting server
Generate a token with your user credentials and assign it to serviceAuthorizationToken. You can refer to the documentation here for how to generate the token using credentials.
<script type="text/javascript">
$(function () {
$("#designer").boldReportDesigner(
{
serviceAuthorizationToken: "<token>",
});
});
</script>You can refer to the documentation here for how to generate the token within an application.
Set the Report Server built-in ser78-0vice URL to the serviceUrl property. The serviceUrl property value is https://service.boldreports.com/api/Viewer.
<script type="text/javascript">
$(function () {
portServiceUrl: "https://service.boldreports.com/api/Viewer",
reportServerUrl:"https://acmecorp.boldreports.com/reporting/api"
serviceAuthorizationToken: "<token>",
reportPath: '/Sample Reports/Company Sales'
});
</script>Set the Report Server built-in server URL to the reportServerUrl property. The reportServerUrl property value should be in the format of https://<<Report server name>>/reporting/api/.
<script type="text/javascript">
$(function () {
reportServiceUrl: "https://service.boldreports.com/api/Viewer",
reportServerUrl:"https://acmecorp.boldreports.com/reporting/api"
serviceAuthorizationToken: "<token>",
reportPath: '/Sample Reports/Company Sales'
});</script>
Sales Order
Conclusion
Now that I have shown you how to load a report from the Report Server in JavaScript using Bold Reports, I hope you are comfortable with how to go about it.
Look at Bold Reports demo samples and the documentation site to learn more. If you have any questions, please post them in the comments section. You can also contact us through our contact page or if you already have an account, you can log in to ask your support question.
Bold Reports offers a 15-day free trial that does not require a credit card. We invite you to sign up and experience Bold Reports for yourself. Give it a try and let us know what you think!
