Search results

Load Bold Reports Report Server reports

You can embed the 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:

Follow this steps to integrate Report Server with Bold Reports Designer version less than v5.2.xx

Prerequisites

Before getting started with the 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 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'));

Adding Report Designer component

The 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 component styles
import '@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css';
//Report Designer component dependent scripts
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';
//Report Viewer and Designer component scripts
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.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://on-premise-demo.boldreports.com/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://on-premise-demo.boldreports.com/reporting/reportservice/api/Designer'}
      reportServerUrl = {'https://on-premise-demo.boldreports.com/reporting/api/site/site1'}
      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>);
    }

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 is a https://service.boldreports.com/api/Designer.

    function App() {
      return (<div id="Designer" style={designerStyle}>
      <BoldReportDesignerComponent id="reportdesigner_container"
      serviceUrl = {'https://service.boldreports.com/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/.

    function App() {
      return (<div id="Designer" style={designerStyle}>
      <BoldReportDesignerComponent id="reportdesigner_container"
      serviceUrl = {'https://service.boldreports.com/api/Designer'}
      reportServerUrl = {'https://acmecorp.boldreports.com/reporting/api/'}
      serviceAuthorizationToken = {'bearer <server token>'}>
      </BoldReportDesignerComponent>
      </div>);
    }

Navigate to the root of the application and run using the following command.
```
      npm run start
```

Contents

Prerequisites
Install the Create React App package
Create a new React application
Install the Create React Class
Install the Bold Reports React package
Adding scripts reference
Adding Report Designer component
Report Server Configuration to design the report
Enterprise Reporting Server
Cloud Reporting server

Having trouble getting help?Contact Support

Contents

Prerequisites
Install the Create React App package
Create a new React application
Install the Create React Class
Install the Bold Reports React package
Adding scripts reference
Adding Report Designer component
Report Server Configuration to design the report
Enterprise Reporting Server
Cloud Reporting server

Having trouble getting help?Contact Support

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!