Removing Button Selections with Dynamic Zones
At TC26, Ken talked about the issues with marks being selected in Tableau and shared a bunch of tricks to solve them. (If you didn't see it, you can check it out here). He had a lot more content that I wish he could have shared...do you think we could talk Tableau into giving us 2 hours next year?
One thing Ken didn't have time to dig into was toggle buttons. He has a number of ways to deal with the issues they cause (which I will talk in detail about below), but while working on a client dashboard, I recently developed a new technique that is super simple and that I will always use from this point forward. Hint: it utilizes dynamic zone visibility.
Okay, so let's talk about what we are trying to accomplish, then we will get into the issues it causes, then provide the solution.
So lets assume we have this KPI dashboard.
This dashboard shows line charts for 12 categories. At the top, there is a parameter that allows you to show 1 year of data or 2 years of data.
If you toggle from 1 Year to 2 Years, it adds in a second, previous year line in gray. Below is one chart with 1 Year selected and then 2 Years selected.
This works perfectly fine, but since there are only two options, I'd prefer to just give the user a toggle button. Clicking the button toggles it back and forth between the two options...like this:
I feel like now is a great time to say that I think Mark Wahlberg is super cool. That's all.
So let's set up this toggle button. If you want to dig into it further, you can check out the Tableau Public workbook here.
First, I created two images to be used for the button. I just created them in PowerPoint using our Buttons template. The two buttons look like this:
When you have these ready to go, save them in your Shapes repository.
The end goal will be to make these buttons, when clicked, send a value to the parameter (that we showed above) via a parameter action. So we already have the parameter, now we just need a couple of calculations. The first will simply yield the current value of the parameter.
Years to Show - Calculation
// Just the value of the parameter
[Parameter: Years to Show]
Now, create a new sheet, and place this calculation onto the Shape card. Lets assume that your parameter is set to 1 Year, you should now click the Shape card and apply this new 1 Year shape. When done, change the parameter to 2 Years and apply the other shape. Now when you manually change the parameter value, your shape should change along with it:
Seriously, don't you think Mark Wahlberg is cool? Name a Mark Wahlberg movie that you don't like. Exactly, you couldn't do it, could ya?
Okay, lets now create the calculation that we will use with the parameter via parameter action to toggle back and forth. This calculation says that when the value of the parameter is "1 Year", yield a value of "2 Years" and when it's "2 Years", yield a value of "1 Year" - essentially the other value.
Years to Show - Toggle
// Toggle bewteen 1 and 2 years
IF [Years to Show - Calculation] = '1 Year' THEN '2 Years'
ELSE '1 Year'
END
Place this calculation onto Detail.
Now, go back to the dashboard and place your toggle button sheet onto the dashboard. Now all we need to do is set up a parameter action so that when you click on that sheet, it sends that Years to Show - Toggle calculation to the parameter. So if 1 Year is selected, it will send a value of 2 Years to the parameter, and vice versa. So clicking it the button will toggle you to the other option. And from there, the parameter will do it's thing with the line charts. The parameter action should look like this...just feed the Years to Show - Toggle into the parameter.
When you are done, your dashboard should work like the following:
See how it toggles back and forth?
But did you see a problem? If you didn't, go back and watch the gif again and pay close attention to the clicking of the button (a button click will be shown with a yellow circle around the cursor). Did you see it? It takes two clicks to get the button to toggle not to mention that weirdo outline.
You know who's not weird, Mark Wahlberg. Facts!
So what is happening here? Well, when you click on the button, it not only fires off the parameter action, but it also selects that mark; it selects the button. When you click the button again, that click deselects that mark. Then you have to click it a second time to initiate the parameter action. So every time you toggle, you have to click once to deselect the mark then click a second time to initiate the parameter action and make the button toggle.
This is not a good user experience in any way and if you watched our presentation at TC26, then you saw a lot of this type of thing. Some of the tricks that Ken showed work decent for this toggle issue, but not great. In step my new technique using dynamic zones.
To do this, we will have to set up the toggle button a bit differently. Instead of doing this all in one sheet, we will do it in two sheets.
So create a new sheet. Place the Years to Show - Toggle calculation onto detail. Change the mark type to shape and just pick the 1 Year button. This sheet will always show the 1 year button...the shapes will not toggle. Name the sheet to make it clear that this is the button associated with the 1 Year option:
Duplicate this sheet and change the shape to the 2 Year shape. Name it to make it clear that this represents the 2 Year option.
Okay, now you have two sheets and the buttons on those sheets never change.
Now, let's go back to Mark Wahlberg. I bet you thought I was going to say "let's go back to the dashboard", but alas I did not.
Okay, let's now go back to the dashboard. You can remove the original toggle button sheet that we created. Add both the sheets you just created to a vertical container (remove the sheet titles). The dashboard will look like this:
Now, let's set up a parameter action where both of these sheets are the source sheets...so no matter which one you choose, it changes the parameter. The action should look like this and work the same as the prior action we set up, but on both sheets:
So now when we click one button, it changes the parameter values (see the line charts change as I click). And then when we click the other button, the parameter value changes back.
In the above example, the problem with selecting and deselecting the marks seems to be solved as we are jumping back and forth between the buttons - we never click the same button twice in a row. But if we did click one button twice, we'd have that same select/deselect issue. And of course, we still show two buttons which makes zero sense.
So, lets force the users to never click the same button twice by making the button that they click disappear when they click it. This means that there will always be one unselected button showing at any given time.
How do we do this? Well, we call in the big guns...Mark Wahlberg! Sorry, I meant to say Dynamic Zone Visibility. If you are not familiar with Dynamic Zone Visibility (DZV), then check out this link. Essentially, what it allows you to do is show/hide elements (like sheets) via TRUE | FALSE parameters or calculations. So, when the parameter has 1 Year selected, we want to show the 1 Year sheet (TRUE value) and hide the 2 Year sheet (FALSE value) - and vice versa. So let's create two DZV calculations, one for each sheet:
Dynamic Zone - 1 Year
// Does the parameter = 1 year?
[Parameter: Years to Show] = '1 Year'
Dynamic Zone - 2 Years
// Does the parameter = 2 years?
[Parameter: Years to Show] = '2 Years'
Both of these calculations will yield a TRUE or FALSE value. One will always bet TRUE and one will always be FALSE.
Now go back to the dashboard and apply these to each of our button sheets. Here is a gif showing how to do this:
You may have noticed that when I applied the dynamic zones to the second button sheet, it disappeared. This is because the value of the calculation was FALSE.
So now, we've forced Tableau to hide the button we just clicked. We can then click the other button and when we do so, it fires off the parameter action and then that button is hidden. Users will only see one, unselected button at any given time. And when you use it, it looks like this:
You can see it selecting the button, then it appears to deselect it. It's not really deselecting the button, it's just hiding the button.
And one last final note, I prefer to turn animation off for these sheets so that you don't see the fading of the button...the button just changes:
And that's it! I know this blog post was a little bit lengthy, but when I implemented it in this workbook, it only took me 5 minutes. It's really efficient.
Let us know what you think and thanks for reading!!!
Also, Mark Wahlberg is awesome!
───────────────────────
No comments: