Telerik Reporting R1 2022 Meets React

React Report Viewer component, great Web Report Designer improvements and further enhanced Visual Studio integration when embedding reports into your application. Report Server shared resources handling now shines!

A new, fresh year has started, and it is our time to bring new goodies to your favorite reporting solution. R1 2022 of Telerik Reporting makes it easy to embed reporting into React apps, introducing a dedicated component. It also brings support for Report Books and useful centralized assets management into the Web Report Designer and the Blazor component based on it. Our Visual Studio integration follows the .NET 6 introduction, adding support for the WPF and WinForms report viewers’ item templates for it. Report Server can now store assets like images and data files so that they can be reused from the report definitions.

React Report Viewer

The HTML5 Report Viewer could be integrated into your React application up until now, but it was not easy. Now you have a new, dedicated report viewer React component that will ensure straightforward embedding for preview of reports. The viewer is built as a wrapper of the HTML5 Report Viewer widget, inheriting all its strengths, including:

• Navigate the report pages for preview on the screen
• Exercise the defined interactivities like Navigate to another report or to a bookmark in the same one, drill-down or sort on a column, etc.
• Print or export the report to all the formats we support, including PDF and Excel

While the component is not a native one like the theming mechanism (which should use the Kendo UI for jQuery one and the dependency to jQuery itself), it brings reporting value to your applications in no time.

The viewer component may be obtained at https://www.npmjs.com/package/@progress/telerik-react-report-viewer. Any feedback in the comments below is more than welcome.

Report Book Support in Web Report Designer

To reiterate, all functionality introduced in the Web Report Designer apply both to the jQuery widget and the Blazor Report Designer. These now support creating and editing a Report book, which in essence is composed of multiple reports combined into one document.

Once a Report book gets loaded in the designer, a dedicated design surface allows easy addition, reordering and removal of the reports that constitute the Report book. You can also choose a report definition to be used as ToC (Table of Contents) template and whether it should be generated at the beginning or at the end of the book.

Report Assets Manager in Web Report Designer

We want the Web Report Designer to cover the whole story of creating a report from scratch for your end users. To support that, they need to be able to easily upload to the server and manage the additional resources referenced in the report definitions. The Web Report Designer now includes a dedicated tool called Assets Manager to do the job. The supported assets include:

• All image files used in PictureBox items, backgrounds, chart data points representations, etc.
• CSV, JSON and shape definition files used to feed offline data to the reports
• External style sheet XML files used to facilitate common stylization of your reports

The report author can upload and select new assets organized in folders for easy navigation and retrieval. Once uploaded, an asset may be reused in the same and other report definitions. Each asset may be selected and referenced again from the assets manager, which gets opened from the corresponding property editor of the target property.

Visual Snap Lines in Web-Based Report Designers

Next, I will introduce a feature that drastically improves the quality of life spent again in the Web Report Designer. The move and resize operations on the design surface often require matching the dimensions of different items so that the content is well aligned. These adjustments are much easier when the design surface snaps the target items to each other and displays corresponding visual cues so that the author understands the result. This is what now the Web Designer does, and does well.

Improvements: Visual Studio Integration

VS item templates help to simplify the embedding of the different report viewer controls into your business applications so that you are even more productive. The WinForms and WPF item templates for Visual Studio now support embedding of the respective report viewers into desktop applications targeting .NET Core 3+/.NET 5/.NET 6.

Besides the controls, the templates add the respective NuGet dependencies and allow setting up the viewer to generate the reports using embedded report engine mode or to retrieve them from remote REST reports service or from a Report Server instance.

.NET 6 Minimal APIs Support

The .NET 6 release brought an alternative way of building HTTP services, called ASP.NET 6.0 Minimal APIs. It is already used in the Visual Studio web project templates when targeting .NET 6 and it brings not only fewer lines of code but also clarity without sacrificing the access to all middleware flexibility you may need.

We conformed to that change by introducing support for it in our VS item templates that generate a REST reports service implementation. The item templates’ logic will detect if your web app is using Minimal APIs or not and would generate the appropriate initialization logic to configure the reports service.

Report Server With Capable Web Report Designer

Needless to say, all the improvements in the Web Report Designer are available to the Report Server if you have enabled it from the respective setting. It now allows editing report books and displays snap lines for easier alignment of the items in the report.

However, I would like to point out the added support of shared report resources using the Assets Manager I described earlier in the post. In the context of Report Server, it brings the ability to share and reuse the company’s design language like imagery and stylization among the company reports. And it brings easy maintenance of those so, if a style or logo gets updated, all reports that use those will get updated as well.

The other great benefit in the context of the server is to upload data files (CSV and JSON are supported) and use those to author different visualizations of the data depending on the intended insight. That said, do consider using the Web Report Designer as a primary tool to edit your reports. Any comments or feedback below would be highly appreciated.

Related Webinar & Twitch Session

The Telerik team will host a webinar to cover updates across Telerik Reporting, Test Studio, JustMock and Fiddler Everywhere on Thursday, February 3, from 11:00 am – 1:00 pm ET.

Save Your Seat

Join Us on Twitch

Plus, there will be a live demo session on Twitch to see the newly released components and features in action and get ideas on how to use them in your projects. Chat with the team and get your questions answered on the spot!

The one for Test Studio, Reporting and Fiddler is Friday, January 28, at 10:00 am ET.

Want to Try Telerik Reporting?

Telerik Reporting is a complete, easy-to-use and powerful .NET embedded reporting tool for web and desktop applications that supports: Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET AJAX, HTML5/JS, Angular, React, WPF and WinForms. Also available as a part of our Telerik DevCraft bundles, Reporting allows you to create, style, view and export rich, interactive and reusable reports to attractively present analytical and any business data. Add reports to any business application through report viewer controls. Export the ready reports in more than 15 formats. Download a FREE trial today.

Want to Try Telerik Report Server?

Telerik Report Server is an end-to-end report management solution powered by Telerik Reporting. It comes with an easy-to-implement white-labeling mechanism to become a seamless part of your solution with a flexible data-driven report delivery subscription capability. Download a FREE trial today and, if it fits your needs, also consider the Telerik DevCraft Ultimate bundle which comes with one instance of the server.