Web Reporting
- 7 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. See our online demos to explore the DevExpress Reporting feature set:
Web Reporting Application Architecture
The DevExpress Reporting web application is composed of client reporting controls, a 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.
- DevExpress .NET Reporting Engine
- The DevExpress Web Reporting suite is based on the report engine written in .NET. The report engine operates on the 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 a 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, and renders pages for preview, export, and print. The Document Viewer allows a 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 that the Document Viewer displays.
- Report Designer Control
- A control that keeps its state on the client (it is a stateless component). All edit operations are performed in the browser, although 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:
- Create a Report in Visual Studio
- Create a Report from A to Z
- Create Reports
- Detailed Guide to DevExpress Reporting
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 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 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.
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 following help topic: Printing and Export in Reporting Tools for Web
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 6+ and .NET Framework 4.5.2+.
Document Viewer
The diagram below shows the application architecture if you use the DevExpress Document Viewer.
The Document Viewer component enables users to display a report, specify report parameters, and use interactive features to modify report content. A user can print a report or export it to a variety of export formats.
For more information, review the following help topic: Document Viewer for Web.
End-User Report Designer
The diagram below shows application architecture if you use the DevExpress End User Report Designer.
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: End-User Report Designer for Web.
Customize Web Components
The user interface of the DevExpress Reporting for Web components is built with Knockout template bindings and DevExtreme component libraries. You can modify Knockout templates to make changes to UI elements for the ASP.NET WebForms, ASP.NET MVC, ASP.NET Core, and all supported JavaScript frameworks. The Document (Report) Viewer component for Angular does not rely on the Knockout.js library, and you can register your own Angular components as Report Viewer templates.
The following help topic describes how to find and modify a template, and include it in your project:
Review the following help sections for information on the most common customization tasks:
- Document Viewer Customization (ASP.NET Core)
- End-User Report Designer Customization (ASP.NET Core)
- Document Viewer Customization (ASP.NET MVC)
- End-User Report Designer Customization (ASP.NET MVC)
- Document Viewer Customization (ASP.NET Web Forms)
- End-User Report Designer Customization (ASP.NET Web Forms)
For information about customizations in JavaScript frameworks, refer to the corresponding help sections.
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 text, 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:
Web UI Development Bundles that Include Reports
You have several options when it comes to licensing DevExpress Reports. Refer to the following topic to select the most suitable one for your needs: Web UI Development Bundles that Include Reports.