Writing scripts using browser developer tools

Contents[Hide]

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.

This article shows you how to use Chrome Developer tools in conjunction with the Script Editor to write and debug the exact same script that was shown in the Use a drop down list to switch metric sets with scripting article.

2. Using the browser to write scripts

2.1. Set up the dashboard

For this example, set up a dashboard (within Chrome) by following the steps exactly as shown in the Use a drop down list to switch metric sets with scripting article.

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

Add a single debugger line as the script
Add a single debugger line as the script

2.3. Launch the browser developer tools

Launch the Chrome Developer tools from the menu in the top-right corner, or press CTRL+SHIFT+I.

Launch the Chrome Developer tools
Launch the Chrome Developer tools

This opens the Developer tools in a separate window.

Chrome Developer tools window
Chrome Developer tools window

2.4. Trigger the script

Next, go back to the Dundas BI window.

Switch to View mode, and then do something to trigger the script.

For this example, go to the drop down list component on the dashboard and change its selection.

Change selection to trigger the script
Change selection to trigger the script

The Chrome Developer tools window immediately takes focus and displays the script in the yellow section. Observe that the script shows the following:

  • function arguments corresponding to the objects on the dashboard (e.g. chart1 and dropDownList1)
  • the single debugger line we added (which basically causes a breakpoint to trigger in the browser)

Developer tools window immediately after triggering the script
Developer tools window immediately after triggering the script

2.5. Write the actual script using developer tools

In the Developer tools window, go to the Console tab at the bottom.

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.

Auto-complete menu for dropDownList1
Auto-complete menu for dropDownList1

2.6. Copy the script back to the Script Editor

Once you've finished writing your script, go to the toolbar in the top-right corner and click Resume script exection (or press F8).

Resume script execution
Resume script execution

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.

Copy script from Chrome and paste into Script Editor
Copy script from Chrome and paste into Script Editor

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.

Next, launch Chrome Developer tools from the Chrome menu, or press CTRL+SHIFT+I.

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.

Debugging a script using Chrome
Debugging a script using Chrome

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