Create a Help Overlay Using Layers

This applies to: Managed Dashboards, Managed Reports

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.

Note: Organizing elements into layers is optional. You can also use a single interaction to toggle back and forth between showing and hiding content.

Related video: Interactions

Create a New Dashboard

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

We have a bar chart in our example.

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.

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.

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.

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

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.

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.

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

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.

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

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

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.

Note: 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.

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 such the one assigned to the layer in this example, or you can get it by index as indicated in the commented-out code.

For more information, see:

• Using Interactions

• Layers and Groups

• Add a Change Layer Action on Ready Event

• Design Overview