This recipe shows how you can create a pop-up screen that is activated by making the mouse hover over a certain area of the dashboard. This can be handy if you want to add some minor information on a specific part of a dashboard.
No specific preparation is needed for this recipe. You can use any dashboard you already created or just start with an empty one. In this example, we are reusing the dashboard we created in the previous two recipes.
- Drag a Chart component (for example, a Pie Chart component) into the canvas. If you are using an existing dashboard, you can use one of the components of your dashboard instead.
- Drag a Label component found in the Selectors category into the canvas and enter the text you want to show.
- Go to the properties pane of this Label component. Select the Appearance tab and select the Show Fill option.
- Now, select the Show Border option and set Border Thickness to 2:
- Move the Label component over the chart:
- Now drag a Toggle Button component, found in the Selectors category, into the canvas and position it on top of the title of the chart you added to the canvas in step 1. Resize it so that it covers the total area above the chart, as shown in the following screenshot:
- In the Toggle Button properties pane, go to the General tab. Bind Destination to spreadsheet cell H1:
- Insert value
0into cell H1:
- Now go to the Behavior tab. Under Interaction Options in the Common menu, change Mouse Click to Mouse Over:
- Now go to the Appearance tab and set the Transparency to 100% under the Layout menu:
- Also, under the Text menu within the Appearance tab, deselect the Show Labels option. Now the component won't be visible anymore on the canvas:
- To finish this recipe, we have to set up the Dynamic Visibility functionality for the Label component. First, select the Label component. Go to the Behavior tab in the properties pane. Within the Dynamic Visibility section, bind the Status field to spreadsheet cell H1. Also put value
1into the Key field:
- Now your dashboard is ready to be tested. Hit the Preview button and see what happens!
For this recipe, we used the Toggle Button functionality in combination with Dynamic Visibility. Also, instead of clicking on Toggle Button to activate it, we switched the insertion trigger from Mouse Click to Mouse Over. If you run the dashboard and make the mouse hover over the area covered by Toggle Button, it will insert value 1 into spreadsheet cell H1. This cell triggers Dynamic Visibility of the Label component that will now appear.
If you go to the properties pane of the Toggle Button component, you can set Source Data, which is in the General tab. Here, you can define which values should be put into the Destination cell:
The following screenshot shows the Source Data table:
