Load Bold Reports^® Report Server reports

You can embed the classic Report Designer with Bold Reports^® Report Server to 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 getting started with the classic Bold Report Designer, 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.

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. Hence create a file named globals.js 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';
//serviceWorker will show warning "unused".
//import * as serviceWorker from './serviceWorker';

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/13.1.26/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/data-visualization/ej2-circulargauge.min.js"></script>
<script src="https://cdn.boldreports.com/13.1.26/scripts/data-visualization/ej2-maps.min.js"></script>

Adding Report Designer component

The classic Bold Report Designer script and style files need to be imported, in order to run the Bold web designer. Hence, import the following files in 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;

Report Server Configuration to design the report

The Report Designer requires the serviceAuthorizationToken, serviceUrl and reportServerUrl to perform the API actions with Bold Report Server. You can provide the information from report server as like explained below,
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.

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="Designer" style={designerStyle}>
      <BoldReportDesignerComponent id="reportdesigner_container"
      serviceAuthorizationToken = {'bearer <server-token>'}>
      </BoldReportDesignerComponent>
      </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/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 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

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="Designer" style={designerStyle}>
      <BoldReportDesignerComponent id="reportdesigner_container"
      serviceAuthorizationToken = {'bearer <server-token>'}>
      </BoldReportDesignerComponent>
      </div>);
    }