Staying organized while developing scripts


1. Overview

The goal of this article is to assist you in organizing your scripts into reusable custom functions and even separate files. In Dundas actions, such as the dashboard's Ready action, a chart's Mouse Hover action, or even a filter's Selection Changed action, you would only need to write a couple lines of code. These would be function calls to functions defined in either the javascript.override.js file or other files that you've created. Another advantage to this approach is if you have a script that is used several times on similar adapters, you would call the custom function from inside the adapter's action, and the actual JavaScript that is being executed is the same. This reduces redundancy, the possibility for error, and the time spent applying the same code over multiple adapters.

2. Prerequisites

3. Setup

In every instance of Dundas BI there is an override file for HTML, CSS, and JavaScript. We will be focusing on the JavaScript override file and the folder that contains it. The purpose of the JavaScript override file is to store custom scripts that will be loaded or executed in every Dundas BI view. This file will be loaded once the Document Ready function and the dundas.context.ready function have fired.

The typical location of the javascript.override.js file is here:
\Program Files\Dundas Data Visualization Inc\Dundas BI\Instances\Instance Name\www\BIWebsite\Scripts\Override

Since this file is stored in the Program Files folder, you will likely get a User Account Control prompt when attempting to open it.

This is a good place to store commonly used functions. For even more organization you can create additional JavaScript files in the same folder and reference them either in the original override file or in the Ready action of a Dashboard, Report or Scorecard.

Let's start off by adding some helper functions to our javascript.override.js file.

// attach the myLibrary object to the global window object
window.myLibrary = {};

// A function for quickly getting adapters based on property 
// name and the value of that property. 
// Example: the "hidden" property with value true 
// To return the adapters that matches that criteria, call the following: 
// myLibrary.getAdaptersByProperty("hidden", true); 
myLibrary.getAdaptersByProperty = function(property, value) {
    var myView = dundas.context.baseViewService.currentView;
    return myView.getAdapters().filter(function(a) {
        return a[property] === value;

// Returns a single adapter with matching name 
// Example: myLibrary.getAdapterByName("chart2");
myLibrary.getAdapterByName = function(name) {
    var view = dundas.context.baseViewService.currentView;
    return view.getAdapters().toEnumerable().first(function(a) {
        return === name;

// Returns an array of matching view parameters 
// Example: myLibrary.getViewParametersByProperty("id", "8802ffea-0cb9-c099-32e9-9f1d999eff8a"); 
myLibrary.getViewParametersByProperty = function(property, value) {
    var myView = window.dundas.context.baseViewService.currentView;
    return myView.control.viewParameters.filter(function(vp) {
        return vp[property] === value;

// Returns a single view parameter with matching name 
// Example: myLibrary.getViewParameterByName("viewParameter1"); 
myLibrary.getViewParameterByName = function(name) {
    var view = dundas.context.baseViewService.currentView;
    return view.control.viewParameters.toEnumerable().first(function(vp) {
        return === name;

If you want to stay organized by separating your JavaScript into files based on their purpose, simply create another .js file in the same folder and paste the below code into the beginning of the javascript.override.js file.

// Will only load the file if the document and the Dundas object are ready 
$(document).ready(function () { 
    dundas.context.ready(function () {
        // replicate above line for additional JavaScript files

I've created a separate file dedicated to Prototypes called prototypes.js and I've modified the above script to include it. Here is some more information on Prototypes in JavaScript. Below is the code in the prototypes.js file.

// Since String.replace only replaces the first instance of the substring, 
// this will act as the replace all occurrences of a substring function 
String.prototype.replaceAll = function (substring, replacement) {
    return this.split(substring).join(replacement);

// This will capitalize the first letter in every word in the string
String.prototype.capitalize = function () {
    var array = this.split(" ");
    for (var i = array.length - 1; i >= 0; i--) {
        array[i] = array[i].charAt(0).toUpperCase() + array[i].slice(1);
    return array.join(" ");

In a situation where you wanted to have a JavaScript file specific to a particular dashboard, you could create the script in the same folder and load the file in the dashboard's Ready action. Here is an example of the script needed to load the file. Notice that getScript has an optional parameter reserved for a function that will fire if the file was loaded successfully. If you have JavaScript that requires the file to be loaded, place it in the scriptFinishedLoading function.

$.getScript("/Scripts/Override/[nameOfYourFile].js", scriptFinishedLoading());
function scriptFinishedLoading() {
    // place code here if it is dependent on the script being loaded...

Once you've placed that in the Ready action, you can write functions in nameOfYourFile.js and call them from actions on the dashboard.

An example of this would be to have the following code in it's own separate file called [newFileName].js inside the /Scripts/Override/ folder.

window.myDashboard = {

    randomizeBackground: function (adapter) {
        if (typeof adapter.background !== 'undefined') {
            adapter.background = this.getRandomBackground();
        } else if (typeof adapter.control.background !== 'undefined') {
            adapter.control.background = this.getRandomBackground();
        } else {
            console.log("no background property found...");

    getRandomBackground: function () {
        var bg = new dundas.controls.SolidColorBrush();
        bg.color.a = Math.floor((Math.random() * 256));
        bg.color.r = Math.floor((Math.random() * 256));
        bg.color.g = Math.floor((Math.random() * 256));
        bg.color.b = Math.floor((Math.random() * 256));
        return bg;

Now on a dashboard add a script to the Ready action, which can be found under the Main section of the dashboard's properties. In that script place the following code.


On the dashboard canvas, create a button and open the Look section of its properties. Remove any hover background color if there is any. Now in the Main section of the buttons properties, add a script to the Click action. In that script place this code.

// 'this' represents the adapter object that is firing the event 

Switch to View mode and refresh the browser page. The purpose of reloading the page is to load the updated resource files. If you edit these JavaScript files you will need to save them and reload the page in order for the changes to take effect. Or you could switch to Sandbox View mode which opens a new tab and doesn't require the page to be reloaded.

Test your script by clicking on the button. If everything is working, you should see the color and transparency of the button change with every click.

This approach is very convenient since we can have charts, labels, and other adapters using the same function call and getting the same results. Let's test this...

Create a Bar Chart with some existing data and also create a label. In both the chart and the label place the same script into their Hover action.


Switch to Vew mode or use Sandbox View mode to see the effects. The same script is designed to be generic enough to handle different types of adapters.

As you can see this type of scripting approach can greatly increase productivity while developing. All the scripts are located in a central location making it is easy find bugs in your scripts, and it allows you to reuse code in other projects or dashboards.

In the scenerio where you don't have convenient access to the server where the Override folder is located, you could write all of the custom functions in the Ready action instead of loading the file containing the functions. This would have the same effect and would only require access to the dashboard itself. Also, since the functions are contained within the dashboard, they would be included in a project export. This makes pushing a project from a development environment to a production environment a bit easier.

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