Embedding Self-Service BI in Blazor Applications

With abundant data, users have shifted to a data-first approach to guide their decision-making process.

And it’s easy to see why.

Integrating powerful BI with fully interactive visuals and reports into your Blazor applications makes data analytics accessible to all your end-users. With in-context, accessible data, your users can quickly extract relevant insights when needed - free from disruptions and chaos caused by switching applications or shuffling data.

As an embedded analytics solution, Reveal can help you achieve that.

Reveal helps you easily and quickly embed interactive dashboards and reports in your Blazor applications with self-service analytics features like in-context editing, data blending, dashboard linking, calculated fields, and more.

In this article, we’ll explore how you can successfully integrate embedded analytics in your Blazor apps with Reveal.

If you’re new to Reveal, you can learn more about our product by taking a tour of our website or by watching our Reveal Product Overview video.

Why Should You Embed Analytics in Your Blazor Apps?

Embedding analytics in your Blazor apps allows you to view key business data in your natural workflow. It lets you easily spot trends and patterns in data that would’ve otherwise been missed. With access to real-time insights, you (and all your users) can make better-informed decisions that can guide your business success.

Data analytics also helps businesses to streamline workflows, manage resources and optimize processes and performance for maximum profitability. With the right data, you can also identify new product/service opportunities to increase your revenue.

Get Your FREE PDF Copy

Fill out the form to get access.

Sorry, it seems that we have run into an issue with the form. Please try again in a few minutes. If you still experience issues, please contact us at support@revealbi.io to notify us of the issue.

Required

Unfortunately, Google has considered you a bot. Please feel free to contact support@revealbi.io to obtain the asset you were looking for or choose to schedule a demo of our products. Please accept the form terms to submit successfully. This email address doesn’t appear valid. Please update and try again. Please use a business email address.

Country

Business Email

First Name

Last Name

I understand and agree to the terms of Infragistics’ Terms of Use and Privacy Policy

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Use apply.

Download PDF

Your PDF is downloading!

Enjoy reading and learning.

PDF: Get our FREE ‘’End-to-End Embedded BI Deployment Guide’’, which details the strategic planning, selection, development, and continuous improvement phases necessary for successful implementation. Download the PDF here!

Embedding Self-Service Analytics in Your Blazor Apps with Reveal BI

The following 7 steps will show you how easy it is to get started with enabling rich data visualizations and dashboards in your Blazor application. There are both client and server configurations that need to happen. To get started, download the SDK

Once you’ve done that, let’s create and enable embedded, self-service BI in your Blazor app in 7 easy steps!

Step 1: Create a Blazor Server App

Since this is a Blazor Server app, open Visual Studio and create a new Blazor Server app with the defaults. Once completed, the application is created; right-click on your project, select Manage Nuget Packages, and search nuget.org for the Reveal.Sdk.AspNetCore nuget package, and install it to your project.

Step 2: Set Up Folders / Add Dashboards

To test the Reveal SDK client, we ship sample dashboards that you can use to ensure your configuration is correct. Reveal uses a known folder structure to automatically load and save dashboards - if you use a folder named Dashboards in the root of your project, you are not required to write any additional Load / Save code.

1. Create a folder named Dashboards

2. Unzip and copy the sample dashboards (Marketing, Sales, Campaigns, Manufacturing) to the newly created Dashboard folder from this zip file: https://users.infragistics.com/Reveal/sample-dashboards.zip

Step 3: Update Program.cs

In Program.cs:

1. Add to the top of the code window:

using Reveal.Sdk;

2. Tell your app to use the Reveal SDK with this code and place it before the builder.build statement.

builder.Services.AddControllers().AddReveal();

Step 4: Add Client SDK Dependencies

To enable Reveal client JavaScript dependencies, the Pages\_layout.cshtml file needs to be updated. Add the following code before the end of the closing tag.

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

<script src="https://dl.revealbi.io/reveal/libs/1.5.0/infragistics.reveal.js"></script> 
 
<script type="module"> 
    import "./js/revealview.js"; 
</script>

Step 5: Add Reveal Client Configuration JavaScript

The Reveal SDK Client uses is configured through the RevealView. To load the RevealView, you need to add a JavaScript function on the client. This is also where you would configure any properties that should be enabled when a dashboard renders.

1. Add js folder in the \wwwroot\ folder

2. In the js folder, add a JavaScript file named revealview.js with the following code:

window.loadRevealView = function (viewId, dashboardName) {

$.ig.RevealSdkSettings.setBaseUrl('https://samples.revealbi.io/upmedia-backend/reveal-api/');

$.ig.RVDashboard.loadDashboard(dashboardName, (dashboard) => {

var revealView = new $.ig.RevealView("#" + viewId);

revealView.dashboard = dashboard;

});

}

Step 6: Load Dashboards

In this Blazor application, you are going to load the dashboards into a

@inject IJSRuntime JSRuntime

<select @onchange="selectedDashboardChanged"> 
    <option>Campaigns</option> 
    <option>Healthcare</option> 
    <option>Manufacturing</option> 
    <option>Marketing</option> 
    <option>Sales</option> 
</select> 

<div id="revealView" style="width:100%; height:750px"></div> 

@code { 
    protected override async Task OnAfterRenderAsync(bool firstRender) 
    { 
        if (firstRender) 
        { 
            await JSRuntime.InvokeVoidAsync("loadRevealView", "revealView", "Campaigns"); 
        } 
    }
} 

async void selectedDashboardChanged(ChangeEventArgs e) 
    { 
        await JSRuntime.InvokeVoidAsync("loadRevealView", "revealView", e.Value!.ToString()); 
    } 
}