Specify Parameter Values in a React Reporting Application

• Feb 02, 2024
• 2 minutes to read

Reports may contain parameters that allows you to control data displayed in a document. For more information on report parameters, review the following help topic: Use Report Parameters.

Use the Parameters Panel

To invoke the Preview Parameters panel, click the Parameters button on the Document Viewer side panel. This panel allows you to specify parameter values that apply when the document preview generation starts.

Use the parameter editor to specify a parameter value and click Submit. After changing current values, you can return original values by clicking Reset.

Use Client-Side Events

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

The following code sample handles the client-side ParametersInitialized event, initializes parameter values, and changes a parameter value in the editor when a user changes another parameter value:

App.js

import './App.css';
import { useEffect, useRef } from 'react';
import { DxReportViewer } from 'devexpress-reporting/dx-webdocumentviewer';
import * as ko from 'knockout';

const ReportViewer = () => {
  const reportUrl = ko.observable("TestReport");
  const viewerRef = useRef();
  const requestOptions = {
    host: "https://localhost:5001/",
    invokeAction: "DXXRDV"

  };

  let callbacks = {
    ParametersInitialized: function (s, e) {
      var paramName = e.ActualParametersInfo.filter(
        (x) => x.parameterDescriptor.name === "MyName"
      )[0];
      paramName.value="Brian";

      var booleanParam = e.ActualParametersInfo.filter(
        (x) => x.parameterDescriptor.name == "booleanParam"
      )[0];
      booleanParam.value = false;

      booleanParam && booleanParam.events.on('propertyChanged', (args) => {
        if(args.propertyName == 'value') {
        paramName.value = booleanParam.value ? "Brian AlMighty" : "Brian";
        }
      });
      e.Submit();
    },
    }

  useEffect(() => {
    const viewer = new DxReportViewer(viewerRef.current, { reportUrl, requestOptions, callbacks });
    viewer.render(); 
    return () => viewer.dispose();
  })
  return (<div ref={viewerRef}></div>);
}



function App() {
  return (<div style={{ width: "100%", height: "1000px" }}>
      <ReportViewer />
  </div>);
  }

export default App;

The following client-side events allow you to customize report parameters:

• ParametersInitialized
• ParametersSubmitted
• ParametersReset
• CustomizeParameterEditors
• CustomizeParameterLookUpSource

For more information on client-side events, review the following help topic: Client-Side Events in Reporting for React.