Using Interactions with Controls

Contents[Hide]

In Dundas BI Visualizations, Filter controls, and Components are all controls. Interactions can be added to all controls. For example, adding a Hover Interaction to a chart to show a detailed version, or adding a Filter Interaction to a button.

1. Adding an interaction to a control

Interactions can be added from the Toolbar, Context menu, and the Properties in the Main tab under the Actions section.

2. Interactions

There are 6 types of interactions which cause an action to occur. Navigate, which navigates to a new page. Hover, which displays a popup of another object, usually a dashboard. Drill Down applies a drill down and Filter which applies a filter. Change Layer, which causes a layer to be shown or hidden. Finally Toggle Template Cell interaction toggles if a template cell is displayed.

List of Interactions
List of Interactions

3. Using interactions

When configuring an interaction, there are several parameters to configure how the Interaction is triggered. Name and Friendly Name allow you to label the interaction meaningfully. In addition each Interaction has parameters specific to the type of interaction it is. For more details see the specific articles.

3.1. Bound Visual

For some controls, there is the option to set a “Bound Visual”. This causes the interaction to only occur only on a particular part of that control. This is shown on the some visualizations and components.

3.1.1. Visualizations

All Charts (this doesn’t include Gauges, Data Labels, Diagrams and Maps), can have an interaction bound to a particular series of that chart. For example, on a Pareto chart , a Hover popup can be bound to only display when the mouse is on the Bar chart series of the visualization, and not the Line chart series.

3.1.2. Components

Dropdown lists and Radio Groups can have items added manually. Interactions can be bound so that they are only triggered when a particular item is selected. For example, if a drop down has three items “Apple”, “Banana”, and “Cherry”, the interaction can be set to only be triggered when “Cherry” is selected.

Checkboxes can be in one of two states: Checked, and Unchecked. An interaction can be bound to either state. For example. When the checkbox is “Checked”, a layer is shown.

3.2. Using a Dropdown list to select visible layer.

  1. Create a dashboard with 3 layers. Layer 1 will be used for the Dropdown control. Layer 2 and Layer 3 will be used to display different visualization. Add some visualization(s) or component(s) to Layer 2 and Layer 3.

    A dashboard with 3 layers
    A dashboard with 3 layers

  2. Go to the Layer Tab and make Layer 1 the active layer by clicking on it

    Making Layer 1 the active layer
    Making Layer 1 the active layer

  3. Click on the Components toolbar button, select Dropdown List, and add a Dropdown List component to Layer 1.

    Adding the dropdown list to the dashboard
    Adding the dropdown list to the dashboard

  4. Select the new Dropdown list item

    Configuring the first dropdown item
    Configuring the first dropdown item

  5. Click on ‘Item’ and Check Selected. Go to Text, and change the Caption to ‘Layer 2’

    Setting the first item as Selected
    Setting the first item as Selected

    Setting the caption on the first item
    Setting the caption on the first item

  6. Go back to Drop down and add an Item to the list. Click on ‘Item’, Go to Text, and change the Caption to ‘Layer 3’

    Adding a second item to the dropdown list
    Adding a second item to the dropdown list

    Setting the caption on the second item
    Setting the caption on the second item

  7. Go back to the Drop Down and scroll down to Actions

    Expand Selection Change and Click on the Menu and Select a Change Layer Interaction

    Adding a ChangeLayer Interaction to the Selection Change action
    Adding a ChangeLayer Interaction to the Selection Change action

  8. Click on changeLayer 1. Change the name and set the following values.
    • Hide Layer to ‘Layer 3’
    • Show Layer to ‘Layer 2’
    • Bound Visual to ‘Layer 2’

    Configuring the first ChangeLayer Interaction
    Configuring the first ChangeLayer Interaction

    Click ok. 

  9. Expand Selection Change and Click on the Menu and Select a Change Layer Interaction to add another Change Layer Interaction

    Click on changeLayer 1. Change the name and set the following values.

    • Hide Layer to ‘Layer 2’
    • Show Layer to ‘Layer 3’
    • Bound Visual to ‘Layer 3’

    Configuring the second ChangeLayer Interaction
    Configuring the second ChangeLayer Interaction

    Click ok.

  10. Go to the Layers Tab and Hide Layer 3, Show Layer 2 and Layer 1.

    Setting the visibility of the layers
    Setting the visibility of the layers

  11. Go to View Mode and select the Layer from the Dropdown List to switch layers

    Layer 2 is shown
    Layer 2 is shown

    Selecting Layer 3 from the dropdown
    Selecting Layer 3 from the dropdown

4. Actions

Interactions are associated with a particular action and are run when that Action occurs, such as clicking on an element of the dashboard (i.e. “Click” action). The types of actions available differ between the various objects on the dashboard. Typical actions that are available include “Click”, “Hover”, and “Double Click”. However there are many that are specific to that particular object such as “Selection Changed” on Dropdown List and Radio button.

When creating an interaction using the toolbar or context menu it is associated to a particular action automatically.

Control Drill down Navigate Filter Change Layer Toggle Template Cell Hover
Data Visualization Click Hover
All Filter controls Value Changed
Radio Button Selection Changed
Dropdown list
Timer Timer Interval Tick
Slider Component Changed

Interactions can be associated to actions other than the default by creating them in the Properties Tab. For instance creating a Hover interaction that is displayed when the mouse is clicked on the control, rather than when the mouse is hovered over it.

4.1. Creating a Popup Interaction in the Click action

When creating an interaction in this manner, Hover is named Popup.

  1. Add a Visualization or component and then select it

    Add and select a Visualization or Component
    Add and select a Visualization or Component

  2. Go to the Properties Tab, click on Menu, and scroll down to Actions

    Go the Actions section
    Go the Actions section

  3. Expand the Click action and expand it

    Expand the Click action
    Expand the Click action

  4. Click the menu to the side, and select Popup.

    Select the Popup
    Select the Popup

  5. Configure the Popup interaction

    Configure the Popup
    Configure the Popup

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