Specify Parameter Values in a React Reporting Application

• Sep 18, 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:

'use client';
import React from 'react'
import ReportViewer, { RequestOptions, Callbacks, DxReportViewerRef } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const viewerRef = React.useRef<DxReportViewerRef>(null);
  const onClick = () => viewerRef.current?.instance().ResetParameters();
  const onParametersReset = ({ args }: { args: any }) => {
    console.log("ParametersReset");
    console.log("Parameter " + args.Parameters[0].path + " is reset to " + args.Parameters[0].value);
  };
  const onParametersSubmitted = ({ args }: { args: any }) => {
    console.log("ParametersSubmitted");
    args.Parameters.forEach((parameter: any) => {
      console.log("Parameter " + parameter.Key + " value " + JSON.stringify(parameter.Value));
    });
  };
  const onParametersInitialized = ({ args }: { args: any }) => {
    console.log("ParametersInitialized");
    args.ActualParametersInfo.forEach((parameterModel: any) => {
      console.log("Parameter " + parameterModel.parameterDescriptor.name + " value " + JSON.stringify(parameterModel.parameterDescriptor.value));
    });
    args.ParametersModel['parameter1'] = 10;
    args.ShouldRequestParameters = false;
  };

  return (
    <>
      <button onClick={onClick}>Reset parameters</button>
      <ReportViewer ref={viewerRef} reportUrl="TestExportReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
        <Callbacks ParametersReset={onParametersReset} ParametersSubmitted={onParametersSubmitted} ParametersInitialized={onParametersInitialized} />
      </ReportViewer>
    </>
  )
}

export default App