Create a help overlay using layers

Contents[Hide]

1. Overview

This walkthrough shows you how to create a basic help overlay for a dashboard. A help overlay is information about a dashboard that is displayed when the user hovers over or clicks on a help button.

Related video: Drill Down and Custom Dashboard Actions

2. Create a new dashboard

Create a basic dashboard by dragging an existing metric set from the EXPLORE window to the canvas.

Re-visualize the resulting table as a bar chart.

A basic dashboard with a single chart
A basic dashboard with a single chart

3. Create the help overlay layer

3.1. Add a new layer

Click LAYERS and then click Add Layer.

Layer 2 is added to the Layers window and becomes the current layer.

This layer will contain the help-related components such as a frame and a label.

Add a new layer
Add a new layer

Next, click the name of the layer in order to rename it.

Rename the new layer
Rename the new layer

3.2. Add a frame component to the new layer

Go to the toolbar, click Components, scroll to see the CONTENT items, and then click Frame.

Position the frame component over the top-right corner of the bar chart.

Click PROPERTIES, click TEXT, and then change the Title Text property of the frame to About this chart.

Add a frame component and set the title text
Add a frame component and set the title text

3.3. Add a label on top of the frame

Go to the toolbar, click Components, and then click Label.

Position the label over the frame component.

Click PROPERTIES, click TEXT, and then:

  • Set the Label Text property of the label to This chart shows the quantity of products ordered per year with results grouped by product category.
  • Set the Text Align property of the label to left.

Add a label component and set its text properties
Add a label component and set its text properties

3.4. Hide the help overlay layer

Initially, the help overlay layer should be hidden.

Click LAYERS and then click the Eye icon for the current layer (e.g. Help Overlay Layer) in order to hide the layer.

The help overlay layer is now hidden
The help overlay layer is now hidden

4. Add a help button

Now that the help overlay layer is completed, make sure the first layer is the current one by clicking LAYERS and then selecting Layer 1.

From the toolbar, click Components, and then click Button.

Click PROPERTIES, click TEXT, and then set the button's Text property to Help.

Add a help button
Add a help button

There are two options for configuring the help button to show the help overlay layer. The first option is the simplest because it doesn't require any scripting. The second option involves scripting but makes it possible to implement toggle behavior.

4.1. Option 1: Set up a change layer interaction

Right-click over the button on the canvas. From the menu, click Set Up Interactions.

Click Set Up Interactions
Click Set Up Interactions

Then click Change Layer.

Click Change Layer
Click Change Layer

In the Set Up a Change Layer Action dialog, go to the Select a layer to show dropdown and set it to Help Overlay Layer. Click Submit.

Setup a change layer action
Setup a change layer action

The help button is now configured to show the help overlay layer on its click event.

4.2. Option 2: Add a Click script to show or hide the overlay

Go to the Properties window for the button and click Main.

Under ACTIONS, look for the Click action and expand it. Click the plus sign to add a script for handling this action.

Click script 1 to open the Script Editor.

Add a script for the button's Click action
Add a script for the button's Click action

In the Script Editor, enter the following JavaScript code which does the work of showing or hiding the help overlay layer whenever the button is clicked. The script gets the help overlay layer by its internal name (Layer2), or you can get it by index (at index = 1).

var canvasService = this.getService("CanvasService");
var helpLayer = canvasService.getLayerByName("Layer2");
// var helpLayer = this.baseViewService.currentView.control.layers[1];
if (helpLayer.hidden)
    canvasService.showLayers([helpLayer]);
else
    canvasService.hideLayers([helpLayer]);

Click Build in the Script Editor.

5. Test the help overlay

The dashboard with a help overlay is now completed. To test it, switch to View mode, and then click the Help button.

Test the help overlay by clicking the Help button
Test the help overlay by clicking the Help button

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