Reporting — New Native Report Viewer for Blazor Server (Available in v21.1)

Reporting Team Blog
27 July 2021

As you may already know, we recently released a native Report Viewer component for the Blazor Server platform. Powered by our core reporting engine, our new Blazor Report Viewer has no JavaScript dependencies and utilizes components from our own Blazor product line. It is based on the Blazor Server hosting model and allows you to use C# code to apply customization options to the Viewer itself. This post summarizes some of the capabilities available to you in this release.

Blazor Report Viewer: Key Benefits

Our Blazor Report Viewer component ships with the following key Blazor-related technologies/capabilities:

  • Pure C# implementation: You don’t have to concern yourself with JavaScript when customizing component behavior and associated user experiences.
  • Improved performance: Native implementation reduces load time and increases page navigation speed when compared to JavaScript wrapper based reporting tools.
  • UI Consistency: Our Blazor Report Viewer supports all DevExpress Blazor themes.
  • Seamless four-step integration into existing Blazor apps (see below).

Blazor Report Viewer: A Brief Overview

The first release of our Blazor Report Viewer includes:

  • Toolbar support
    • Page Navigation
    • Editing Fields Toggle
    • Zoom
    • Printing
    • Exporting
    • Document Creation Progress Indicator
  • Parameters Panel
  • Document Editing

If you have yet to explore our online Blazor Reporting demos, here’s a screenshot of the DevExpress Report Viewer in action:

blazor-native-report-viewer

In our next major update (v21.2), we will extend the capabilities of our Blazor Report Viewer with the following features (and deliver feature parity with our HTML5 Document Viewer):

  • Export Options Panel
  • Search Panel
  • Document Map Panel
  • Ability to resize panels
  • MultiPage View Mode

How To Get Started

If you use the DevExpress Blazor project template, it will take four simple steps to add our Blazor Report Viewer to your page:

  1. Install the DevExpress.Blazor.Reporting.Viewer NuGet package.
  2. Add a few lines of code to the Startup.cs file to register the appropriate DevExpress components.
  3. Add links to the DevExpress Blazor stylesheets to the page.
  4. Add the <DxReportViewer>…</DxReportViewer> markup.

Razor page code is as follows:

<DxReportViewer Report="@Report" RootCssClasses="w-100" @ref="Viewer"></DxReportViewer>

And of course, you’ll need to create a report (an XtraReport or CachedReportSource instance) and assign it to the Report property.

For more information in this regard, please refer to the following help topic: Create a Blazor Report Viewer (Native) Application

Customization

To help modify the Viewer’s appearance and behavior – and to integrate the component within your Blazor application – our Report Viewer ships with a range of customization options. The main API entry point is the DxReportViewer class.

Customize the Toolbar

You can handle the OnCustomizeToolbar event to hide unnecessary/unwanted toolbar items. For instance, the following code hides all export formats except PDF:

@using DevExpress.Blazor.Reporting
@using DevExpress.Blazor.Reporting.Models
// ...
<DxReportViewer @ref="reportViewer"
	OnCustomizeToolbar="OnCustomizeToolbar"
	Report="report"
	RootCssClasses="w-100 h-100"/>
@code {
// ...
	void OnCustomizeToolbar(ToolbarModel toolbarModel) {
		var exportItem = toolbarModel.AllItems
			.Where(item => item.Id == ToolbarItemId.ExportTo).FirstOrDefault();
		exportItem.Items = exportItem.Items
			.Where(format =>
				((ExportFormatItem)format).Format ==
					DevExpress.XtraPrinting.ExportFormat.Pdf).ToList();
	}
}

The OnCustomizeToolbar event also allows you to add a custom toolbar item as needs dictate:

// ...
void OnCustomizeToolbar(ToolbarModel toolbarModel) {
	toolbarModel.AllItems.Add(new ToolbarItem()
		{
			IconCssClass = "oi oi-sun",
			Text = "Sunny",
			AdaptiveText = "Sunny",
			AdaptivePriority = 1,
			Click = async (args) =>
				{
					await YourCustomTaskAsync()
				}
		});
}

Apply Report Parameters

The ParametersModel property allows you to modify report parameters in code and submit them to re-create the document. The following code generates a document with a specific OrderIdParameter:


	var orderParameter = reportViewer.ParametersModel.VisibleItems
		.Where(param => param.Name == "OrderIdParameter").FirstOrDefault();
	orderParameter.Value = 11077;
	reportViewer.ParametersModel.OnSubmitParameters();

You can handle the OnCustomizeParameters event to customize the parameter editor itself. The folllowing code specifies a custom editor for the DateParameter parameter:

// ...
protected ParameterModel parameterModel;
protected DateTime parameterEditorValue
{
	get { return (DateTime)parameterModel.Value; }
	set { parameterModel.Value = value; }
}

void OnCustomizeParameters(ParametersModel parameters)
{
	parameterModel = parameters.VisibleItems
		.Where(param => param.Name == "DateParameter").FirstOrDefault();
	parameterModel.ValueTemplate =
		@<DxDateEdit @bind-Date=parameterEditorValue DisplayFormat="D" Format="d"/>;
}

Localize the Component

You can use standard Blazor localization methods to localize the component’s user interface. Install the DevExpress.Blazor.xx and DevExpress.Blazor.Reporting.Viewer.xx NuGet packages with localized resources to proceed. For more information, review please review our Localization help topic.

Examples

We published customization examples in the following GitHub repositories to help you hit the ground running:

Report Viewer for Blazor - Customization API

This project demonstrates how to customize the Report Viewer component in the following manner:

  • Customize commands in the Toolbar
  • Customize parameter editors

Report Viewer for Blazor - Customize Export

This project demonstrates how to customize the export actions of the Report Viewer component in the following manner:

  • Customize export options
  • Use token-based authentication
  • Manage exported documents

Before You Start Coding

We know that many of you want us to deliver a WebAssembly compatible reporting engine. To help us frame our long-term vision, please do tell us your development strategy in this regard. Do you need to incorporate DevExpress Reports in pure Blazor WebAssembly apps or with an ASP.NET core backend? If you have specific requirements (data type/data volume) or simply cannot use our Blazor Server Report Viewer, please submit a support ticket on the DevExpress Support Center. We'll be happy to follow-up.

FREE DevExpress Xamarin UI Controls

Deliver high-impact native mobile apps with our feature-rich Data Grid, Scheduler, Chart, TabView, Editors, and utility controls. Reserve your free copy today!
Dino Infantino
Dino
I'm one of those that wants a native Blazor WebAssembly ReportViewer. I have an ASP.NET Core backend
16 August 2021
Eric Claiborne - Knox
Eric Claiborne - Knox

I am using Blazor WebAssembly and all data comes from a JSON-Rest API.  There is no direct data connection in this project.  I went ahead and followed the instructions to setup a Blazor Server Reporting project using the "CustomWebDocumentViewerReportResolver" as described in DevExpress support posts.  Because it's a Blazor Server app, the reports DO have a direct connection to the SQL Server database, which is good.  The question was:  How could I consume the report output page from the WebAssembly project?  I was able to load the report URL from the WebAssembly application.  The report could be rendered in the same browser tab, or in a new tab, which I did.

To enable passing of parameters to the report, I added a .razor component to the Blazor Server Reporting app, which in turn called the report object and loaded it. I am still trying to figure out the JWT security on the reporting app, but that will come, I think.

So this is a working solution for me right now.  I would prefer to have the reports to load from inside the WebAssembly app/project, but the WASM doesn't have a direct data connection.  I think the reports would have to use JSON for data, which I don't know how to do yet.

I may post a code example of how I managed to get it all working, but still curious to see what happens with reports in WASM.


7 September 2021
Dmitry Tok (DevExpress Support)
Dmitry Tok (DevExpress)

@Dino: Thank you for the clarification – much appreciated.

@Eric: Do I correctly understand that you do not display reports in the Report Viewer, and only display PDFs to clients? As for the JWT security-related question, were you able to solve the task?

 

20 September 2021

Please login or register to post comments.