Dundas BI white labeling

Contents[Hide]

1. Overview

This article shows how to white label the Dundas BI Web Application. You will learn the following:

  • How to get started
  • How to select styles within the Dundas BI web application
  • How to modify the styles in the override files
  • How to work with images
  • How to work with localized text override file.
  • How to keep files between versions

2. Getting started

The following prerequisites must be installed on your computer:

  • Dundas BI Web Application
  • Google Chrome, or another browser that allows elements in the page to be inspected.
  • Notepad, or another way to edit and save CSS files.

3. Keep files between upgrades

In each Dundas BI web application there are three overide files:

  • [BIWebsite]Content\Override\style.override.css - This file contains all Custom styles.
  • [BIWebsite]Scripts\Override\javascript.override.js - This file contains any custom scripts that are running at the site level.
  • [BIWebsite]Override\Html.Override.html - This file contains html that needs to be manipulated from the JavaScript override. This allows for constructing HTML without the need to do it in the JavaScript directly.

These files are safe for upgrade as they are never replaced. They are the only files that should be used for customizing the application. With the exception of new files which should be placed in a white label folder to avoid the potential of future naming conflicts. All other Dundas BI Web Application files may be overwritten during the upgrade process.

Note
The images located in the [BIWebsite]Content\Images\favicon folder are not replaced during upgrade.

4. Selecting styles

This section shows how to use Google Chrome to extract classes from page elements. Specifically we are going to select the bottom toolbar on the log on screen so we can later change the color. To start selecting elements do the following:

  1. Pull up the Dundas BI Log in page in Chrome.
    Dundas BI login page
    Dundas BI login page
  2. Press and Hold Ctrl and Shift keys, then press F11. The developer tools panel should appear.
    Developer tools
    Developer tools
  3. Click the Element Selector Icon on the Developer Tools toolbar:
    Element selector
    Element selector
  4. Now click on the Dundas BI Footer. You will notice that it selects the page element <div id="loginPage-footer" >. The loginPage-footer is the class we will now modify in our style override file.

     

    Login page footer selected
    Login page footer selected

5. Modifying styles

In the previous section we selected an element. In this section we will change that element using the style override file. This file is located at: [BIWebsite]Content\Override\style.override.css.

Open the notepad application, and open the style override file. If it is a new deployment you will get a file with the following:

/* Add any CSS overrides in this document */

Now we want to add the loginPage-footer class to this file. Also, we are going to modify the background for the rest of the loginPage content. Add the following text to the style.override.css file:

/* Add any CSS overrides in this document */
/* Footer color */
#loginPage-footer
{
     background-color: #d1d3d4  !important; 
}

/* Main page background */
#loginPage-content
{
    background-color: #fffeee  !important; 
}
    

Note
Some styles require !important to take precedence.

Save the file, and reload the page, and you should get the following:

After style override
After style override

6. Working with images

To change an image, we first must add it to the BI website. To add an image to be the BI Website do the following:

  1. Create a whitelabel folder in the [BIWebsite]Content\Images folder.
    White label image folder
    White label image folder
  2. Copy your new image to the folder you just created. For example, [BIWebsite]Content\Images\logo.png.

In order to change an image we need to first select the image element on the page and get its class.

Dundas BI login logo selected
Dundas BI login logo selected

The logo has the class loginPage-logo. To modify this class we again go to the style.override.css file and add the following text:

/* Logo */
#loginPage-contentHeader .loginPage-logo 
{
    background-image: url(../Images/whitelabel/logo.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

 

After adding the override for the logo we should get the following:

Dundas BI login logo changed
Dundas BI login logo changed

7. White labeling localized text using overrides

To start white labeling localized text we first must find the where the localized text is located. In our example we want to localize the "Logon to Dundas BI" in the page title.

Dundas BI login page tab
Dundas BI login page tab

This is found in the [BIWebsite]\App_Data\Localization\en\Web.xml. Rather than writing directly to this file we will create an override folder and file. This is done in order to avoid changes being wiped out during upgrades. To create the override do the following:

  1. Create an override folder in the "localization\en" folder.
    Localized folder
    Localized folder
  2. Create an XML file with the same name as the one you want to override, but named ".override.xml" instead of just ".xml". For example, if you want to override Web.xml, you would create a file called "Web.override.xml" in the override folder.
    Web override localized file
    Web override localized file

Note
The override file is the same format as the regular localization files, but only needs to contain the strings you want to override.

<?xml version="1.0" encoding="utf-8" ?>
    <localization 
            xmlns="http://dundas.com/schemas/BI/localization.xsd" 
            culture="en" 
            moduleId="21259D43-EE4C-4B06-B73F-C9C2CDCE60C6">
    <group name="LogOnView">
        <string key="GS_LogOn_Title">Log on to CTT</string>
    </group>
  
</localization>

 

Note
You will need to reset the application pool or IIS for the changes to take effect.

8. Modifying the favicon

To modify the favorite icon which is used in the page title modify all of the images located in the following folder: [BIWebsite]Content\Images\favicon

Note
These images will not be replaced during upgrade.

After the changes we get the following tab:

Tab text changed
Tab text changed

9. Summary

In this article we went over the different ways to white label Dundas BI. All of the changes resulted in the following modified login page:

White Labeled Login Screen
White Labeled Login Screen

10. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri