Blazor Reporting — Upcoming Features (v22.2) — Report Viewer for WebAssembly (ASP.NET Core Hosted)

As you may already know, DevExpress Reports has been part of our Blazor distribution for a couple of years. Blazor-specific report components include our Blazor Report Viewer (unique because it is a native Blazor component) and two JavaScript-based Blazor server components: the DevExpress Document Viewer for Blazor (JS) and the DevExpress Report Designer for Blazor (JS).

Though our JS-based report components can be integrated into ASP.NET Core hosted Blazor WebAssembly applications (via JavaScript Interoperability), we decided to create new platform-specific components. Specifically, we decided to create Blazor WebAssemby wrappers for our JS-based controls to minimize implementation costs and reduce support inquiries.

The current DevExpress Reports distribution includes the following components: DxReportViewer, DxDocumentViewer and DxReportDesignercomponents. The new components will be named as follows:

• DxWasmDocumentViewer
• DxWasmReportDesigner

Our new WASM components will be delivered as part of the following Nuget package: DevExpress.Blazor.Reporting.JSBasedControls.WebAssembly. Like other DevExpress Blazor Report components, these new components will require a server backend (customizable via parameters and JavaScript function calls).

The benefit of the Reporting Blazor WASM components is the much easier integration of DevExpress Reports into existing Blazor WebAssembly (ASP.NET Core hosted) applications.

Integration Details

A DevExpress-powered Blazor WASM reporting application consists of a backend application that stores and processes reports/documents and a client application.

Backend App

An ASP.NET Core app that implements server-side controller actions for reporting components. For Report Designer, declare the GetReportDesignerModel method to set up the component and pass seralized client-side settings to a result model:

 public class CustomWebDocumentViewerController : WebDocumentViewerController {
     public CustomWebDocumentViewerController(IWebDocumentViewerMvcControllerService controllerService) : base(controllerService) {
     }
 }
    
public class CustomReportDesignerController : ReportDesignerController {
     public CustomReportDesignerController(IReportDesignerMvcControllerService controllerService) : base(controllerService) {
     }

     [HttpPost("[action]")]
     public object GetReportDesignerModel(
         [FromForm] string reportUrl,
         [FromForm] ReportDesignerOptionsBase options,
         [FromServices] IReportDesignerClientSideModelGenerator designerClientSideModelGenerator) {
         Dictionary dataSources = new Dictionary();
         SqlDataSource ds = new SqlDataSource("NWindConnectionString");
         dataSources.Add("sqlDataSource1", ds);
         
         ReportDesignerModel model;
         
         	if(string.IsNullOrEmpty(reportUrl))
                model = designerClientSideModelGenerator.GetModel(new XtraReport(), dataSources, "/DXXRD", "/DXXRDV", "/DXXQB");
            else
                model = designerClientSideModelGenerator.GetModel(reportUrl, dataSources, "/DXXRD", "/DXXRDV", "/DXXQB");
                
         model.WizardSettings.EnableSqlDataSource = true;
         model.Assign(options);
         
         var modelJsonScript = designerClientSideModelGenerator.GetJsonModelScript(model);
         return Content(modelJsonScript, "application/json");
     }
 }

Client App

A client application must specify Request Options - settings that specify how to process requests from the client component on the server side.

The following code declares the DxWasmDocumentViewer component on the page:

@page "/viewer"

<DxWasmDocumentViewer ReportUrl="Report1" Height="1000px" Width="100%">
	<DxDocumentViewerExportSettings UseSameTab=false></DxDocumentViewerExportSettings>
	<DxWasmDocumentViewerRequestOptions InvokeAction="DXXRDV"></DxWasmDocumentViewerRequestOptions>
</DxWasmDocumentViewer>

The Designer component needs a custom server action that returns a report model with all required report data, parameters, and settings. The following code declares the DxWasmReportDesigner component on the page:

@page "/designer"

<DxWasmReportDesigner ReportUrl="Report1" Height="1000px" Width="100%" AllowMDI="true">
	<DxWasmReportDesignerRequestOptions GetDesignerModelAction="DXXRD/GetReportDesignerModel">
	</DxWasmReportDesignerRequestOptions>
    <DxReportDesignerWizardSettings UseFullscreenWizard=false />
</DxWasmReportDesigner>

Your Feedback Matters

Please share your thoughts about v22.2-related plans described in this post (new Blazor WASM components).