Specify Parameter Values in a React Reporting Application

• Jun 06, 2024
• 2 minutes to read

Use report parameters to control data displayed in a report. For more information on web report parameters, review the following help topic: Use Report Parameters.

Use the Parameters Panel

Open the Parameters Panel and use its editors to specify parameter values. Click Submit to apply the values to the report and display the document.

Handle the ParametersInitialized Event

You can initialize parameters before the Document Viewer loads the document.

The following code sample handles the client-side ParametersInitialized event to do the following:

1. Initialize values of a visible and invisible parameter before the viewer loads the document.
2. Change a parameter value in the panel’s editor when a user assigns a value to another parameter:

'use client';
import React from 'react';
import ReportViewer, { RequestOptions, Callbacks } from 'devexpress-reporting-react/dx-report-viewer';
import 'devextreme/dist/css/dx.light.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
import 'devexpress-reporting/dist/css/dx-webdocumentviewer.css';

function App() {
  const onParametersInitialized = ({ args }: { args: any }): void => {
        // Specify an invisible integer parameter's value on viewer initialization.
        var invisibleIntParamValue = 42;
        var intParam = args.ActualParametersInfo.filter(
            (x: any) => x.parameterDescriptor.name == "intParam")[0];
        intParam.value = invisibleIntParamValue;

        // Specify a visible Boolean parameter's value on viewer initialization.
        var visibleBooleanParamValue = true;
        var booleanParam = args.ActualParametersInfo.filter(
            (x: any) => x.parameterDescriptor.name == "booleanParam")[0];
        booleanParam.value = visibleBooleanParamValue;

        // Update a string parameter value when a user changes the Boolean parameter value.
        var strParam = args.ActualParametersInfo.filter(
            (x: any) => x.parameterDescriptor.name == "strParam")[0];

        booleanParam && booleanParam.events.on('propertyChanged', (args: any) => {
            if (args.propertyName === 'value') {
                strParam.value = args.newVal.toString();
            }
        });

        intParam & booleanParam & strParam && args.Submit();
  }
  return (
    <ReportViewer reportUrl="TestReport">
      <RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" />
      <Callbacks ParametersInitialized={onParametersInitialized} />
    </ReportViewer>        
  )
}

export default App