Add Web Report Designer with Typescript React application

To add the Bold Reports^® React Report Designer version higher than v5.2.xx to a TypeScript React application, install the Bold Reports^® React package and typings, import the Report Designer scripts and styles, and set a Web API service URL. Use the following steps.

What do I need before adding the Report Designer to a React TypeScript app?

To add the Bold Reports^® Report Designer to a React TypeScript app, your development environment needs Node JS (version 8.x or 10.x) and NPM (v3.x.x or higher).

Before you get started with the Bold Reports^® Report Designer, make sure 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 Typescript Application

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

create-react-app reports --template typescript

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

Install 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
npm install @types/create-react-class --save

Install Bold Reports^® React package

Run the following commands to install the Bold Reports^® React library.

Note: Using the latest package with React 16 may cause compilation issues. Make sure to install the correct version to avoid problems.

Install JQuery package

To install the jQuery package, run the following command in Command Prompt.

npm install @types/jquery --save

Install and Integrate Bold Reports^® Typings

Install the Bold Reports^® typings by executing the following command.

npm install --save-dev @boldreports/types

In your tsconfig.json file, add the @bold-reports/types under the typeRoots and include jquery and reports.all in the types array.

    {
      "compilerOptions": {
        ...
        ...
        "typeRoots": [
          "node_modules/@types",
          "node_modules/@boldreports/types"
        ],
        "types": [
          "jquery",
          "reports.all"
        ]
      },
      ...
      ...
    }

Adding Scripts reference

Bold Reports^® needs window.jQuery object to render the React components. Create a file named globals.ts and import jQuery in the globals.ts 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 as any).React = React;
(window as any).createReactClass = createReactClass;
(window as any).ReactDOM = ReactDOM;
(window as any).$ = (window as any).jQuery = jquery;

Refer the globals.ts file in the index.tsx 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'));

import './globals';
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

How do I add the Report Designer component to a React TypeScript app?

You add the Bold Reports^® Report Designer component to a React TypeScript app by importing the Report Designer script and style files into the App.tsx file.

To run the Bold Reports^® Report Designer, import the following Report Designer script and style files in the App.tsx 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';
declare let BoldReportDesignerComponent: any;

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

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

export default App;

Create Web API service

The Bold Reports^® React Report Designer requires a Web API service to process the data and file actions. You can skip this step and use our online Web API service at https://demos.boldreports.com/services/api/ReportingAPI to create, edit, and browse reports. Otherwise, create one of the following Web API services.

• ASP.NET Web API Service
• ASP.NET Core Web API Service

Set Web API service URL

To set the Web API service, open the app.component.ts file and add the following code snippet in the constructor.

/* 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';
declare let BoldReportDesignerComponent: any;

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

function App() {
  return (
   <div style={designerStyle}>
   <BoldReportDesignerComponent
   id="reportdesigner_container"
   serviceUrl={'https://demos.boldreports.com/services/api/ReportingAPI'}>
   </BoldReportDesignerComponent>
   </div>
  );
}

export default App;

Run the Application

To run the application, run the following command in the command prompt.

npm run start

If you get an error like 'BoldReportDesignerComponent' is not defined when you run the previous command, declare the BoldReportDesignerComponent by adding the line declare let BoldReportDesignerComponent: any after import section in the App.tsx.

The npm run start command automatically opens your browser to http://localhost:3000/

Deploying the application in production

To deploy the application in production, generate the build files. Run the following command in the command prompt. The command creates a folder named build that contains the build files.

npm run build

Frequently asked questions

Which npm package does the React Report Designer need?

The Bold Reports^® React Report Designer needs the @boldreports/react-reporting-components package. Install the latest version for React versions greater than 16, and version 5.3.8 for React 16 or earlier.

Do I need to create my own Web API service?

No. You can use the online Web API service at https://demos.boldreports.com/services/api/ReportingAPI to create, edit, and browse reports, or create an ASP.NET or ASP.NET Core Web API service.

How do I fix the ‘BoldReportDesignerComponent’ is not defined error?

To fix the error in a TypeScript React application, add the line declare let BoldReportDesignerComponent: any after the import section in the App.tsx file.