Using the Script Editor

Contents[Hide]

1. Overview

The Script Editor in the Dundas BI Dashboard Designer lets you provide customized behavior based on the user's interactions with your dashboard and its elements.

The scripting language that the built-in editor supports is JavaScript.

Dundas BI Script Editor
Dundas BI Script Editor

Tip
The same Script Editor is used in other areas of Dundas BI to allow you to enter scripts or code for different languages. For example, when defining a data cube using a manual query, you edit the SQL query using a similar Script Editor.

2. Opening the Script Editor

You open the Script Editor by going to the Properties window for a dashboard, data visualization, or component that has been added to the canvas.

Scroll down to the ACTIONS section and expand the action you want to handle. Click the plus sign to add a new script or select an existing script.

The Script Editor window opens and is docked along the bottom of the designer canvas.

Add a script to handle dashboard's Ready action
Add a script to handle dashboard's Ready action

3. Elements of the Script Editor

 The Script Editor consists of these main elements:

  • Toolbar
  • Script Explorer panel
  • Editor area

Tip
You can drag the splitters between the different areas and panels to resize them.

3.1. Toolbar

The toolbar in the Script Editor lets you:

  • Build the script to check if it is valid
  • Go to a specific line number in the script
  • Undo or redo your changes in the editor
  • Show or hide the Script Explorer panel
  • See the name of your script
  • See what line number and column you are at in the editor (i.e., cursor position)

Script Editor toolbar
Script Editor toolbar

3.2. Script Explorer

The Script Explorer lets you navigate the properties and methods of objects on your dashboard as well as the data types available in the Dundas BI JavaScript API.

To show or hide the Script Explorer panel, click the Script Explorer button in the editor toolbar.

The Script Explorer panel has two parts: an Object Explorer and a Type Explorer.

The Object Explorer lists all of the currently-available objects on your dashboard (in alphabetical order). These objects exist on the dashboard or application and can be manipulated by the statements you write in the editor.

Object Explorer
Object Explorer

Expand the triangles on the left to see what properties and methods are available on each object.

Expand triangles to see properties and methods
Expand triangles to see properties and methods

The Type Explorer lists all of the data types that are supported for scripting (similar to an API reference).

Explore available types
Explore available types

3.3. Editor

The editor is the large text area where you compose and edit your script.

Editor area
Editor area

4. Functionality

4.1. Build script

Click Build in the editor toolbar to build your script and check for syntax errors.

If an error is detected, click the error link to move the editor cursor to the location of the error.

Click the error to go to its location in the code
Click the error to go to its location in the code

If there are no errors, you'll see a message indicating the script is valid.

Script is valid
Script is valid

4.2. Go to line number

To move the cursor to a specific line number in your script, click Line in the editor toolbar.

Enter the line number and then click Go.

Go to a specific line number
Go to a specific line number

4.3. Undo and redo

Use the Undo and Redo buttons to revert or re-apply your actions in the editor area.

Undo and Redo
Undo and Redo

4.4. Auto-complete

The Script Editor offers auto-complete (or code completion) support for: ECMA5, ECMA6, Browser, JQuery, and the Dundas BI JavaScript API. As you type in the editor area, auto-completion popups appear which help you to choose the desired property, method, function, or other construct to include. For example:

List matching properties, etc - Type ‘chart1’ followed by the period character in the editor. Then press CTRL+SPACE to enter auto-complete mode. Type a couple of characters and you'll see the auto-complete popup listing properties and methods that match, along with the corresponding API description. Use the arrow keys to cycle through the available choices, or click on an item with your mouse. When you've found the item you want to insert into your script, press ENTER or double-click the item.

Auto-complete popup showing matching choices with description
Auto-complete popup showing matching choices with description

Auto-complete popup for selecting a border style
Auto-complete popup for selecting a border style

Function/method parameters - In the case of a method or function, once you've added it to your script by pressing ENTER, type the open bracket '(' to see the function/method signature. The first required parameter will be underlined. As you type each parameter, the popup will underline the next parameter that is required.

Auto-complete popup showing method signature and highlighting the next parameter that is required
Auto-complete popup showing method signature and highlighting the next parameter that is required

All available types - While on a new line, press CTRL+SPACE to see the auto-complete popup showing all available types.

Auto-complete popup showing all available types on a new line
Auto-complete popup showing all available types on a new line

The following table describes what the icons in the auto-complete popup means:

IconJS Type
A Array
F Function
B Boolean
1 Number
S String
O Object
? Unknown

4.5. Highlight instances of current object for renaming

To rename all instances of an object, move your cursor over one of the instances or click on it.

Press CTRL+. to select all instances of the object, and then type the new name.

Highlight all instances of an object for renaming
Highlight all instances of an object for renaming

4.6. Jump to object declaration

While your cursor is over an object, press ALT+. to highlight the object where it is defined (i.e., its var statement).

Press ALT+. to jump to object declaration
Press ALT+. to jump to object declaration

4.7. Show documentation for current object

While your cursor is over an object, press CTRL+o to display the documentation for the object in a popup.

Click the docs link to bring up the API reference documentation for the object.

Press CTRL+o to see the docs for current object
Press CTRL+o to see the docs for current object

4.8. Comment the current line or selected lines

Press CTRL+/ to comment the current line (where the cursor is located) or multiple selected lines in the editor. 

If the current line or selected lines are already commented, this key sequence will uncomment the line or selected lines.

On a Mac computer, using CTRL+/ or CMD+/ will work the same to comment or uncomment code.

Press CTRL+/ to comment or uncomment lines of code
Press CTRL+/ to comment or uncomment lines of code

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