Welcome back to the third and final part of this Tableau 2022.3: Dynamic Zone series. So far, I have looked at sheet swapping and show/hide functions with Dynamic Zone. This week I am looking at using Dynamic Zone to zoom in and out on worksheets in a dashboard. I got my inspiration for this from a Viz of the Week by Samuel Parsons. Check it out here on his Tableau Public site Dynamic Zone Zooming – 2022.3 | Tableau Public. I was so impressed by this I downloaded it and it inspired this blog series. So, a bit of reverse engineering later and here we are.

Zooming about in Dashboards

Samuel used a Tableau Accelerator dashboard and gave it a makeover, as a result, I will use the Dashboard we have been using so far (slightly altered into quadrants). This is how it starts out.

Dashboard beginnings

Now there is a lot to get through in this and I am going to break it down into parameters and calculated fields before moving onto the dashboard layout and actions.

Step One: The Parameters (Spoiler: There are a few!)

Okay so with this dashboard we need lots of parameters

Parameters

Each of these will use the magic Boolean rule that DZV (Dynamic Zone Visibility) uses to show or hide different containers later on (based on their TRUE/FALSE values). Each one is the same in all but name and looks like so.

parameter

The way these will work once the calculated fields and dashboard actions are in play is that for every TRUE/FALSE value a quadrant has it will hide the other 4. Ah yes, this quadrant has five sides. For example, if the top left is triggered to show by the DZV then it closes top right, bottom right and bottom left, but also the container that both bottom left and right are in. All will become clear later if that doesn’t make sense now.

Step Two: Calculated Fields

Create a calculated field like the two below. They will drive the mechanics of whether to show or hide a viz is TRUE/FALSE.

Calc field

calc field 2

 

This then needs to be repeated with bottom right, top left and top right. Replacing the fields so that it has all the ones except the one in the title. E.g.

Bottom Right Filter
[ZoomTopRight]=TRUE AND [ZoomTopLeft]=TRUE AND [ZoomBottomLeft]=TRUE

Bottom Right Switch
[ZoomTopRight]<>TRUE AND [ZoomBottomLeft]<>TRUE AND [ZoomTopLeft]<>TRUE

and so on.

Step Three: Sheets

Before we move onto the dashboard, we need to create the buttons that will trigger the zoom in/out functionality. In the below screenshot you will notice in the sheets tab that I have “open” and “close” sheets for each quadrant.

Sheets example

As you can see it is a simple shape used to open and I picked another to represent close. Otherwise the sheets are identical. bar the filter being “FALSE” on the close sheet. Drop the corresponding filter into the filters and shapes marks and the switch into detail. Choose a shape of your liking and you’re good to go.

Step Four: Dashboard Actions

I actually find this the trickiest and will pass on a hint that may help. Building the dashboard for this needs to be organised. Throwing sheets on willy nilly won’t work. What we need is a series of containers where at some stage you have one container that contains two more that also containers 2 more. Clear as mud eh! You basically need a large container housing a top and bottom half and, in those halves, a further 2 containers left and right. So, you have a top half, bottom half and a left and right (these should correspond to the sheets and calculated fields and parameters we have created). Top Tip: Drop blanks into the containers as placed holders to be able to get multiple containers into one another.

Once this is complete you can start dropping the sheets into the dashboard and then we need to start creating dashboard actions. Again, there a lot of these. They are set out as below using the buttons relevant to that quadrant as the source sheets and affecting each other quadrant. For example, for this quadrant there is also a dashboard action for TopLeft to BottomRight, Top Left to Bottom Left and Top Left to Bottom All. This then needs repeating for each other quadrant, changing the parameters accordingly.

Step Five: Dynamic Zones

Now that all the calculated fields, parameters and dashboard actions are complete the last step is the DZV activation. Each quadrant container needs to be a dynamic zone (Top Left, Top Right, Bottom Left and Bottom Right) and the two halves (Top All and Bottom All). Thats six dynamic zones in all.

Here you can see I have arranged the containers with the buttons and text boxes and inside the dynamic zone containers as I obviously want them to hide when triggered.

And there you have it. It should look like the gif below.

That brings to an end the Tableau 2022.3 Dynamic Zone use case series. I hope this gives you some inspiration and its potential to create more interactive dashboards. Below is a link to the viz on Tableau Public.

 

 

The Data School
Author: The Data School