Load Bold Reports^® Report Server reports

To embed the classic Bold Reports^® React Report Designer with Bold Reports^® Report Server, set the serviceAuthorizationToken, serviceUrl and reportServerUrl properties. You can then create, edit, browse and publish reports using the Report Server built-in Web API service. You need a React application configured with Bold Reports^® resources to do the following steps.

Prerequisites

Before you get started with the classic Bold Reports^® Report Designer, 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, see 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 classic Report Designer 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. Create a file named globals.js 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 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';
//serviceWorker will show warning "unused".
//import * as serviceWorker from './serviceWorker';

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

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

<!-- Data-Visualization -->
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-circulargauge.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-maps.min.js"></script>

Adding Report Designer component

To run the classic Bold Reports^® Report Designer, import the following Report Designer script and style files in the App.js file.

/* eslint-disable */
import React from 'react';
import './App.css';
//Report designer source
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min';
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reportdesigner.min.css';
//Data-Visualization
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min';
//Reports react base
import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';

var designerStyle = {
  'height': '700px',
  'width': '100%'
};

function App() {
  return (
    <div style={designerStyle}>
            <BoldReportDesignerComponent
            id="reportdesigner_container">
            </BoldReportDesignerComponent>
    </div>
  );
}

export default App;

How do I configure Report Server for the classic Report Designer?

To configure Bold Reports^® Report Server for the classic React Report Designer, set the serviceUrl, serviceAuthorizationToken and reportServerUrl values from your Report Server.

The Report Designer requires the serviceAuthorizationToken, serviceUrl and reportServerUrl to perform the API actions with Bold Reports^® Report Server. You can provide the information from Report Server as follows:
serviceUrl – Report Server Reporting Service information should be provided for this API.
serviceAuthorizationToken – Authorization token to communicate with reportServiceUrl.
reportServerUrl- Report Server Reporting Server information should be provided for this API.

Based on your Report Server type, you can follow one of the procedures listed as follows:

Enterprise Reporting Server

Generate token with your user credentials and assign it to serviceAuthorizationToken. To generate the token by using credentials, see Generate an authentication token using credentials.

    function App() {
      return (<div id="Designer" style={designerStyle}>
      <BoldReportDesignerComponent id="reportdesigner_container"
      serviceAuthorizationToken = {'bearer <server-token>'}>
      </BoldReportDesignerComponent>
      </div>);
    }

To generate the token within an application, see Generate an authentication token by using the embed secret key API.

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/Designer.

    function App() {
      return (<div id="Designer" style={designerStyle}>
      <BoldReportDesignerComponent id="reportdesigner_container"
      serviceUrl = {'https://<your-report-server-domain>/reporting/reportservice/api/Designer'}
      serviceAuthorizationToken = {'bearer <server-token>'}>
      </BoldReportDesignerComponent>
      </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>>. You can use the following complete code in App.js file.

    function App() {
      return (<div id="Designer" style={designerStyle}>
      <BoldReportDesignerComponent id="reportdesigner_container"
      serviceUrl = {'https://<your-report-server-domain>/reporting/reportservice/api/Designer'}
      reportServerUrl = {'https://<your-report-server-domain>/reporting/api/site/<site-name>'}
      serviceAuthorizationToken = {'bearer <server-token>'}>
      </BoldReportDesignerComponent>
      </div>);
    }

Cloud Reporting server