Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Standalone Report Parameters Panel in React Applications

  • 5 minutes to read

The Standalone Report Parameters Panel is a component that creates a layout with editors for report parameters. It retrieves information on report parameters from a DevExpress report instance passed from the backend.

Standalone Report Parameters Panel

Use this component to programmatically create a report, then export or email it without showing a preview to the end user. The component reduces memory usage because it eliminates the need to generate report images in the background and send them to the client application.

The Standalone Report Parameters Panel component is based on the Parameters Panel of the DevExpress Web Report Viewer component. Public properties and events are similar to the properties and events implemented in the Web Document Viewer component.

#Add a Standalone Report Parameters Panel to Your Application

The application is based on a backend server project and includes a React client part.

#Backend Part (ASP.NET Core)

For information on how to create the backend, review the corresponding section in the ASP.NET Core tutorial: Configure the Server Part (Backend).

#Client Part (React Application)

  1. Start with a React application. You can create a new React app from a template:

    console
    npm create vite@latest react-parameters-panel -- --template react-ts
    
  2. Navigate to the project folder:

    cmd
    cd react-parameters-panel
    
  3. Install the devexpress-reporting-react package:

    console
    npm install devexpress-reporting-react@24.2-stable
    

    Note

    Front-end and back-end applications should use the same version of DevExpress controls.

  4. Open the src/App.tsx file and replace its contents with the following code snippet:

    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';
    import DxParametersPanel from "devexpress-reporting-react/dx-report-viewer/dx-parameters-panel";
    import {RequestOptions, Callbacks} from "devexpress-reporting-react/dx-report-viewer/dx-parameters-panel";
    
    function App() {
    
        const host = 'https://localhost:44336/';
        const invokeAction = 'DXXRDV';
        const reportUrl = 'TestReport';
    
        const customizeButtons = (event: any) => {
            const sender = event.sender;
            const panel = sender.GetParametersModel();
            (window as any)['parametersPanel'] = panel;
            panel.buttons.push({
                text: 'Export',
                onClick: () => {
                    const data = sender.SerializeParametersState();
                    fetch(`${host}Home/ExportWithParameters`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ serializedParameters: data, reportUrl: reportUrl })
                    })
                    .then(response => response.json())
                    .then(result => alert(result.message))
                    .catch(error => console.error('Export error:', error));
                }
            });
            panel.showButtons = true;
        }
    
    return (
    
        <DxParametersPanel reportUrl={reportUrl} height="600px" width="500px" >
            <RequestOptions host={host} invokeAction={invokeAction} />
            <Callbacks BeforeRender={customizeButtons} />
        </DxParametersPanel>     
    )
    }
    
    export default App
    

    This code snippet declares the DxParametersPanel component and returns it with the App function. Specify the correct server-side port (the host variable) and report name (the reportUrl variable).

  5. Remove default project styles to avoid conflicts. To do this, remove the index.css import in the main.tsx file.

When a user clicks the Export button, a request to the controller action is executed, and the resulting PDF file is sent to the client.

Standalone Report Parameters Panel with Buttons

#Implement the Controller Action

The client’s parameter data is sent to the ExportWithParameters controller action. In this action, call the ApplyParametersStateAsync method to apply parameters to the report.

Once the report instance has all the necessary parameter values, it is ready to generate a document. Call the ExportToPdf method to create a PDF document from the report.

using DevExpress.XtraReports.Web.ParametersPanel;
using Microsoft.AspNetCore.Mvc;
// ...
public class HomeController : Controller {
    public async Task<IActionResult> ExportWithParameters(
    [FromServices] IReportParametersSerializer reportParametersSerializer,
    [FromServices] IWebHostEnvironment env,
    [FromBody] ExportData exportData) {
        var report = await reportParametersSerializer.ApplyParametersStateAsync(exportData.reportUrl,
            exportData.serializedParameters);
        string timestamp = DateTime.Now.ToString("yyyyMMdd_HHmmss");
        string fileDir = Path.Combine(env.ContentRootPath,"Reports");
        if (!Directory.Exists(fileDir)) {
            Directory.CreateDirectory(fileDir);
        }
        report.ExportToPdf(Path.Combine(fileDir,$"{exportData.reportUrl}_{timestamp}.pdf"));
        return Ok(new { message = "The report " + " is exported successfully to " + fileDir });
    }
}

public class ExportData {
    public string serializedParameters { get; set; }
    public string reportUrl { get; set; }
}

The PDF file is saved to the project’s Reports folder.

#Standalone Report Parameters Panel Component Settings

The following component settings are critical for component integration:

reportUrl
A string that identifies a report. This string is passed to server-side report name resolution services. You can create a ReportStorageWebExtension or IReportProvider descendant, and register it in your back-end application as a custom report name resolution service. For more information, review the following help topic: Open a Report in ASP.NET Core Application.
invokeAction
Specifies a route to the controller that handles requests in your back-end application. A controller with the DXXRDV route is an internal MVC controller that is added to the back-end application when the methods AddDevExpressControls and UseDevExpressControls are called in the Startup.cs file. You can implement a WebDocumentViewerController descendant and register it as a controller with a custom route. To see a code sample, review the following help topic: ASP.NET Core and Angular Reporting Best Practices.
host
The back-end application’s URL.

#Standalone Report Parameters Panel API

#Client-Side API

The following types and members implement client-side Standalone Report Parameters Panel functionality:

JSReportParametersPanel
A class that triggers events for the Standalone Report Parameters Panel and serves as the sender in callback functions.
JSReportParametersPanel.GetParametersModel
Allows you to access the report parameters client-side model.
JSReportParametersPanel.SerializeParametersState
Serializes parameter information from the Standalone Report Parameters Panel to a JSON string.
ParametersPanelModelBase
A base class that defines common properties and methods for client models of report parameters.
ParametersPanelStandalone
Client-side model for the Standalone Report Parameters Panel component.

#Server API

The component events (callbacks) are defined using ReportParametersPanelClientSideEventsBuilder methods:

Classes related to the server-side model:

IReportParametersPanelClientSideModelGenerator
A class used to generate a client-side model for the Standalone Report Parameters Panel component.
ReportParametersPanelModel
A class that is the server-side model for the Standalone Report Parameters Panel.

This service allows you to pass a string obtained from the client’s SerializeParametersState method. The return object is a report instance with the applied parameters:

IReportParametersSerializer
Defines methods that enable you to deserialize parameters received from the Standalone Report Parameters Panel component and apply parameters to a report instance.

#Panel Builder

ParameterPanelFluentBuilder
Contains methods that allow you to customize the Parameters panel.
See Also