An Introduction to Dynamic Zone Visibility in Tableau

Enhance Dashboard UX with Dynamic Zone Visibility

In this tutorial, Dan explains Tableau’s dynamic zone visibility feature and how it can be easily implemented in a dashboard. Combining dynamic zone visibility with parameter actions allows for an unprecedented level of dashboard user experience, which was previously impossible in Tableau.

Hi, this is Dan with Playfair+. In this video, I’m going to give you an introduction to Dynamic Zone Visibility in Tableau. By the end of the video, you’ll have a good understanding of what Dynamic Zone Visibility is and how it can be applied to your own dashboards. Also, by the end of the video, you’ll be able to recreate a similar UX to what you see on my screen.

Right now, I have to what seems to be a very simple bar chart, but with dynamic zone visibility, I’m able to select a bar and have a line chart appear right below it. Then I can deselect that bar and have the line chart disappear. Now, let’s jump straight in with a quick explanation of what Dynamic zone visibility is. Dynamic zone visibility was first introduced in version 2022.3, and it gives us the ability to show or hide different containers, sheets, buttons, etc. within our dashboard. There are other features such as Tableau’s native show hide button or sheet swapping tricks that effectively do the same thing. But what sets dynamic zone visibility apart is its flexibility for UX and its own elegance.

So having said that, there are a couple of limitations with dynamic zone visibility. One being that it must be powered with very simple Boolean parameters or very simple Boolean calculations. It can be powered by calculations, but those calcs just can’t be in aggregate form. They’d be very simple. So having said that, let’s jump straight in with some examples. Okay. So, I jumped ahead already and created a very simple bar chart. But if you don’t have one already created, then just place Sub-Category in the Columns shelf, and then SUM of Sales onto the Rows shelf.

Now, we’re going to power our first sheet using dynamic zone visibility with a very simple Boolean parameter. So, in the data pane, right-click and choose “Create parameter”. Rename the parameter to dzv 1, change the data type to Boolean, and choose “Ok”. Now, navigate to a new dashboard. I’m calling mine Example 1. Drag a Vertical container into the view, drag Bar into that vertical container, then drag Line into that same vertical container but underneath Bar. Now, select that Bar sheet and we’re going to control this bar sheet with that Boolean parameter that we just created.

We’re going to say Control visibility using value Parameter equals dzv 1. So, nothing’s going to change because the value of that parameter is true. But if we show the parameter and change it to false, the bar chart disappears. So, it’s working as it should. It’s working just like a sheet swap if you know how sheet swaps work. Now, let’s go back to our Bar sheet and let’s take this one step further, and let’s use dynamic zone visibility with a calculation.

So, let’s create a new parameter and call this dzv 2. We’re going to change the Data type to String and Allowable values to List. In the first value, type out bar. In the second value, type out line. Choose “Okay”. And now we’re going to create our first calculation. Call this dzv | line. And the logic is going to be dzv 2 = Line. So, your dzv 2 parameter that we just created, that string list parameter equals “Line”. Okay, create a new calculated field. Call this dzv bar. And the logic is going to be our dzv parameter = “Bar”. And that’s it.

Navigate back to that same dashboard. Choose the Bar sheet and change the Control visibility using value from our parameter that we created in the first example to the dzv | bar calculation. Nothing’s going to change because that parameter equals “Bar” already. And then we’ll click our Line sheet, then choose Control visibility using value, and assign it the dzv | line calculation. And you’ll see the line chart will disappear when I choose this. And that’s because the resulting value of that dzv | line calculation is False. Now I’m going to open up the sheet drop down and show that dzv 2 parameter. You can see the value is “Bar”, but as soon as I change it to “Line”, the bar disappears, and the line appears. So that’s perfect. That’s exactly what we want. And these are two basic but very applicable examples of how you can use dynamic zone visibility in your own dashboards.

Now we’re going to take this one step further and recreate this demo sheet where when I select a bar, the line chart appears and highlights that Sub-Category value. And then when you select it again, the line chart disappears, and the highlight goes away. So, let’s navigate back to our Bar sheet. We’re going to create a new parameter and we’re going to call this one dzv 3. We’re going to change the Data type to String, and our Allowable values are going to be “All” and the Current value is going to be blank. Choose OK. And we’re going to go ahead and show this parameter.

Next, we’re going to create our first calculated field. And we’re going to call this dzv 3 | append or delete. So, this calculation is going to be used in conjunction with a dashboard action to basically either send a Sub-Category value to our blank string parameter or replace that value that’s already in that blank string parameter with blank quotation marks. So, or a blank string as in no text at all. So, the logic is as follows. IIF, so Immediate IF CONTAINS our string parameter which is dzv 3 Sub-Category. So, if this parameter contains the Sub-Category that we selected, then we want it to replace in that parameter dzv 3 replace Sub-Category with no text. Otherwise, if it doesn’t contain Sub-Category, we want it to append a Sub-Category value that we selected, and the calculation is valid, so we are okay to move on.

We’re going to create our second calculated field, and this is going to be our Sub-Category highlight. So, I’m going to name this calculation accordingly as Sub-Category highlight. And this is going to be Sub-Category equals our dzv 3 parameter. And this is just going to highlight the value that we select.

And our third and final calculated field is going to be what actually powers our dynamic zone visibility. And we’ll name this dzv 3. The logic is going to be dzv parameter does not equal blank string. Okay, so this is important because we want our line graph to be shown when a Sub-Category has been selected but then be hidden when the Sub-Category is not selected. And so what this calculation is saying is we want it to be true when our parameter has a Sub-Category in it and we want it to be false when there’s no parameter in it, which will be controlled by that append or delete calculation. So, we’ve got all of our parameters, we’ve got all of our calculations built out.

Now let’s start assembling our view. We’re going to place dzv 3 | append or delete onto the Detail property of the Marks card. We’re going to place our Sub-Category Highlight onto the Color property of the Marks card. And I want to make sure that this highlight is working. So, I am going to type out “Phones” because I know that’s a Sub-Category into the parameter, and it is working. We have a true and false. And now I want to change the colors. I’m going to double click the color legend. I’m going to change this true value to a dark blue. I’m going to change the false value to a light gray. Okay, okay, we’re looking good here.

Now I’ll explain this when we start assembling our dashboard and creating our dashboard actions. But I want you to double click into the Marks card here, into the blank space in the Marks card and type TRUE. And then do the same thing but type FALSE. And this is for the purpose of a UX feature that I’ll explain later on when we’re assembling our dashboard. Now navigate over to our line chart and place Sub-Category highlight onto the Color property of the Marks card. And it’s working, but I do see that the True value is going underneath the False value. And so, I want that to be reversed. I want the True value to be on top of the False value. So to do that, it’s quite simple. Just rearrange your color legend so that True is over False. And you can see that is reflected in the graph. So, we’re looking good.

Now navigate to a new dashboard. We’re going to call this Example 2. I’m going to float a Vertical container into the dashboard. I’m going to place my Bar sheet inside of the Vertical container, then my Line sheet underneath the bar chart, but still in that Vertical container. I’m going to close out of my Color legend. And now I’m going to apply my dynamic zone visibility to the Line sheet. So select the Line sheet, navigate to the Layout pane, Control visibility using value. And then from the Sample-Superstore dropdown, choose dzv 3. Now if I clear out the value from this parameter, the line chart should go away. Perfect. It’s working as we’re hoping.

Now let’s bring this to life with dashboard actions. Navigate up to the Navigation pane and choose Dashboard, choose Actions, Add action, Change parameter, name this Sub-Category Selection. Our Source sheet is going to be the Bar sheet. We want it to Run on Select. The target parameter is going to be dzv 3 and the Source field is going to be the “append or delete”. Choose OK and choose OK. Now we’ll go ahead and test this out. So, when I select a bar, it should send whatever that Sub-Category value is to the parameter. And then that parameter will cause the dynamic zone visibility calculation to return True, which will then show our line chart. So, let’s test it out. Perfect. It is working as we expect.

Now there is one UX feature that I like to implement for these cases. And that is why I had us put that TRUE and FALSE value on our Bar Detail property. So, I want to implement an automatic deselect, so I don’t have to click a bunch of times to make new selections. So, if you’ll notice that there’s that black box around our bar when we select it and then we have to deselect it to get out of it and then reselect it to make a new selection. It’s just just a pain and it’s just good UX to get rid of that.

So, I’m going to navigate back up to the navigation at the top, select Dashboard, select Actions, Add action, create a Filter action, rename this “automatic deselect”. We want the Source sheet to be Bar. We want to Run on Select and our Target sheet is going to be Bar. And I want to Show all values. So, this is really important. This is why we put the TRUE and the FALSE on the Detail property of the Marks card in the Bar sheet. It’s basically going to fake Tableau out. I guess you could say Tableau is going to source that bar sheet and try to show all values. But there’s both true and false. But it’s going to get confused because it can’t show both true and false. So, it’s just a UX trick. So, we’re going to click OK. Click OK. And now it should have that automatic deselect highlight feature applied. And it does. Perfect. And that’s it.

Now I hope you enjoyed this video. At this point, you should be able to have a good understanding of Dynamic Zone Visibility, how you can apply it to your own dashboards and hopefully recreate this UX to bring your own dashboard alive. This has been Dan with Playfair+. Thanks for watching.