Use Parameter Values from the Standalone Report Parameters Panel (Blazor Server App)
- 4 minutes to read
Use the Standalone Report Parameters Panel to specify and process report parameters and export the report as a PDF file. In this tutorial, an additional Export button is added. When a user clicks this button, the parameter values from the standalone Parameters Panel are sent to the server for processing by the controller action.
Follow the steps bellow to implement this functionality in your application:
- Set up a JavaScript handler to serialize parameters.
- Initiate server communication for parameter application.
- Implement server-side actions to handle and export the report content.
To access parameter values, use a JavaScript function handler for a component callback.
#Prerequisites
- System Requirements for DevExpress Blazor Components
A ready-to-use DevExpress Blazor Server application with the Standalone Report Parameters Panel component.
If you do not have such an application, you can start with the following help topic: Add a Standalone Report Parameters Panel to a DevExpress Blazor Server Application.
#Add the BeforeRender Event Handler Function
Create a JavaScript file (reportingPanelCustomization.js) in the wwwroot/js folder and define a JavaScript function handler for a component callback.
The BeforeRender event handler adds custom Export buttons to the Parameters Panel. A custom function handles the button’s onClick event. This function serializes the parameters (JSReportParametersPanel.SerializeParametersState) and uses the fetch API to send the parameter information and a report identifier to the server. When the server returns binary data (PDF content), the function creates a temporary link and downloads the resulting PDF file.
Enable the panel’s showButtons property to display a predefined Reset and a custom Export buttons.
The following snippet shows the content of the reportingPanelCustomization.js file:
window.ReportingPanel = {
beforeRender: function (sender, e) {
const reportUrl = 'TestReport';
const panel = sender.GetParametersModel();
panel.showButtons = true;
panel.buttons.push({
text: 'Export',
onClick: () => {
const data = sender.SerializeParametersState();
fetch(`ExportWithParameters`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ serializedParameters: data, reportUrl: reportUrl })
})
.then(response => {
if (!response.ok) {
return response.text().then(text => {
alert(`Failed to export report due to server error`);
throw new Error(`${text}`);
});
}
return response.blob();
})
.then(blob => {
const timestamp = new Date().toISOString();
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${reportUrl}-${timestamp}.pdf`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
})
.catch(error => console.error('Error:', error));
}
});
}
};
Reference this JavaScript file in the application view/component page that contains the <body> section. Add the file path before the closing </body> tag. The file name depends on your application, for example, _Host.cshtml or App.razor.
<body>
<!---...--->
<script src="js/reportingPanelCustomization.js"></script>
</body>
#Specify the BeforeRender Callback
Add the DxReportParametersPanelCallbacks nested option for the Panel component and handle the BeforeRender event:
<DxReportParametersPanel ReportName="TestReport" Height="1000px" Width="650px" >
<DxReportParametersPanelCallbacks BeforeRender="ReportingPanel.beforeRender"></DxReportParametersPanelCallbacks>
</DxReportParametersPanel>
#Implement the Controller Action
Create a HomeController.cs file and define the ExportWithParameters controller action. This action is triggered when a user clicks the Export button. The server then generates a PDF document and sends it to the client as binary data.
The parameter data is sent to the ExportWithParameters controller action. In this action code, call the ApplyParametersStateAsync method to apply parameters to the report.
Once the report instance has all the necessary parameter values, it generates a document. Call the ExportToPdf method to create a PDF document from the report, and then pass the result to the client.
The following code snippet defines the ExportWithParameters controller action:
using DevExpress.XtraReports.Web.ParametersPanel;
using Microsoft.AspNetCore.Mvc;
public class HomeController : Controller {
[Route("ExportWithParameters")]
public async Task<IActionResult> ExportWithParameters(
[FromServices] IReportParametersSerializer reportParametersSerializer,
[FromServices] ILogger<HomeController> logger,
[FromBody] ExportData exportData) {
try {
var report = await reportParametersSerializer.ApplyParametersStateAsync(
exportData.reportUrl,exportData.serializedParameters);
var stream = new MemoryStream();
report.ExportToPdf(stream);
return File(stream.ToArray(), "application/pdf", $"{exportData.reportUrl}.pdf");
} catch (Exception ex) {
logger.LogError(ex,$"Export Error");
return StatusCode(500,$"Failed to export report due to server error");
}
}
public class ExportData {
public string? serializedParameters { get; set; }
public string? reportUrl { get; set; }
}
}
The PDF file is saved to the browser’s default download folder.
#Next Steps
You can modify the controller action to export a report to different formats and email the exported document. For more information, review the following help topic: Export Reports.
You can also use the DevExpress Office File API to edit the exported document on a server.