416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
Dashboard v5.0

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Customizing the HTML Explorer

Hide navigation
RSS
Modified on Tue, 04 Mar 2014 04:36 PM Categorized as Configuration, HTML, Level-Advanced, Level-Expert
Click to return to: Documentation | Dundas Dashboard for Mobiles


Overview

This article shows how to configure, customize and brand the HTML Explorer. For example, you may want to replace the Dundas Dashboard logo in the toolbar of the HTML Explorer with your own corporate logo, or change the background color of the HTML Home screen.

The HTML Explorer adapts its layout and elements for various screen sizes. The minimum screen size that should be used is 320 × 480 pixels. On smartphone devices, a single-column paradigm for layout is used whereas for tablets and desktops, the explorer employs a multi-column paradigm.

Configuration files

There are two files on the Dundas Dashboard server that you can use to customize and brand the HTML Explorer. Both files are located in the root folder of the Dundas Dashboard web application. By default, this location is:

C:\Program Files\Dundas Data Visualization Inc\Dundas Dashboard\{instance}\www\

Dundas.Dashboard.config

Dundas.Dashboard.config is an XML configuration file which contains a section of keys for branding Dundas Dashboard. Although most of the keys are for the Silverlight application, some also apply to the HTML Explorer.

After editing this file, you must restart the Dundas Dashboard website for the changes to take effect.

HtmlStyleOverride.css

This file can be used to override CSS styles for the HTML Explorer. By default, an example file, HtmlStyleOverride.css.example, is included in the root web application folder. This is basically an empty file which you must rename to HtmlStyleOverride.css in order to add your own styles.

After editing this file, refresh your browser to see the changes.

Automatic login

Dundas Dashboard administrators can configure the Dundas Dashboard server to permit automatic logins from HTML using a specified local user account in Dundas Dashboard. This might be useful if you want to configure a kiosk for showing HTML dashboards.

To set this up:

  1. Uncomment and modify as needed the three HtmlAutoLogin keys near the bottom of the Dundas Dashboard Configuration File.
  2. Restart the Dundas Dashboard website for the changes to take effect.

Now, when users launch the HTML Explorer/Home, they will be automatically logged-in as the configured user.

Demo mode

The HTML Explorer/Home screen can be configured to run in demo mode, in which layout changes to the home screen are stored with the session instead of being persisted with the user profile. When the session ends, the layout changes are discarded. This lets you provide the same default, initial view for users when they log in.

To enable demo mode:

  1. Uncomment and set the HtmlHomeIsDemoMode key near the bottom of the Dundas Dashboard Configuration File to True.
  2. Restart the Dundas Dashboard website for the change to take effect.

Initial dashboards for the home screen

When a user first logs in to the HTML Home screen, an initial set of dashboards is displayed which the Dundas Dashboard administrator can configure via the HTML Home Settings screen in the Administration panel.

Once logged in, the user is free to customize the home screen by adding or removing dashboards as desired. At this point, the user's home screen has no further association with the set of initial dashboards as specified by the administrator.

Customization examples

Login screen logo

Use the Branding.LoginPageLogoImageUri key in the Dundas.Dashboard.config file to change the Dundas Dashboard logo in both the Silverlight and HTML Viewer Login screens (by supplying your own image URL). The dimensions of the image should be 200 × 60 pixels.

The Dundas Dashboard logo in the HTML Viewer Login screen.

The Dundas Dashboard logo in the HTML Viewer Login screen.


Application logo

To change the application logo in the toolbar (i.e. menu bar) of the HTML Explorer/Home, and also in the Silverlight app, use the Branding.PrimaryLogoImageUri key in the Dundas.Dashboard.config file. The dimensions of the image should be 145 × 50 pixels.

If you only want to change the application logo in the HTML Explorer/Home, but not in the Silverlight app, add the following example CSS style to the HtmlStyleOverride.css file (using your own image URL). The dimensions of the image should be 167 × 60 pixels.

#menu #logo a img { display:none; }

#menu #logo a { background: transparent url('your-own-logo.png') no-repeat top right; background-size: 167px 60px; width: 167px; height: 60px; border-style: none; cursor: pointer; display: inline-block; }

The Dundas Dashboard logo in the toolbar of the HTML Explorer.

The Dundas Dashboard logo in the toolbar of the HTML Explorer.


Application logo URL

In Dundas Dashboard 5.0.2 or later, use the Branding.HtmlHomeLogoWeblinkUri key in the Dundas.Dashboard.config file to choose a specific URL to go to when the user clicks the application logo in the top-left corner of the HTML Explorer/Home.

Background colors of the application

To change the background colors of the application, modify the body and wrapper div background-color properties via CSS.

body 
{
  background-color: #636466;
  font: 14px Arial, Helvetica, sans-serif;
  color: #bcbec0;
  position: absolute; 
  text-align: center; 
  width: 100%;
}
#wrapper
{ 
  max-width: 1280px;
  min-height: 100%;
  margin: 0 auto; 
  position: relative; 
  background-color: #252c32; 
  text-align: left;
}

Text color

To change the color of text elements globally, modify the color property of the body element via CSS. Note that this will also change the default color of all text elements.

body 
{ 
  color:#00ffff;
}

Changing the text color.

Changing the text color.


If you just want to change the color or style of the Welcome text in the HTML Home Screen, use the following CSS as an example.

.homeScreenTitle
{
  color: #FF0000;
  font: 12px Arial,Helvetica,sans-serif;
}

Toolbar icons

Use the following CSS to customize the icon for the Explorer button (normally a magnifying glass tilted to the left).

a#explorer
{ 
  background-image: url('your-own-button.png'); 
  background-repeat: no-repeat;
  background-position: 20px top;
  background-size: 40px 40px; 
}

#menu #explorer img { visibility: hidden; }

Explorer icon in the home screen toolbar.

Explorer icon in the home screen toolbar.


Wait indicator

The HTML Explorer/Home displays a wait indicator when you select a dashboard to view. You can customize the indicator with your own logo (e.g. your own animated gif) using CSS similar to the example below:

.overlay
{
    background: url('your-own-logo.gif') no-repeat center center rgba(37, 44, 50, 0.3) !important;
    opacity: 1 !important;
}

.LoadingOverlay { background: rgba(37, 44, 50, 0.3); }

.LoadingOverlay > .Spinner { background: url('your-own-logo.gif') no-repeat center center transparent; position: absolute; width: 144px; height: 144px; margin-left: -72px; margin-top: -72px; }

Performance considerations

The Dundas.Dashboard.config file also has a number of HTML-related settings that let administrators strike a balance between responsiveness of the HTML Home screen and server load.

Unsupported customizations

Warning: The customization examples in this section are provided as is; they are not supported by Dundas Data Visualization, Inc.

Hiding the Logout button

Use the following CSS to hide the Logout button in the HTML Viewer.

.Toolbar .Logout {
  display: none  !important;
}

Use the following CSS to hide the Logout button in the HTML Explorer/Home.

#menu #nav #logout { display: none; }

Hiding the toolbar

Use the following CSS to hide the toolbar in the HTML Viewer.

.Toolbar { 
  display:none;
}

Use the following CSS to hide the toolbar in the HTML Explorer/Home.

#menu { display: none; }

Data grid header row height

Use the following CSS to change the height of the header row for DataGrid1.

#DataGrid1 thead > tr > th { height:75px; }

Setting the height of a data grid header row.

Setting the height of a data grid header row.


Related topics



Click to return to: Documentation | Dundas Dashboard for Mobiles

About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2014 Dundas Data Visualization, Inc.