1. Overview

Although you can write scripts in the Dundas BI Dashboard Designer using the built-in Script Editor, it may be easier and more powerful for you to write scripts using web browser functionality, such as Google Chrome Developer tools.

This lets you benefit from JavaScript auto-complete features as well as advanced debugging capabilities.

2. Using the browser to write scripts

2.1. Set up the dashboard

Stop at the point where you have an empty script 1 for the drop down list's Selection Changed action, which is loaded in the Script Editor.

2.2. Add a debugger statement

Go to the Dundas BI Script Editor and type just a single JavaScript line:

debugger;

This is a statement that different browsers recognize. When the statement is reached during script execution, the context switches over to the browser's developer tools and pauses, allowing you to debug the rest of the script which appears after the debugger statement.

In this case, we don't have any code after the debugger statement because we simply want to have the execution context switch over to the browser developer tools so we can write the actual script in that environment instead (which will allow us to take advantage of auto-complete features and more).

2.5. Write the actual script using developer tools

You can write your entire script in the Console, but make sure you press SHIFT+ENTER to go to a new line (or else Chrome will interpret your line of code right away).

The main reason for writing the script in Chrome Developer tools is to gain access to auto-complete functionality. For example, type dropDownList1. and you'll see the auto-complete menu listing the available properties, etc.

2.6. Copy the script back to the Script Editor

Go back to the Dundas BI window and click Edit to go back to Edit mode.

Select the drop down list on the canvas, and then click the Script Editor to open it.

Copy the script from the Chrome Developer tools Console and paste it into the Dundas BI Script Editor. You can either replace the debugger line with your script or paste the new code after the debugger line. The latter option will let you debug the script in Chrome.

Finally, click Build to check for any script errors. (There is no need to save because the Script Editor auto-saves as you type.)

You can now switch to View mode and test your script.

3. Debug using Chrome Developer tools

To debug a script using Chrome Developer tools, simply insert the debugger; statement at the point in your script where you want to start debugging. For example, insert it at the beginning as the first line. Then click Build.

Go back to the Dundas BI window, switch to View mode, and perform the UI operation that will trigger your script. When script execution reaches the debugger statement, the execution context will switch over to Chrome and you can begin debugging (e.g. stepping through code) using the available tools in Chrome.

4. Notes

While you can name controls in Dundas BI in any way you would like, JavaScript does not allow leading digits in function parameter names. To avoid errors in certain scripts, Dundas BI prefixes an underscore (_) when the adapter name starts with a number. This means, if the parameter name is 1Label, you will have to use _1Label to target it in a script.