Embedded
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

Embed Bold Reports Report Server Report

This section explains how to embed the Bold Reports Report Server reports in your React application. The Bold Reports Report Server contains built-in Web API service that allows you to display the reports in your application without creating a new web API. You need a React application configured with Bold Reports resources to do the following steps:

Prerequisites

Before getting started with the bold report viewer, make sure that your development environment includes the following commands.

  • Node JS (version 8.x or 10.x)
  • NPM (v3.x.x or higher)

Install the Create React App package

Create React App is a simple way to create single-page React application which provides a build setup with no configuration. To install the Create React App globally in your machine, run the following command in Command Prompt.

npm install create-react-app -g

To learn more about Create React App package refer here

Create a new React application

To create a new React application, run the following command in Command Prompt.

create-react-app reports

The create-react-app command adds the react, react-dom, react-scripts, and other dependencies required to your React application.

The source code for this React reporting components app is available on GitHub.

Install the Create React Class

To configure the Report Viewer component, change the directory to your applications’ root folder.

 cd reports

To install the type definitions for create-react-class, run the following command in Command Prompt.

npm install create-react-class --save

Install the Bold Reports React package

To install the Bold Reports React package, run the following command in Command Prompt.

npm install @boldreports/react-reporting-components --save

Adding scripts reference

Bold Reports needs window.jQuery object to render the React components. Hence create a file named globals.js in src folder and import jQuery in globals.js file as like the below code snippet.

import jquery from 'jquery';
import React from 'react';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';

window.React = React;
window.createReactClass = createReactClass;
window.ReactDOM = ReactDOM;
window.$ = window.jQuery = jquery;

Refer the globals.js file in index.js file as like below code snippet.

import './globals'
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Open the public\index.html and refer the following scripts in <head> tag.

<!-- Data-Visualization -->
<script src="https://cdn.boldreports.com/6.3.24/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.24/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

Adding Report Viewer component

The Bold Report Viewer script and style files need to be imported, in order to run the web Report Viewer. Hence, import the following files in App.js file.

/* eslint-disable */
import React from 'react';
import './App.css';
//Report Viewer source
import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-viewer.min.css';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
//Reports react base
import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';
var viewerStyle = {'height': '700px', 'width': '100%'};

function App() {
  return (
    <div style={viewerStyle}>
      <BoldReportViewerComponent
      id="reportviewer-container">
      </BoldReportViewerComponent>
    </div>
  );
}

export default App;

Report Server Configuration to render the report

Report Viewer requires the serviceAuthorizationToken, reportPath and reportServiceUrl to embed the reports. You can provide the information from report server as like explained below,

  • reportServiceUrl – Report Server Reporting Service information should be provided for this API.
  • reportServerUrl- Report Server Reporting Server information should be provided for this API.
  • serviceAuthorizationToken – Authorization token to communicate with reportServiceUrl.
  • reportPath - Path of report need to formed with information for category and report name as like /{category name}/{report name}

If you need to know the difference between reportServiceUrl and reportServerUrl, refer to the Difference between Report Service URL and Report Server URL.

You can follow one of the procedure from below based on your Report Server type,

Enterprise Reporting Server

  • Generate token with your user credentials and assign it to serviceAuthorizationToken. You can refer to the documentation here, to generate the token by using credentials.

        function App() {
      return (<div id="viewer" style={viewerStyle}>
      <BoldReportViewerComponent id="reportviewer-container"
      serviceAuthorizationToken = {'bearer <server token>'}>
      </BoldReportViewerComponent>
      </div>);
    }

    You can refer to the documentation here on how to generate the token within an application.

  • Set the Bold Report Server built-in service URL to the serviceUrl property. The serviceUrl property value should be in format of https://<<Report server name>>/reporting/reportservice/api/Viewer.

        function App() {
      return (<div id="viewer" style={viewerStyle}>
      <BoldReportViewerComponent id="reportviewer-container"
      reportServiceUrl = {'https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer'}
      serviceAuthorizationToken = {'bearer <server token>'}>
      </BoldReportViewerComponent>
      </div>);
    }

  • Set the Bold Report Server built-in server URL to the reportServerUrl property. The reportServerUrl property value should be in format of https://<<Report server name>>/reporting/api/site/<<site name>>.

        function App() {
      return (<div id="viewer" style={viewerStyle}>
      <BoldReportViewerComponent id="reportviewer-container"
      reportServiceUrl = {'https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer'}
      reportServerUrl= {'https://on-premise-demo.boldreports.com/reporting/api/site/site1' }
      serviceAuthorizationToken = {'bearer <server token>'}>
      </BoldReportViewerComponent>
      </div>);
    }

  • Set the path of report in reportPath property.

        function App() {
      return (<div id="viewer" style={viewerStyle}>
      <BoldReportViewerComponent id="reportviewer-container"
      reportServiceUrl = {'https://on-premise-demo.boldreports.com/reporting/reportservice/api/Viewer'}
      reportServerUrl= {'https://on-premise-demo.boldreports.com/reporting/api/site/site1' }
      serviceAuthorizationToken = {'bearer <server token>'}
      reportPath = {'/Sample Reports/Product Line Sales'}>
      </BoldReportViewerComponent>
      </div>);
    }

Cloud Reporting server

  • Generate token with your user credentials and assign it to serviceAuthorizationToken. You can refer the documentation here, to generate the token by using credentials.

        function App() {
      return (<div id="viewer" style={viewerStyle}>
      <BoldReportViewerComponent id="reportviewer-container"
      serviceAuthorizationToken = {'bearer <server token>'}>
      </BoldReportViewerComponent>
      </div>);
    }

    You can refer to the documentation here on how to generate the token within an application.

  • Set the Bold Report Server built-in service URL to the reportServiceUrl property. The reportServiceUrl property value is a https://service.boldreports.com/api/Viewer.

        function App() {
      return (<div id="viewer" style={viewerStyle}>
      <BoldReportViewerComponent id="reportviewer-container"
      reportServiceUrl = {'https://service.boldreports.com/api/Viewer'}
      serviceAuthorizationToken = {'bearer <server token>'}
      reportPath = {'/Sample Reports/Product Line Sales'}>
      </BoldReportViewerComponent>
      </div>);
    }

  • Set the Bold Report Server built-in server URL to the reportServerUrl property. The reportServerUrl property value should be in format of https://<<Report server name>>/reporting/api/.

        function App() {
      return (<div id="viewer" style={viewerStyle}>
      <BoldReportViewerComponent id="reportviewer-container"
      reportServiceUrl = {'https://service.boldreports.com/api/Viewer'}
      reportServerUrl= {'https://acmecorp.boldreports.com/reporting/api/'}
      serviceAuthorizationToken = {'bearer <server token>'}
      reportPath = {'/Sample Reports/Product Line Sales'}>
      </BoldReportViewerComponent>
      </div>);
    }

  • Set the path of report in reportPath property.

        function App() {
      return (<div id="viewer" style={viewerStyle}>
      <BoldReportViewerComponent id="reportviewer-container"
      reportServiceUrl = {'https://service.boldreports.com/api/Viewer'}
      reportServerUrl= {'https://acmecorp.boldreports.com/reporting/api/'}
      serviceAuthorizationToken = {'bearer <server token>'}
      reportPath = {'/Sample Reports/Product Line Sales'}>
      </BoldReportViewerComponent>
      </div>);
    }

  • Navigate to the root of the application and run using the following command.

  npm run start