Specify Parameter Values in a React Reporting Application
- 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>();
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