Use Visual Studio Project Templates to Create a Blazor Reporting Application

• Jul 31, 2023
• 5 minutes to read

This section describes how you can create Blazor Reporting applications using DevExpress project templates in Visual Studio.

Invoke the DevExpress Template Gallery

1. Click Create a new project on Visual Studio’s start page and select the DevExpress v23.1 Blazor App Template Gallery.

   

   Click Next.

2. Specify the project name and location. Click Create to create a project and invoke the DevExpress Template Gallery:

   

Proceed with the DevExpress Template Gallery

When you invoke the DevExpress Template Gallery, select one of the templates listed below.

Server Reporting Application

Select Server Reporting Application and click Run Wizard.

The Project Gallery window closes and directs you to the DevExpress Blazor Project Wizard. In this wizard, you can add reporting controls to your application (native Blazor controls or JavaScript widgets). Refer to the following section for configuration options: DevExpress Blazor Project Wizard Settings.

Report Viewer (Native)

To create an app with the Blazor Report Viewer (native), specify the following settings:

Setting	Value
Add Page with JS-Based Report Designer	False
Add Page with JS-Based Document Viewer	False
Add Page with Native Report Viewer	True
Report Storage Name	Not applicable; you may clear this field

Click Create Project to close the Wizard and create the sample project.

Refer to the following section for configuration options: DevExpress Blazor Project Wizard Settings.

For more information about the Blazor Server Report Viewer (Native), refer to the following help topic: Report Viewer for Blazor Server (Native).

Document Viewer and Report Designer (JS-Based)

To create an app with the Document Viewer and Report Designer (JS-Based), specify the following settings:

Setting	Value
Add Page with JS-Based Report Designer	True
Add Page with JS-Based Document Viewer	True
Add Page with Native Report Viewer	False

Add the Report Designer or Document Viewer page or both.

The generated project includes a report storage service that relies on the SQLite database (to save and retrieve a report by name). Refer to the following section for configuration options: DevExpress Blazor Project Wizard Settings.

Once the DevExpress Blazor Project Wizard appears on-screen, you can modify settings or leave them unchanged. Click Create Project to close the Wizard and create a Blazor WebAssembly Reporting sample project.

For more information about Blazor Server Reporting controls, refer to the following help topic: Document Viewer and Report Designer for Blazor Server (JavaScript-Based).

WebAssembly Hosted Reporting Application

Select WebAssembly Hosted Reporting Application and click Run Wizard.

Once DevExpress Blazor Project Wizard is invoked, you can change the settings or leave them untouched. Refer to the following section for configuration options: DevExpress Blazor Project Wizard Settings.

Click Create Project to close the Wizard and create the Blazor WebAssembly Hosted Reporting sample project.

The generated project includes a report storage service that relies on the SQLite database (to save and retrieve a report by name).

For more information about the Blazor Hosted WebAssembly Reporting controls, refer to the following help topic: Document Viewer and Report Designer for Blazor WebAssembly Hosted (JavaScript-Based).

WebAssembly Reporting Application

Select WebAssembly Reporting Application and click Run Wizard.

When you select WebAssembly Reporting Application, the wizard is not invoked and the project is created automatically. The project contains a sample report and the Blazor Report Viewer (Native) control.

For more information about the Blazor WebAssembly Reporting controls, refer to the following help topic: Report Viewer for WebAssembly (Native).

DevExpress Blazor Project Wizard Settings

DevExpress Blazor Project Wizard allows you to specify the following settings:

Add a Page with the JS-Based Report Designer

Adds a ReportDesigner.razor page that contains the DxReportDesigner (Blazor Server) or DxWasmReportDesigner (Blazor WebAssembly Hosted) component. Available for Server and WebAssembly templates.

Add a Page with the JS-Based Document Viewer

Adds a DocumentViewer.razor page that contains the DxDocumentViewer (Blazor Server) or DxWasmDocumentViewer (Blazor WebAssembly Hosted) component. Available for Server and WebAssembly templates.

Add a Page with the Native Report Viewer

Adds a ReportViewer.razor page that contains DxReportViewer (our Blazor native Report Viewer component). Available only for the Server template.

Report Storage Name

Specifies the class name of a server-side report storage. A report storage created with a template is the class that inherits from the ReportStorageWebExtension base class, and uses the SQLite database to save and retrieve reports. This storage allows you to open report layout data from various sources. A storage service implemented in the template is based on the reportsData.db SQLite database in the Data folder. If you modify a report in the Web Report Designer, it is saved to the database in XML format. Available for both Server and WebAssembly templates.

Note

The template generates a sample storage (a ReportStorageWebExtension descendant) for demonstration purposes only. Create your own implementation for use in production.

Data Binding Mode

Specifies data fetch mode for report controls. You can switch between legacy Bindings mode, Expressions mode, and Expressions (Advanced) mode. Available for Server and WebAssembly templates.

Add Sample Database

Specifies whether the application code should create a sample SQLite database and register the database for use in the Report Wizard, Data Source Wizard, and Report Designer (as a predefined data source). Available for both Server and WebAssembly templates.

Add Sample JSON Data Connection Storage

Specifies whether the application should create a JSON Data Connection Storage and register it for JSON Data Sources in the Report Wizard and Data Source Wizard. Available for both Server and WebAssembly templates.

Add Sample Data Object

Specifies whether the application should add a sample data object to an application and create Object Data Sources for the Report Wizard and Data Source Wizard. Available for Server and WebAssembly templates.

Enable Rich Text Editor

Specifies whether the application should enable our in-place Rich Text Editor for the XRRichText control. Available only for the Server template.