How to embed BoldReports Server reports in a web application?
Bold Report Server provides a built-in Web API service that helps you to easily embed the reports into your web application. To embed the reports, you need to set the serviceAuthorizationToken
, reportPath
, and reportServiceUrl
.
Based on your Report Server type, you can follow one of the procedures below.
Enterprise Reporting - Report Server
You need to generate a token with your user credentials and assign it to
serviceAuthorizationToken
. You can refer to the documentation here to generate the token using credentials.You need to set the Bold Report Server built-in service URL to the
reportServiceUrl
property. ThereportServiceUrl
property value should be in the format ofhttps://<<Report server name>>/reporting/reportservice/api/Viewer
.You need to set the Bold Report Server built-in server URL to the
reportServerUrl
property. ThereportServerUrl
property value should be in the format ofhttps://<<Report server name>>/reporting/api/site/<<site name>>
.You need to set the path of a report in the
reportPath
property.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer(
{
reportServiceUrl: "https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer",
reportServerUrl:"https://on-premise-demo.boldreports.com/reporting/api/site/site1",
serviceAuthorizationToken: "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw",
reportPath: '/Sample Reports/Company Sales'
}
);
});
</script>
Cloud Report Server
You need to generate a token with your user credentials and assign it to
serviceAuthorizationToken
. You can refer to the documentation here to generate the token using credentials.You need to set the Bold Report Server built-in service URL to the
reportServiceUrl
property. ThereportServiceUrl
property value ishttps://service.boldreports.com/api/Viewer
.You need to set the Bold Report Server built-in server URL to the
reportServerUrl
property. ThereportServerUrl
property value should be in the format ofhttps://<<Report server name>>/reporting/api/
.You need to set the path of a report in the
reportPath
property.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer(
{
reportServiceUrl: "https://service.boldreports.com/api/Viewer",
reportServerUrl:"https://acmecorp.boldreports.com/reporting/api"
serviceAuthorizationToken: "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imd1ZXN0QGJvbGRyZXBvcnRzLmNvbSIsIm5hbWVpZCI6IjIiLCJ1bmlxdWVfbmFtZSI6IjNmNWJlNDdkLTA3ZjctNDU2MS04OTYzLWUzYjFlMzRlOTIwOSIsIklQIjoiMTAzLjE0MS41MS40MiIsImlzc3VlZF9kYXRlIjoiMTYzNDE0NDMzNSIsIm5iZiI6MTYzNDE0NDMzNSwiZXhw",
reportPath: '/Sample Reports/Company Sales'
}
);
});
</script>