Create a help overlay using layers
- Create a new dashboard
- Create the help overlay layer
- Add a help button
- Test the help overlay
- See also
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: Interactions
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.
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.
Next, click the name of the layer in order to rename it.
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.
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.
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.
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.
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 script 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.
Then 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.
The help button is now configured to show the help overlay layer on its click event. A close button can be added to the overlay layer with a similar change layer action to hide the overlay layer again.
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.
var canvasService = this.getService("CanvasService"); var helpLayer = canvasService.getLayerByFriendlyName("Help Overlay Layer"); // var helpLayer = this.baseViewService.currentView.control.layers; 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.
6. See also
- Video: Interactions
- Using interactions
- Layers and groups
- Create a metric set and add a filter
- Design overview