Version

Using the Web SDK for the First Time

This part aims to guide you through the initial steps of showing a dashboard on your web page/application for the first time.

Steps

  1. Creating the Project

  2. Installing Reveal SDK

  3. Working on Server configuration

  4. Embedding Reveal in your Client Application

  5. Using Reveal Fonts

  6. Styling the Client Application

Step 1 - Create the Project

Open Visual Studio 2017 and create new project of type ASP.NET Core Web Application:

create new project dialog in Visual Studio 2017

Select .NET Framework and ASP.NET Core 2.2 as follows:

select framework and mvc for project dialog in Visual Studio 2017

Step 1 sample git commit

Step 2 - Install Reveal SDK

Download the Infragistics Reveal SDK from https://www.revealbi.io/ and install it on your machine. In Visual Studio go to Tools > Options > Nuget Package Manager > Package Sources. Add a new source pointing to the Nuget folder of the installed SDK:

adding a new package source to the available package sources dialog

After that you can install the Nuget by changing the package source to the one you added:

installing the Nuget dialog

preview changes dialog

Step 2 sample git commit.

Step 3 - Work on Server Configuration

Create a new Reveal SDK folder in the project and add the RevealSdkContext.cs class, which implements the IRevealSdkContext interface:

	using Infragistics.Sdk;
	using System;
	using System.IO;
	using System.Reflection;
	using System.Threading.Tasks;

	namespace Demo1.RevealSDK
	{
	    public class RevealSdkContext : IRevealSdkContext
	    {
	        public IRVDataSourceProvider DataSourceProvider => throw new NotImplementedException();

	        public IRVDataProvider DataProvider => throw new NotImplementedException();

	        public IRVAuthenticationProvider AuthenticationProvider => throw new NotImplementedException();

	        public Task<Stream> GetDashboardAsync(string dashboardId)
	        {
	            var resourceName = $"Demo1.Dashboards.{dashboardId}";
	            var assembly = Assembly.GetExecutingAssembly();
	            return Task.FromResult(assembly.GetManifestResourceStream(resourceName));
	        }

	        public Task SaveDashboardAsync(string userId, string dashboardId, Stream dashboardStream)
	        {
	            throw new NotImplementedException();
	        }
	    }
	}

In the code above Demo1.Dashboards indicates the location where the dashboard files will be contained, so let’s create a new Dashboards folder in the project and leave it empty for now.

To do this, add the following code to ConfigureServices method in Startup.cs:

	services.AddRevealServices(new RevealEmbedSettings
	{
	    CachePath = @"C:\Temp"
	}, new RevealSdkContext());

	services.AddMvc().AddReveal();

And the necessary references in the same file:

	using Demo1.RevealSDK;
	using Infragistics.Sdk;

Step 3 sample git commit.

If you experience any issues, please refer to the Server SDK - Setup and Configuration topic.

Step 4 - Embed Reveal in your Client application

Let’s start this step by getting a dashboard ready. For the purpose of this demo, you can use the Marketing dashboard from the Samples section in Reveal, but with a different theme. Open the dashboard and enter edit mode:

enter edit mode of marketing sample dashboard in Reveal app

Once in Edit mode click the Theme button:

edit mode menu of the marketing dashboard

And choose the Rocky Mountain theme:

rocky mountain theme in the dashboard themes menu

Save the modified dashboard and Export it:

export marketing dashboard menu

Move the Marketing.rdash dashboard file to the Dashboards folder, which you created in step 3, and set the Build Action for this item to Embedded resource in Visual Studio:

setting build action in marketing.rdash file properties

Now let’s add a new page Marketing.cshtml to visualize the downloaded dashboard:

	@{
	    ViewData["Title"] = "Marketing";
	}

	@section Scripts
	    {
	    <script type="text/javascript">
	        // Load dashboard in #revealView element
	    </script>
	}

	<section>
	    <div id="revealView" style="height:800px;"></div>
	</section>

Then, add a new action method in HomeController.cs:

	public IActionResult Marketing()
	{
	    return View();
	}

One of the third party references that Reveal uses is Day.js so let’s add reference to it in _Layout.cshtml along with the other scripts included:

	<script src="https://unpkg.com/dayjs"></script>

To continue, create a new Reveal folder in the wwwroot folder of the project. Copy there infragistics.reveal.js, which you can find in the installation folder of the Reveal SDK:

wwwroot folder hierarchy

And then reference this library in _Layout.cshtml after the scripts for Day.js:

	<script src="~/Reveal/infragistics.reveal.js"></script>

In the same file, also remove the footer section and add a link in the navigation for the new page:

	<li class="nav-item">
	    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Marketing">Marketing</a>
	</li>

Let’s update the script in Marketing.cshtml with the logic for loading the dashboard:

	var dashboardId = "Marketing.rdash";
	var revealSettings = new $.ig.RevealSettings(dashboardId);

	$.ig.RevealUtility.loadDashboard(dashboardId, function (dashboard) {
	    revealSettings.dashboard = dashboard;
	    var revealView = new $.ig.RevealView("#revealView", revealSettings);
	}, function (error) {
	    //Process any error that might occur here
	});

If you try to run your dashboard now, you will get exceptions in RevealSdkContext.cs. Since we are only using the basic features, let’s just modify this file to return nulls for DataSourceProvider, DataProvider and AuthenticationProvider:

	public IRVDataSourceProvider DataSourceProvider => null;

	public IRVDataProvider DataProvider => null;

	public IRVAuthenticationProvider AuthenticationProvider => null;

Finally, when running the web page, you can see the dashboard:

marketing dashboard result in web page

Step 4 sample git commit.

In case you have any issues, please refer to the Client SDK - Setup and Configuration topic.

Step 5 - Use Reveal Fonts

Reveal app uses Roboto fonts. In order to achieve the same look as in the app, download the fonts from https://fonts.google.com/specimen/Roboto and copy the following TTF files to the wwwroot/css folder of your project:

  • Roboto-Regular.ttf

  • Roboto-Bold.ttf

  • Roboto-Light.ttf

  • Roboto-Medium.ttf

Then, add references in the site.css as follows:

@font-face {
   font-family: "Roboto-Regular";
   src: url("Roboto-Regular.ttf");
}

@font-face {
   font-family: "Roboto-Bold";
   src: url("Roboto-Bold.ttf");
}

@font-face {
   font-family: "Roboto-Light";
   src: url("Roboto-Light.ttf");
}

@font-face {
   font-family: "Roboto-Medium";
   src: url("Roboto-Medium.ttf");
}

For font loading improvements add a reference to the Google Web Font Loader in _Layout.cshtml next to the infragistics.reveal.js reference:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

Finally, modify the script section of the Marketing.cshtml page to take advantage of the font loader:

	WebFont.load({
	    custom: {
	        families: ['Roboto-Regular', 'Roboto-Bold', 'Roboto-Light', 'Roboto-Medium'],
	        urls: ['/css/site.css']
	    },
	    active: function () {
	        var dashboardId = "Marketing.rdash";
	        var revealSettings = new $.ig.RevealSettings(dashboardId);

	        $.ig.RevealUtility.loadDashboard(dashboardId, function (dashboard) {
	            revealSettings.dashboard = dashboard;
	            var revealView = new $.ig.RevealView("#revealView", revealSettings);
	        }, function (error) {
	            //Process any error that might occur here
	        });
	    },
	});

Voila!

marketing dashboard loaded with the new font

Step 5 sample git commit.

Step 6 - Style the Client Application

Instead of using the default template, you can style the Client application.

Remove the Privacy from HomeController.cs and modify the Index to redirect to Marketing:

	public IActionResult Index()
	{
	    return RedirectToAction("Marketing");
	}

Also, remove the Index.cshtml and Privacy.cshtml files since they won’t be used. Remove the style setting for the <div> element in Marketing.cshtml.

Create а new img folder in wwwroot and copy there the logo.png, which you can download from here.

In _Layout.cshtml make the following changes:

  • Change the title from Demo1 to Overview

  • Remove the div after the header

  • Modify the header by adding logo, separator and title:

	<header>
	    <div class="header">
	        <img class="logo" src="~/img/logo.png" alt="logo" />
	        <span class="line" />
	        <h1>Overview</h1>
	    </div>
	</header>

In site.css remove all the styles, except the ones we added for the Roboto fonts and add styles for the header:

	/* Header
	-------------------------------------------------- */

	header {
	    display: flex;
	    width: 100%;
	    height: 70px;
	    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
	    background-color: #37405a;
	}

	img.logo {
	    width: 50px;
	    height: 50px;
	    margin: 10px;
	    float: left;
	}

	span.line {
	    float: left;
	    width: 1px;
	    height: 50px;
	    margin-top: 10px;
	    border: solid 1px #2b2e40;
	}

	h1 {
	    float: left;
	    padding-top: 12px;
	    padding-left: 20px;
	    height: 24px;
	    font-family: Roboto-Regular;
	    font-size: 20px;
	    font-weight: 400;
	    color: #ffffff;
	}

And styles for the body:

	/* Body
	-------------------------------------------------- */
	body {
	    display: flex;
	    flex-direction: column;
	    background-image: linear-gradient(to bottom, #30365a, #2b2e40);
	}

	html, body {
	    width: 100%;
	    height: 100%;
	}

	    body section {
	        display: block;
	        width: 100%;
	        height: 100%;
	        padding: 15px;
	    }

	#revealView {
	    height: 100%;
	}

And this should be your result:

result after styling the client application

Step 6 sample git commit.