How to Use Embedded BI and Create Self-Serviced Dashboards in ASP.NET Core App

Today any tech product in the market is collecting lots of data on their users or their behaviors on the product. This data can be used in marketing activities to increase sales or help them make decisions, and Embedded BI can help in the same use case.

Certainly! Here are the types of SaaS products where embedded BI can be utilized.

Customer Relationship Management (CRM) Systems
Enterprise Resource Planning (ERP) Systems
Human Resource Management Systems (HRMS)
Project Management Tools
E-commerce Platforms
Marketing Automation Platforms
Financial Management Systems
Supply Chain Management (SCM) Systems
Learning Management Systems (LMS)
Healthcare Management Systems
Customer Support and Helpdesk Software
Collaboration Tools
Real Estate Management Software
Educational Technology (EdTech) Platforms
Travel and Expense Management Systems

If you are new to BI, here are my previous posts. I would like to recommend you check out first,

In this article, I will show you how to create an ASP .NET Core Server for all your BI Needs. Follow the below steps:

Step 1. Identify a good “Self-Serviced and Embedded BI” for your product.

I’ll use a Reveal BI SDK for all my Self-Serviced and Embedded BI needs. Let’s know more about Reveal BI.

What is Reveal BI?

The Ultimate Embedded Business Intelligence Solution

Reveal is a business intelligence solution specifically designed for embedded analytics, delivering full-featured self-service dashboards and modern reporting with a beautiful, branded experience. Whether integrating into any JavaScript framework, Windows Forms, or WPF application, Reveal seamlessly fits into your app’s ecosystem, providing complete control and flexibility. Deployable on any public or private cloud or your own on-prem servers, Reveal offers true embedded analytics with a simple and elegant user experience. Its cross-platform compatibility ensures it works harmoniously with web-based platforms, mobile apps, or desktop software, supporting every cloud provider, back-end framework, and server operating system. Enhance customer satisfaction with Reveal’s powerful and intuitive analytics capabilities.

To use Reveal BI SDK Package you can directly search into NuGet Package Manager. I have an ASP .NET Core (API Project) where I want to add Reveal SDK.

Go to Package Manager and search for Reveal BI.

Reveal BI

Hit the install button once you get the package, it is showing me uninstall as I have already done this.

You will require a free trial key to use this package. For that, you can fill out this form or visit Reveal BI’s website: revealbi.io

Be ready with the as you will require this in the next step.

Step 2. Setup / configure the Reveal BI SDK Server in the ASP .NET Core application.

Got to Solution Explorer and opened the “program.cs” file.

Add Require namespace and call the AddReveal() function to register this package.

using Reveal.Sdk;

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

Now, We can set CORs Policy (only for debugging), as right now we will access this on localhost only.

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll",
        builder => builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod()
    );
});

Apply the policy only while in debug mode.

if (app.Environment.IsDevelopment())
{
    app.UseCors("AllowAll");
}

Lastly, we just need to apply the trail license key that you just got in your inbox after step 1.

services.AddMvc().AddReveal(builder =>
{
    builder.AddSettings(settings =>
    {
        settings.License = "LICENSE_KEY";
    });
});

That’s all you need to set up your Reveal BI Server.

Step 3. Create Client/front-end Application.

Our BI Server is ready now, so let’s work on our front-end application. You can create any type of front-end application, like Angular, React, JSP, PHP, or just an HTML/JS-based application.

Here in this demo, I’ll create a client just using an HTML/JS page.

1. Create an HTML File

First, open your preferred code editor and create a new HTML file named `index.html`. This file will be the foundation for embedding Reveal SDK in your project. Start with a basic HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reveal SDK - HTML/JavaScript</title>
</head>
<body>

</body>
</html>

2. Add Reveal JavaScript API

To utilize Reveal SDK, you need to include its JavaScript API and some dependencies in your HTML file. Insert the following scripts just before the closing `</body>` tag.

Include the Reveal SDK Script:

   <script src="https://dl.revealbi.io/reveal/libs/[version]/infragistics.reveal.js"></script>

Include jQuery and Day.js:

   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

   <script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>

3. Initialize the Reveal View

Now, you need to set up a container where the Reveal dashboard will be displayed and initialize the Reveal view.

Add a <div> element with an id where the dashboard will be rendered:

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

Initialize the Reveal View by adding a script at the bottom of your file:

   <script type="text/javascript">
       var revealView = new $.ig.RevealView("#revealView");
   </script>

Your index.html should now look like this:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Reveal SDK - HTML/JavaScript</title>
   </head>
   <body>
       <div id="revealView" style="height: 920px; width: 100%;"></div>
       <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
       <script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
       <script src="https://dl.revealbi.io/reveal/libs/[version]/infragistics.reveal.js"></script>
       <script type="text/javascript">
           var revealView = new $.ig.RevealView("#revealView");
       </script>
   </body>
   </html>

Step 4. Run the Application.

To view your dashboard, simply double-click the `index.html` file. This will open it in your default web browser, and you should see the Reveal view initialized.

Run the Application

Congratulations! You have successfully created and initialized a Reveal SDK application using HTML and JavaScript.

For more details and access to sample code, you can visit the official Reveal BI documentation and GitHub repository.

In my next article, we’ll be using this project only, and we’ll create dashboards by adding SQL Server as a data source.