How to Implement Dataset Filtering in a Bold Reports React Application

Bold Reports® lets users pass parameter values to a report so it can display all records by default or filter records dynamically. This is beneficial when a single report needs to provide both a comprehensive overview of all user details and a specific result for specific users, without the need to manage multiple reports in embedded applications.

Before You Begin

Create a report parameter named DepartmentID with the Text data type and enable Allow blank value (“”) so the application can send an empty value to display all records.
STRING_SPLIT requires SQL Server 2016 or later and database compatibility level 130 or higher.
TRIM requires SQL Server 2017 or later. If you use an earlier SQL Server version, replace TRIM(value) with a compatible whitespace-trimming expression.
Set up the Bold Reports React Report Viewer in your application.

Step-by-Step Instructions

Step 1: Configure the Dataset Query

Open the report in the Web Report Designer.
Navigate to the Data pane and create or edit a dataset.

In the Query Designer, switch to code view and use the following SQL Server query:

SELECT [HumanResources].[EmployeeDepartmentHistory].[EmployeeID],
       [HumanResources].[EmployeeDepartmentHistory].[DepartmentID],
       [HumanResources].[EmployeeDepartmentHistory].[ShiftID],
       [HumanResources].[EmployeeDepartmentHistory].[StartDate],
       [HumanResources].[EmployeeDepartmentHistory].[EndDate],
       [HumanResources].[EmployeeDepartmentHistory].[ModifiedDate]
FROM [HumanResources].[EmployeeDepartmentHistory]
WHERE
  (NULLIF(@DepartmentID, '') IS NULL)
  OR
  ([DepartmentID] IN (
    SELECT TRIM(value)
    FROM STRING_SPLIT(@DepartmentID, ',')
  ))

NULLIF(@DepartmentID, '') converts an empty string to NULL. When it is NULL, the first condition is true and the query returns all rows. Otherwise, STRING_SPLIT separates the comma-delimited IDs, and the IN condition returns rows whose DepartmentID is in that list.

Step 2: Pass Parameters from the React Application

Define reportParameters in your React app. The name must match the report parameter name.

Scenario A: Display All Records

Pass an empty string to the DepartmentID parameter:

const reportParameters = [{
  name: 'DepartmentID',
  labels: [''],
  values: [''],
  nullable: false
}];

Scenario B: Filter Specific Records

Pass the department IDs as a comma-separated string to filter for Departments 1 and 2:

const reportParameters = [{
  name: 'DepartmentID',
  labels: ['1,2'],
  values: ['1,2'],
  nullable: false
}];

Pass the array to the viewer through its parameters property:

<BoldReportViewerComponent
  id="reportviewer-container"
  reportServiceUrl="http://localhost:61376/reporting/reportservice/api/Viewer"
  reportServerUrl="http://localhost:61376/reporting/api/site/site1"
  reportPath="/Sample Reports/Employee Department History"
  parameters={reportParameters}
/>

The URLs and report path above are examples. Replace them with values for your Report Server and application.

Step 3: Add the Parameters to Your React App

The following App.js sample shows the parameter array wired to the viewer. Use the imports and package setup appropriate to your React Report Viewer installation.

import React from 'react';
import { BoldReportViewerComponent } from '@boldreports/react-reporting-components';
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Content/material/bold.theme.min.css';
import './App.css';

const reportParameters = [{
  name: 'DepartmentID',
  labels: [''],
  values: [''],
  nullable: false
}];

function App() {
  const viewerStyle = { height: '700px', width: '100%' };

  return (
    <div style={viewerStyle}>
      <BoldReportViewerComponent
        id="reportviewer-container"
        reportServiceUrl="http://localhost:61376/reporting/reportservice/api/Viewer"
        reportServerUrl="http://localhost:61376/reporting/api/site/site1"
        reportPath="/Sample Reports/Employee Department History"
        parameters={reportParameters}
      />
    </div>
  );
}

export default App;

To run the filtered scenario, replace the reportParameters values and labels with ['1,2'] as shown above.

Preview and Verify the Output

Run the React application and verify both scenarios.

Scenario A: No Filter Applied

When DepartmentID is an empty string, the query returns records across all departments.

Screenshot of the Bold Reports viewer in a React app displaying all employee records across all departments.

Scenario B: Filter Applied

When DepartmentID is set to "1,2", STRING_SPLIT separates the values and the query returns records for Departments 1 and 2.

Screenshot of the filtered report in React showing only records for Department IDs 1 and 2.

Download the sample application here for further reference.

Was this article useful?

Dislike

Comments (0)