Writing scripts using browser developer tools
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 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
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.3. Launch the browser developer tools
Launch the Chrome Developer tools from the menu in the top-right corner, or press CTRL+SHIFT+I.
This opens the Developer tools in a separate 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.
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)
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.
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).
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.
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.
5. See also
- Use a drop down list to switch metric sets with scripting
- Add a script to set the dashboard title
- Dundas BI - API Documentation
- View data with a chart and drill down