Effortlessly Integrate Report Designer into a Blazor WASM App

Effortlessly Integrate Report Designer into a Blazor WASM App

Adding report-designing capabilities to your Blazor WASM (WebAssembly) application significantly enhances its functionality. Bold Reports Report Designer offers a user-friendly solution for achieving this, allowing users to design and customize reports directly within your application.

This blog post will guide you through integrating Bold Reports Report Designer into a Blazor WebAssembly application.

Prerequisites

Before you get started, make sure your development environment includes the following:

• Visual Studio 2022
• .NET 7.0+

Create a Blazor Server application

To create a new Blazor WebAssembly Server application, open a command prompt, navigate to the directory where you want to create the project by using the cd command, and then run the following command:

dotnet new blazorwasm -n ReportDesignerApp

A new Blazor WebAssembly application named ReportDesignerApp will be created.

Initialize the Report Designer

To initialize the Report Designer with basic parameters, you need to integrate the Bold Reports controls by creating an interop file.

Create a new class named BoldReportDesignerOptions.cs inside the Data folder. This class will contain the following properties that will be used to configure the Report Designer:

namespace ReportDesignerApp
{
    public class BoldReportDesignerOptions
    {
        public string ServiceURL { get; set; }
    }
}

After that, make a folder named scripts inside the wwwroot folder. Inside scripts, make a file named boldreports-interop.js. Insert the following code to activate the control:

// Interop file to render the Bold Report Designer component with properties.
window.BoldReports = {
    RenderDesigner: function (elementID, reportDesignerOptions) {
        $("#" + elementID).boldReportDesigner({
            serviceUrl: reportDesignerOptions.serviceURL
        });
    }
}

Integrating scripts and themes for Blazor Report Designer

To integrate JavaScript reporting controls into your Blazor application, reference the following CDN links and the boldreports-interop.js file in the head section of your wwwroot/index.html file:

    <link href="https://cdn.boldreports.com/6.1.34/content/material/bold.reports.all.min.css" rel="stylesheet" />
    <link href="https://cdn.boldreports.com/6.1.34/content/material/bold.reportdesigner.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
    <script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="https://cdn.boldreports.com/external/jsrender.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/vb/vb.min.js" type="text/javascript"></script>
    <!--Used to render the gauge item. Add this script only if your report contains the gauge report item. -->
    <script src="https://cdn.boldreports.com/6.1.34/scripts/common/ej2-base.min.js"></script>
    <script src="https://cdn.boldreports.com/6.1.34/scripts/common/ej2-data.min.js"></script>
    <script src="https://cdn.boldreports.com/6.1.34/scripts/common/ej2-pdf-export.min.js"></script>
    <script src="https://cdn.boldreports.com/6.1.34/scripts/common/ej2-svg-base.min.js"></script>
    <script src="https://cdn.boldreports.com/6.1.34/scripts/data-visualization/ej2-lineargauge.min.js"></script>
    <script src="https://cdn.boldreports.com/6.1.34/scripts/data-visualization/ej2-circulargauge.min.js"></script>
    <!--Used to render the map item. Add this script only if your report contains the map report item.-->
    <script src="https://cdn.boldreports.com/6.1.34/scripts/data-visualization/ej2-maps.min.js"></script>
    <script src="https://cdn.boldreports.com/6.1.34/scripts/common/bold.reports.common.min.js"></script>
    <script src="https://cdn.boldreports.com/6.1.34/scripts/common/bold.reports.widgets.min.js"></script>
    <script src="https://cdn.boldreports.com/6.1.34/scripts/common/bold.report-designer-widgets.min.js"></script>
    <!--Used to render the chart item. Add this script only if your report contains the chart report item.-->
    <script src="https://cdn.boldreports.com/6.1.34/scripts/data-visualization/ej.chart.min.js"></script>
    <!-- Report Designer component script-->
    <script src="https://cdn.boldreports.com/6.1.34/scripts/bold.report-viewer.min.js"></script>
    <script src="https://cdn.boldreports.com/6.1.34/scripts/bold.report-designer.min.js"></script>
    <!-- Blazor interop file -->
    <script src="boldreports-interop.js"></script>

Render Blazor Report Designer in a Razor page

To embed the Blazor Report Designer within a Razor page, you need to use the JavaScript interop. Go to the Pages/Index.razor file and add the following code:

@page "/"
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components
@inject IJSRuntime JSRuntime
@using ReportDesignerApp;<div id="designer" style="width: 100%;height: 650px"></div>
@code {
    // ReportDesigner options
    BoldReportDesignerOptions designerOptions = new BoldReportDesignerOptions();
    // Used to render the Blazor Report Designer component in Blazor page.
    public async void RenderReportDesigner()
    {
    }
    // Initial rendering of Blazor Report Designer
    protected override void OnAfterRender(bool firstRender)
    {
        RenderReportDesigner();
    }
}

It includes the following methods to render the Blazor Report Designer:

RenderReportDesigner Renders the Report Designer component in a Blazor page.
OnAfterRender Initializes the Report Designer by calling the RenderReportDesigner method that we created.

Create web API for report processing

The web Report Designer requires a web API service to process data and handle file actions. You can either skip this step and use existing online web API services for data processing and file management, or you can create your own web API service by referring to the following documentation:

• ASP NET Web API Service
• ASP NET Core Web API Service

Set the service URL

Add the report service URL to the pages/home.razor file as shown:

public async void RenderReportDesigner()
    {
        designerOptions.ServiceURL = " http://{portno}/api/ReportingAPI”;
        await JSRuntime.InvokeVoidAsync("BoldReports.RenderDesigner", "designer", designerOptions);
    }

Run the Blazor WASM application

To launch your Blazor application and access the Report Designer, open the command prompt, navigate to your Blazor Server project’s root directory, and run the following command:

dotnet run

Once your application is running, open the local host URL in your browser. Your Blazor WebAssembly application will load the Report Designer as shown in the following figure:

Conclusion

I hope this blog has clarified how to integrate the Report Designer into a Blazor WebAssembly app. To delve deeper into the Report Designer’s features, feel free to explore .

Bold Reports gives you a free 15-day trial, and you don’t need to provide any credit card details. We encourage you to try it out and share your feedback with us!