Web Reporting

  • 6 minutes to read

This topic explains the fundamentals of DevExpress Web Reporting components. It also includes links to demos and tutorials to help you get started with these components.

Demos

See our online demos to explore the DevExpress Reporting feature set.

Run Demo

Web Reporting Application Architecture

The DevExpress Reporting web application is composed of client reporting controls, server-based reporting engine and various services. The following diagram shows the complete set of components, and as you will see later, many scenarios require fewer parts.

Web Reporting App Architecture

DevExpress .NET Reporting Engine
DevExpress Reporting for Web is based on the report engine written in .NET. The report engine operates server side, creates report documents, and converts them to a variety of export formats.
Report Class
An instance of a class that inherits from the XtraReport class. A report engine uses the report to create a document that can be previewed, printed, and exported.
Document Viewer Control
A control that uses server-side stateful service. The server performs all the necessary actions - retrieves data from the data source, creates a list of parameter values, generates documents, renders pages for previewing, exporting, and printing. The Document Viewer allows the user to specify report parameters and certain options, and accepts user input for interactive reports. User-defined data, report or document identifiers are sent to the server. The server returns a rendered document which the Document Viewer displays.
Report Designer Control
A control that keeps its state on the client (it is a stateless component). All editing operations are performed in the browser, some operations require server processing, in which case the component state (or part of its state) is sent to the server.
Visual Studio Report Designer
The DevExpress Report Designer that is based on the Visual Studio designer and allows you to create, edit, save, and load a report. The Visual Studio Report Designer is invoked automatically when you open a report class in Visual Studio.
Report Storage
A service that processes a report name that the Report Designer passes to the server to open or save a report. For more information, review the Add a Report Storage help topics for the ASP.NET Web Forms, ASP.NET MVC and ASP.NET Core platforms.

Create a Report in Visual Studio

In a Visual Studio project, create a new report class. The Visual Studio Report Designer is invoked automatically. For more information, review the following help topics:

Our reports are cross-platform, and you can create a report in a web or desktop-based application that targets supported frameworks. You can build a report class library and share it between projects. A report can be saved in a XML format in a report definition file (REPX). Report definitions that you create in a web application can be reused in a desktop application, and vice versa.

In a web application, you can load a report by instantiating its class or use the Report API to load a report from a file in an REPX format.

Create an Application Without Web Reporting Controls (to Print or Export Reports)

In this scenario, the web client sends a request to the server that contains a report name, report parameters, and export options. The server part responds with a document in the specified format.

Web Reporting App No Controls Architecture

This scenario is used to print a report without displaying it on a web page. The server generates a PDF document and sends it to the client. The client uses built-in support for PDF (available in most browsers) to print the document.

For more information, review the Print and Export Reports without a Preview help topic for the ASP.NET Web Forms, ASP.NET MVC, ASP.NET Core, Angular, React, and Vue platforms.

Create an Application with Web Reporting Controls

We offer the Document Viewer and End-User Report Designer components for integration in web applications. The components are available for ASP.NET WebForms, ASP.NET MVC, ASP.NET Core, and Blazor platforms, and can be integrated into JavaScript applications based on Knockout bindings, and Angular, React, and Vue frameworks.

Our web components support .NET Core 3 and .NET 5. For more information, review the following help topic: Reporting in .NET Core 3.x and .NET 5.

Document Viewer

The diagram below shows the application architecture if you use the DevExpress Document Viewer.

Web Reporting App with Document Viewer Architecture

The Document Viewer component enables users to display a report, specify report parameters and use interactive features to modify report content. The user can print a report or export it to a variety of export formats.

For more information, review the following help topic: Web Document Viewer.

End-User Report Designer

The diagram below shows application architecture if you use the DevExpress End User Report Designer.

Web Reporting App with Report Designer Architecture

The End-User Report Designer component for web applications allows users to create and edit a report. The built-in viewer is a fully functional Document Viewer control that allows users to preview, print, and export documents.

For more information, review the following help topic: Web End-User Report Designer.

Localize the Report and Application UI

The End-User Report Designer and Document Viewer UI are fully localizable.

Localization in languages other than English is created by our community. We have a dedicated localization service that you can use to download translations and add missing strings, or customize translations as needed.

Reports are also localizable. You can specify translations and adjust the layout for different languages in the report designer. A localized report contains language-specific layout and texts, and generates different documents depending on the selected language.

For more information, review the following help topics:

Secure the Application

Review the following section for more information: Web Reporting Application Security.

Meet Accessibility Standards

Review the following section for more information: Accessibility in Reporting for Web.

Create User Documentation

Our End-User Documentation describes how to use the Web Document Viewer and Report Designer UI. You can clone documentation sources, and then create your own documentation websites and help files for projects based on our reporting controls.

Review the following section for more information: End-User Documentation.

Troubleshooting

If you experience a problem with a Web Reporting application, review the following help topics: