Customize Branding for Each Tenant

This applies to: Managed Dashboards, Managed Reports

Multi-tenancy enables you to use a single instance of Symphony to serve multiple tenants (where each tenant is one of your clients) whose users are isolated from other tenants and see only the appropriate content and data.

This article shows you how to apply further customization to multi-tenant instances at the application level and at the dashboard level so that users belonging to different tenants see different branding elements, such as logos and color schemes, or other customizations.

Note: If you are also providing different URLs for each tenant to access Symphony, you can also set up External Application URI Overrides.

Application Styling Resources

System administrators can add custom CSS styles, JavaScript, and HTML by editing the application styling resources through the Administration interface, as shown in the article on white labeling.

In the case of tenant-specific resources, you can follow the same steps except to add separate styling for each tenant.

Adding Tenant Resources

Access Administration from the main menu, expand Setup and then click App Styling.

Application styling

A list of application styling resources is displayed on the right.

On an instance with multiple tenants, you can click Add New in the toolbar to add a new resource that is specific to a tenant.

Add a tenant resource

In the Application Styling Resource dialog, choose the Resource Kind and then select the Tenant.

Select tenant and resource type

Click Choose File to select an existing file containing the content, or enter or paste the styling content directly into the dialog.

Select a file, or enter or paste the content

Click Submit. A separate tenant resource is now listed, which is now applied the next time one of the tenant's users loads a page in Symphony.

Tenant resource file

Branding the Log On Screen

Styling resources pertaining to the log on page are applied by passing in the corresponding tenant ID via query string when navigating there. For example:

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

Testing the Styling

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

Apply Dashboard Theme Per Tenant

When you want to customize the styling of dashboards that are reused between different tenants, an alternative to using the application styling resources described above is to define tenant-specific styles and themes within Symphony. A simple script can then be used in the Loading action of the shared dashboard to load the appropriate theme.

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

Record the ID of the Purple theme

Next, go to the Properties window when editing the dashboard and add a Loading script action. In the Script Editor, you can use code like the following:

// 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);
	});
}

Add a dashboard Loading script

To test the dashboard, check it in, log off and log back on as a user that belongs to the tenant, then view the dashboard.

For the example script above, the Purple theme should be automatically applied.

Purple theme is applied to dashboard for this tenant user

For more information, see:

SYM-ZenDesk-v25.4.log-161407050.zip
50 KB Download