• DataZoe

Report overlay to highlight report features

When I show a report to someone to use, I find myself pointing to the different parts of the report and explaining what they do, or incorporating a gif that shows the report actions in an email (or blog post!). I have tried incorporating gifs into the report itself, but I found that not to be as liked as when I do that in email. A couple colleagues of mine provide an overlay on their reports to give the person looking at that report the quick overview, and I adapted it to my recent Maven Analytics challenge. Here is the way I did it.

First, here is what the overlay looks like:

And you can see it in action in the publish to web report. https://app.powerbi.com/view?r=eyJrIjoiZWIxNjIzY2UtOWZiYi00NjczLWFlNTMtZGE0MDY5NGRlOWQ2IiwidCI6IjkyOWVlMzI0LTk3YzQtNDk1YS04MjM5LTZhZDg3NDk0MGVlYyIsImMiOjN9

There are two parts, one is creating the overlay and the second is adding the functionality to the Power BI report (spoiler alert: it's 2 buttons and bookmarks!).

Creating the overlay

I used SnagIt to take a screenshot of the report, and used the Snagit editor to annotate it with text and arrows.

Once I was happy with the annotations, I then used Snagit eraser to remove the screenshot of the report behind the annotations.

I did this because

  1. my report is more dynamic, as in you are supposed to click around and change context, so it will keep showing what you are currently doing with the overlay, and

  2. if I make minor changes (wording, color, data labels) I don't need to keep updating the overlay.

Adding the functionality to Power BI

Now that it's created (and saved as an image), I add it to the report. I had some awkward space along the top with my main KPIs so I used that to make a big button with the "?", this is what I use to trigger the overlay.

  • Insert ribbon > button > help.

  • Now I size it and place it where I want it to be, changing the icon color to match my theme.

  • Next I insert another button, this time a blank button.

  • This one I remove all features of except the fill and the action. I make this one so it is the same size as the whole report.

  • On the fill of the button, I change it to 25% transparent (you can change the fill color to what best works for your report), put the overlay image we just created as the image, and have the image fit equal to "fit".

Now the buttons are in place, next I create the bookmarks.

  • Open the "Bookmark" and "Selection" panes (View ribbon > Bookmarks and View ribbon > Selection)

  • Make sure on the large button with the overlay image is highlighted in the "Selection" pane and add a new bookmark. In the ellipses of the bookmark, uncheck "Data" and check "Selected Visuals". Now doubled click to rename it to "Show Tip" (or whatever you want to call it!).

  • Now in the selection pane, click the little eye next to the big button visual you have selected, to hide it. Make sure it's still selected after hiding it, and create a new bookmark. Again, unchecking "Data" and checking "Selected Visuals". No double click to rename this one to "Hide Tip" (or whatever you want to call it!).

The unchecking "Data" and checking "Selected Visuals" makes it so the bookmark will not mess up what the report user is currently doing when they want to see the overlay, and that the overlay only impacts the button selected. It is a bit overkill to do the data uncheck when it's just impacting the button, but I like to be very sure with bookmarks!

Now we attach the bookmarks to the buttons actions. The reason I made that overlay itself a button was then the user did not have to hunt around to find an "X" or where to close it. A frustrated person will most likely simply click again, and that will cause the overlay to go way! I did include text that was in a darker color than the other tips with this info on the same place as the show button too that explain you can click anywhere. I thought about making it an X or including an X in the top right, and I will probably do that in future.

To add the actions:

  • Click the button in the selection pane (make sure it's visible to set properties) and go to Action, Type: Bookmark, find the appropriate bookmark, and also include a good tooltip.

  • For the overlay button I included the tooltip text "Click anywhere to hide this tip!"

  • For the help button I included the tooltip text "Tell me about this report"

And that's it!

In summary, this is what I did (you can use other tools of course!):

  1. I took a screenshot in Snagit

  2. I annotated and then erased the screenshot behind the annotations in Snagit Editor

  3. I created a help button on the report

  4. I created a blank button on the report and had it overlay the whole page

  5. I added the annotation image to the blank button as a fill with 25% transparency.

  6. I created a bookmark selecting only the overlay button to show the tip, making sure the bookmark was set to only work on "selected visuals"

  7. I created another bookmark selecting only the overlay button (this time invisible) to hide the tip, making sure again the button was set to only work on "selected visuals".

  8. Attached the bookmarks to the appropriate buttons and gave them descriptive tooltips.

Thanks and hope this helps you in your reports!

163 views0 comments

Recent Posts

See All