Customize branding for each tenant

Contents[Hide]

1. Overview

Multi-tenancy enables you to provide viewing access to the same Dundas BI project and dashboards across multiple tenants (where each tenant is one of your clients) using a single instance of Dundas BI. In a typical scenario, each tenant accesses the same dashboards as other tenants but the actual data values that are displayed is specific to each tenant.

This article shows you how to apply further customization at the dashboard-level and at the application-level so that each user sees different logos, styling, and other branding elements according to the tenant to which they belong.

2. Set up multi-tenancy

Before you can customize branding you need to create some tenants and then add users to those tenants. See the article on multi-tenancy.

Once the tenants have been set up, go back to the Tenants admin screen. Edit each tenant in turn and record its Tenant ID. This is a GUID value which will be needed later to create an override folder.

3. Customize the branding per tenant

3.1. Script, style, and HTML overrides

Scripts (JavaScript), CSS styles, and HTML can be customized for use in the application UI by creating override files as shown in White labeling the application.

In the case of tenant-specific overrides, the steps are exactly the same except that an override file for a specific tenant must be placed within a folder that is named according to the tenant ID. For example, a style override file for a tenant with ID = bcfad362-12c3-458b-b072-9ea0e4110c4e should be placed as follows:

[DBIwebsite]\Content\Override\bcfad362-12c3-458b-b072-9ea0e4110c4e\style.override.css

The following table summarizes the placement of the tenant-specific override files.

Override file	Purpose
[DBIwebsite]\Content\Override\[tenantId]\style.override.css	Custom CSS styles for a specific tenant
[DBIwebsite]\Scripts\Override\[tenantId]\javascript.override.js	Custom scripts running at the site level
[DBIwebsite]\Override\[tenantId]\Html.Override.html	Contains HTML which can be manipulated by the corresponding JS code

Once you've created the tenantId folders and override files, restart the Dundas BI website/application pool.

3.2. Branding the Log on screen

Overrides pertaining to the Log on screen are applied by navigating to the Log on page and passing in the corresponding tenant ID via query string. For example:

http://dbi.example.com:8000/LogOn/?tenantId=bcfad362-12c3-458b-b072-9ea0e4110c4e

3.3. Testing the overrides

To test your tenant-specific overrides, log on to Dundas BI with a user account that belongs to the tenant (i.e., the Tenant ID field is set for this user account). The scripts, styles, and HTML associated with this tenant will be applied.

4. Apply dashboard theme per tenant

An alternative to using CSS overrides for applying tenant-specific styling to shared dashboards is to define tenant-specific styles and themes within Dundas BI. A simple script can then be used in the Loading action of a shared dashboard to load the appropriate theme.

To use this method, first record the ID of a theme from its File Properties dialog.

Next, go to the Properties for the shared dashboard and add a Loading script action.

In the Script Editor, enter the following code and click Build.

// Get the user's tenant ID.
var dashboard = this;
var tenID = window.dundas.context.currentSession.tenantId;
if (tenID == 'bcfad362-12c3-458b-b072-9ea0e4110c4e')
{
    // Apply the tenant theme.
    var themeService = window.dundas.context.getService("ThemeService");
    var tenantTheme = themeService.getThemeById("72cd17a0-b63e-4456-98e9-cb7152659bf6");
    tenantTheme.done(function (theme) {
        dashboard.control.applyTheme(theme);
    });
}

Check in your dashboard from Explore.

Then log off and log back on as a user which belongs to the tenant. Open the shared dashboard (which is shared between different tenants). The Purple theme should be automatically applied.

Purple theme is applied to dashboard for this tenant user

5. Notes

When working with images (as described in White labeling the application), the CSS has to account for the additional tenant folder. This means the image URL will change to ../../Images/whitelabel/logo.png.

Welcome to Dundas BI Support