Reporting - New Blazor Components to Design and View Reports (now available in v20.1.4)

Reporting Team Blog
09 June 2020

DevExpress Reports now ships with two new components: Blazor Document Viewer and Blazor Report Designer. If you currently own a DevExpress Subscription (such as Universal, DXperience, ASP.NET, Reporting), you can download DevExpress Reports for Blazor (v20.1.4) today.

DevExpress Reports for Blazor - What’s Inside

As you know, the DevExpress Reporting platform can be integrated into any JavaScript-based application with ease (see JavaScript Reporting for more information). Last year, we published a post that described how to integrate DevExpress Reporting into Blazor apps using mainly JavaScript. This, of course, was a temporary solution.

In our v20.1 release cycle, we’ve added two new components (Blazor Report Viewer and Blazor Web Report Designer) so you can leverage the capabilities of DevExpress Reports in your next Blazor project.

Blazor, Microsoft’s newest web development framework, offers C# developers the ability to create web apps with minimal need for JavaScript. To that end, our new Blazor Reporting controls hide as much JavaScript and CSS as possible. Yes, with our Blazor wrappers for the DevExpress HTML5 Document Viewer and Web Report Designer, you’ll have minimal exposure to JavaScript.

Blazor Reports Document Viewer

Our suite of Blazor Report components perform all initialization steps automatically and you can now integrate them into your Server-Side Blazor apps with ease. Online demos are available here: DevExpress UI Components for Blazor - Reporting.

Limitation

Please note that our Blazor Reporting components currently support server-side Blazor (document generation is performed at backend). Our long-term vision is to deliver a document generation engine compatible with Blazor WebAssembly. We’ll keep you posted once we have any news in this regard.

Download via Nuget

We deliver Reporting for Blazor via the DevExpress.Blazor.Reporting NuGet package. The versioning for this package mirrors the rest of our .NET Reporting tools (they will retain versioning in future builds for the sake of simplicity). Updates we introduce to our reporting platform will also be available as a part of the DevExpress.Blazor.Reporting package (since the base DevExpress.Reporting.Core package is used internally).

Install the DevExpress.Blazor.Reporting package to use our reporting tools inside a Blazor application. The DevExpress.Blazor.Reporting package is not dependent upon the DevExpress.Blazor package used by other DevExpress Blazor UI components.

Licensing

Reporting for Blazor is a part of our Web Reporting component package. You need to acquire a license to use this product. If you are evaluating the product, simply activate a trial in our NuGet feed to obtain access for eval purposes.

If you’d like to design reports within Visual Studio, you’ll need to download the DevExpress Unified Installer.

Our Visual Studio Report Designer is not available via Nuget. Once again, if you don’t own a license, you can download our free 30-day trial to evaluate the product.

How to Use?

To get started, you must first create ASP.NET Core 3.1 Blazor Server App and install the NuGet package I mentioned above.

  1. Once installed, navigate to the Startup.cs file and register our reporting components as follows:
public void ConfigureServices(IServiceCollection services) {
    services.AddDevExpressBlazorReporting();
}

public void Configure(IApplicationBuilder app,
        IWebHostEnvironment env) {
    app.UseStaticFiles();
    app.UseDevExpressBlazorReporting();
}
  1. Once complete, modify the _Imports.razor file to register DevExpress.Blazor.Reporting namespace:
@using DevExpress.Blazor.Reporting
  1. Add the Document Viewer and End-User Report Designer controls to your Blazor application. Our Web Reporting components require unique report identifiers to retrieve reports, so I recommend that you implement and register a custom report storage as described in the following help topic: Implement a Report Storage.
Note: If you're going to only use the Document Viewer component then be sure to implement the `IsValidUrl` and `GetData` methods.

Your Feedback Counts

Your feedback will drive development plans in both the short and long-term. Do you expect to customize the UI of our Blazor Reporting Components? Let us know what you need from API perspective. If you are looking for theming capabilities - specify the themes you are most likely going to use in your Blazor app.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
6 comment(s)
Igor Laktic
Igor Laktic

Thank you for your effort.

I already use Blazor Reporting as server side project. Its's greate but as you mention, some update has to be done.

As short term updates I suggest:

- Ability to format the date in the report parameters. It is now possible to use only the MM / dd / yyyy format, and we in Europe use the dd / MM / yyyy format.
- The option of a resizable Dialog for the Data Source Wizard, Configure query parameters.


Long term update is full API.


I am not sure, is Report Viewer compatible with WebAssembly?  Designer is not.

Compatibility with WebAssembly is important. 


Regards Igor

10 June 2020
Dmitry Tok (DevExpress Support)
Dmitry Tok (DevExpress Support)

Hi Igor,

Thank you for the feedback.

Yes, full API is obviously something we want to do as well.

I've logged your requests and should we have additional requests in this regard, we'll be certain to consider them for our upcoming roadmap. 

15 June 2020
Mario Mantese
Mario Mantese
Good work
+1 for Report Viewer in WebAssembly apps, thank you
15 June 2020
Scott R. Frost
Scott R. Frost
Can't wait for it to support Client-Side / WebAssembly Blazor.  Server-side Blazor is going to effectively be deprecated as Client-Side / WebAssembly gains traction.  There are very few benefits of Server-side Blazor over traditional MVC / Razor Pages, but Client-Side / WebAssembly is huge!
19 June 2020
Maciej  Maslanka
Maciej Maslanka
When do you expect to provide a client-side Blazor (webassembly) integration?

The main goal to achieve is to create a report (VS Designer is enough) and a WebAPI controller to provide data, with the Report Viewer calling the controller on the client side.
2 September 2020
Don Boitnott
Don Boitnott
Indeed, formal support for a client-hosted Blazor app would be wonderful.  I've seen the examples of how to make it work now, but it's pretty kludgy stuff, and in fact, using a new VS template, it doesn't work 100%.
24 September 2020

Please login or register to post comments.