Blazor Reporting — Quick Start with New Project Templates (v22.2)

Reporting Team Blog
06 February 2023

As you may already know, our Blazor Reporting component family includes two new JavaScript-based WebAssembly components [in addition to our Blazor Native Report Viewer and two JavaScript-based Blazor Server components: DevExpress Document Viewer for Blazor (JS) and DevExpress Report Designer for Blazor (JS).]

To help you select the right component for your Blazor project, we allow you to generate a working project without prior knowledge of our reporting platform. Our most recent major update (v22.2) ships with unified Blazor Reporting project templates. These templates are available both as a Visual Studio extension and as a CLI templates package (for both Windows and non-Windows users).

Template-based projects can be a starting point to learn the basics. You can explore and use code from these sample projects as needs/requirements dictate.

Create a Project with CLI

You can install DevExpress project templates from NuGet with the following command line option:


dotnet new -i DevExpress.DotNet.Web.ProjectTemplates::22.2.3

To create a new Blazor DevExpress Reporting project, run one of the following commands.

Blazor Server Project

Run the following command to create a `BlazorReportingServerApp` project that contains our native Blazor Report Viewer and two JavaScript-based Blazor Server components: DevExpress Document Viewer for Blazor (JS) and DevExpress Report Designer for Blazor (JS):


dotnet new dx.blazor.reporting.blazorserver --name BlazorReportingServerApp

Blazor WebAssembly Project

Run the following command to create a `BlazorReportingWasmApp` project that contains the DevExpress Document Viewer for Blazor (JS) and DevExpress Report Designer for Blazor (JS):


dotnet new dx.blazor.reporting.webassembly --name BlazorReportingWasmApp

Command Line Options

Specify the following command line parameters to customize the project:

-ad | --add-designer
Optional. Specifies whether to create a web page with the Report Designer (JS-Based). The default value is true.
-adv | --add-document-viewer
Optional. Specifies whether to create a web page with a Document Viewer (JS-Based). The default value is true.
-arv | --add-report-viewer
Optional. Only Blazor Server. Specifies whether to create a web page with a Report Viewer (a native Blazor component for Blazor Server). The default value is true.
-ads | --add-data-source
Optional. Specifies whether the application should register a sample connection string. The specified connection allows end users to create SQL Data Sources in the Report Wizard and Data Source Wizard. The default value is false.
-ajs | --add-json-data-connection-storage
Optional. Specifies whether the application should create and register a JSON storage. That storage allows users to create JSON Data Sources in the Report and Data Source Wizard. The default value is false.
-ao | --add-data-object
Optional. Specifies whether application code should create and register a sample data object. Data objects allow users to create Object Data Sources in the Report and Data Source Wizard. The default value is false.

For command line users, help is available with the following commands:


dotnet new dx.blazor.reporting.blazorserver -h
dotnet new dx.blazor.reporting.webassembly -h

Create a Project with Visual Studio Templates

DevExpress Blazor Reporting project templates for Visual Studio will be available once you install v22.2 on your machine. If installed, create a new project, and select the DevExpress Blazor App Template Gallery within Visual Studio:

To proceed, select Reporting Application for Blazor Server or Reporting Application for Blazor WebAssembly. This invokes the Devexpress Blazor Project Wizard. The Wizard asks you to specify which Blazor reporting component you wish to use in your project (alongside other customization options):


Once you’ve made your selections, click Create Project. The project will contain a sample report and all appropriate report-related services (based on selections made).

How Templates Help

We’ve done our best to keep UI templates as simple as possible (in terms of application complexity). We only use the backend to populate application UI with sample data. Once you’ve created the project, you’ll need to copy/paste the appropriate code to your application and implement the necessary business logic on the backend.

Documentation

Please refer to the following help topics for more information:

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.