xtrareports-404893-web-reporting-angular-reporting-standalone-parameters-panel-standalone-parameters-panel-angular.md
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.
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 by eliminating the need to generate report preview and sending it 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.
The application is based on a backend server project and includes an Angular client part.
For information on how to create a backend part, review the corresponding section in the ASP.NET Core Project tutorial: Configure the Server Part (Backend)
Start with an Angular application. You can create a new Angular app from a template:
Change your current directory to the project root folder and install the following packages:
Create the Standalone Report Parameters Panel component and template files with the following content:
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.
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.
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.invokeActionSpecifies 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.hostThe back-end application’s URL.
The following types and members implement client-side Standalone Report Parameters Panel functionality:
JSReportParametersPanelA class that triggers events for the Standalone Report Parameters Panel and serves as the sender in callback functions.JSReportParametersPanel.GetParametersModelAllows you to access the report parameters client-side model.JSReportParametersPanel.SerializeParametersStateSerializes parameter information from the Standalone Report Parameters Panel to a JSON string.ParametersPanelModelBaseA base class that defines common properties and methods for client models of report parameters.ParametersPanelStandaloneClient-side model for the Standalone Report Parameters Panel component.
The component events (callbacks) are defined using ReportParametersPanelClientSideEventsBuilder methods:
Classes related to the server-side model:
IReportParametersPanelClientSideModelGeneratorA class used to generate a client-side model for the Standalone Report Parameters Panel component.ReportParametersPanelModelA 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:
IReportParametersSerializerDefines methods that enable you to deserialize parameters received from the Standalone Report Parameters Panel component and apply parameters to a report instance.
ParameterPanelFluentBuilderContains methods that allow you to customize the Parameters panel. See Also
Example: Reporting for ASP.NET Core - Standalone Report Parameters Panel