Create a help overlay using layers

Contents[Hide]

1. Overview

This walkthrough shows you how to use interactions to allow viewers to show & hide content in dashboards and other views, which can include components, visualizations, and filters.

You could use this interaction to make elements appear like a pop-up or window. To show and hide multiple elements at once, you can group them into layers, then hide and show the entire layer. A basic interactive help overlay is added to a dashboard as an example below, which displays information about how to use a dashboard when a user hovers over or clicks on a help button.

Tip
In version 8.0.2 or above, organizing elements into layers is optional and you can also use a single interaction to toggle back and forth between showing and hiding content.

Related video: Interactions

2. Create a new dashboard

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

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

We have a bar chart in our example.

3. Create the help overlay layer

This example shows and hides multiple elements at once, so we will add them to a layer so we can easily show and hide all of them when viewing as well as when editing.

3.1. Add a new layer

Open the Layers window and then click the toolbar button with the plus symbol to add a new layer.

If a submenu appears, choose the first icon to add a plain layer.

Add a new layer
Add a new layer

Layer 2 is added to the Layers window and becomes the current layer. This will contain help-related components such as a frame and a label.

Next, rename the layer by double-clicking its name or using the right-click option.

Rename the new layer
Rename the new layer

3.2. Add a frame component to the new layer

Click Components in the toolbar, scroll the submenu to the right, and choose Frame.

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

In the toolbar, choose Edit Title Text and type in a new title for the frame such as About this chart. Press Enter or click away when finished typing.

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, then double-click it or choose the toolbar option to edit its text, and type in a description.

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

3.4. Hide the help overlay layer

Initially, the help overlay layer should be hidden when viewing the dashboard.

In the Layers window, click the eye icon for the current layer (e.g., Help Overlay) 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 in the Layers window by clicking to select Layer 1.

In the toolbar, click Components and choose Button.

Double-click the button or choose the toolbar option to edit its text, and type the new button text as Help.

Add a help button
Add a help button

4.1. Set up the show / hide interaction

Click Set Up Interactions in the toolbar, then choose Show / Hide. (This is also known as Change Layer and it is labeled this way in earlier versions.)

Set up show / hide interaction
Set up show / hide interaction

In the Set Up A Show / Hide Action dialog, you can select a layer under Show Layers to be shown. To show one or more elements individually instead of an entire layer, click to expand Controls and select elements under Show Controls.

When showing a layer or control, you may want to set up a separate interaction to hide the same content later. For example, viewers could click on the layer's content to hide it again, or you could add a separate close button.

Set up the show / hide action
Set up the show / hide action

To use a single button both to show and then hide content, click to enable the Toggle checkbox option, then click to select the items to alternate between shown & hidden (e.g., the Help Overlay layer).

Toggle between showing and hiding
Toggle between showing and hiding

Click the submit button at the bottom of the dialog to finish setting up your interaction for button clicks.

5. Test the help overlay

To test your interaction, click Sandbox View in the toolbar to view the dashboard in a new browser tab, and then click your Help button.

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

Tip
You can also switch to View mode in the toolbar, but changes that you make through interactions when viewing such as hiding and showing layers will be saved if you later switch back to edit mode and allow them to be auto-saved.

6. Scripting layers

Change layer actions can be used to show, hide, or toggle layers from any built-in event, but if you need to trigger the same action from your own script instead, you can use JavaScript like the following:

var canvasService = this.getService("CanvasService");
var helpLayer = canvasService.getLayersByFriendlyName("Help Overlay Layer")[0];
// var helpLayer = this.baseViewService.currentView.control.layers[1];
if (helpLayer.hidden)
    canvasService.showLayers([helpLayer]);
else
    canvasService.hideLayers([helpLayer]);

This script gets the layer by its display name like the one assigned to the layer in this article's example, or you can get it by index as indicated in the commented-out code.

7. 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:
Phone: 9am-6pm, ET, Mon-Fri
Email: 7am-6pm, ET, Mon-Fri