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.

3. Customize the branding for each tenant

3.1. Script, style, and HTML override files

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

In the case of tenant-specific overrides, the steps are exactly the same except that a separate override file for each tenant must be created.

The following table describes the purpose of the tenant-specific override files.

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

3.2. Managing override files

From the main menu, click Admin, expand Setup and then click App Styling.

A list of override files is displayed on the right.

From the toolbar, click Add New.

Select the Resource Kind and then select a Tenant to apply the override to.

Click Choose File to select an override file to apply to the tenant or copy the text from the override file and paste it in the box.

Select a file or copy and paste its contents

Click Submit. The overrides specified in the file is applied to the selected tenant and appears in the list of override files on the main App Styling page.

3.3. 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.4. 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