Embed Bold Reports^® Report Server Report

To embed Bold Reports^® Report Server reports in the React Report Viewer, set the service URL, server URL, report path, and authorization token of your Report Server, without creating a new Web API service. The Bold Reports^® Report Server contains a 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 you embed Report Server reports in the Bold Reports^® React Report Viewer, make sure that your development environment includes the following:

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 the Create React App package, refer to the Create React App documentation.

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.

Install the Create React Class

To configure the Report Viewer component, change the directory to your application’s 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 the src folder and import jQuery in the globals.js file, as in the following 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 to the globals.js file in the index.js file, as in the following 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 file and refer to the following scripts in the <head> tag.

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

Adding Report Viewer component

To run the Bold Reports^® React Report Viewer, import the following Report Viewer script and style files in the 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;

How do I configure the Report Server to render a report?

To render a Bold Reports^® Report Server report, the React Report Viewer requires the serviceAuthorizationToken, reportPath and reportServiceUrl to embed the reports. Provide the following information from your Report Server:

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 the report, formed from the category and report name, as in /{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.

Follow one of these procedures based on your Report Server type:

Enterprise Reporting Server

Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, see how to generate an access token for Bold Reports^® Report Server.
```
    function App() {
      return (<div id="viewer" style={viewerStyle}>
      <BoldReportViewerComponent id="reportviewer-container"
      serviceAuthorizationToken = {'bearer <server token>'}>
      </BoldReportViewerComponent>
      </div>);
    }
```
To generate the token within an application, see how to generate an access token for a Bold Reports^® Report Server user.

Set the Bold Reports^® 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 Reports^® 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. To generate the token by using credentials, see how to generate an access token in Bold Reports^® Cloud.

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

To generate the token within an application, see how to generate an access token for a Bold Reports^® Cloud user.

Set the Bold Reports^® 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>);
    }

    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>);
    }