3 Ways to Add a Button to a Tableau Dashboard

Multiple Options for Navigating Users Between Dashboards and Webpages

How to (1) use the Button or Navigation dashboard object introduced in Tableau versions 2018.3 and 2020.1, respectively, (2) pass values between dashboards by creating buttons with worksheets, and (3) use the Image object to direct users to external websites.

Hi, this is Ryan with Playfair Data TV and in this video, I’m going to show you three different techniques for adding a button to a Tableau dashboard. For all three of these techniques, we’re going to be using this Super Sample Superstore dashboard.

I’ll share a link to download this and the related content below the video, but in case you’re not familiar with this dashboard, it has two primary views, an Explanatory view and an Actionable view. I’m just going to show you the two views very quickly and give you a quick tour of this dashboard. Those are the two views, and I’m going to show you a couple of ways to link between those two.

Option number one, I’m going to start with the newest technique to add a button to a Tableau dashboard, which is to use a Button or Navigation object. The Button dashboard object came over with the introduction of Tableau Desktop 2018.3. Note, however, that in 2020.1, Tableau began naming this new object Navigation. So depending on the version of the software you have, this will either be called Button or Navigation.

Here at Playfair Data TV, we always use the latest version of Tableau, so the object is called Navigation. To use that Navigation object, you’d simply drag it onto the view. I will change that object to be floating and drag Navigation onto the view, kind of put it up here in the header. That’s what the button looks like by default. It’s grayed out until you actually link it to something.

To change both its format as well as what it is being linked to, click this down arrow that appears when you select the object and click Edit Button. And there’s quite a few options in here. The main one is this Navigate To dropdown. It’s very intuitive. You’re simply picking, where do you want this button to navigate the user to? I suspect that’s why Tableau changed the name of that object. We’re navigating users between sheets and dashboards.

I’ll click the Prescriptive tab. A couple of other options you have available to you– you can change the button style from the default, which is Text, to Image. And if you choose Image, you can choose a custom image on your own computer. So there’s very flexible formatting capability with this Navigation object. I’ll leave it at Text for now just to show you a couple of other things you can change. You can change the font color, size, and format. This would be an important one. You can change what’s actually shown as the text on the button. So I’ll call this Go To Action Tab.

Anytime you see the Apply button in Tableau, you can preview the change before you accept it. Notice when now that I’m linking this button to a different page, its formatting also kicked in. It’s not just grayed out. You can also change that formatting here. So maybe I’ll change the background to white and apply that and give it a reverse contrast.

Now that I’ve changed the background to white, I probably want to change the font color to something darker. I’ll click Apply again, just make sure I can still see that. You can also add a border. You can also add a tooltip. This is the information that will appear when you hover over the button. A nice technique or a way to use this is to add a call to action. Maybe explain to the user what’s going to happen if you click on that button. Hopefully it’s already intuitive, but this just gives you a little bit more flexibility.

You could say, if you click this, you’ll go to a different dashboard. And that’s what’s going to appear when you hover over the button. I’ll call that first technique good for now, click OK, maybe I’ll line this up a little bit better. And notice when I hover, there is the tooltip, the custom tooltip that I applied. If you click this, you’ll go to a different dashboard. And to test the functionality, I actually have to either go to Presentation mode or hold the Alt key while I click on it. If I hold the Alt key and click Go To Action Tab, it takes me to the Actionable tab. So that was technique number one.

Technique number two is kind of the old school way to make a button in Tableau, so prior to Tableau Desktop 2018.3, when we didn’t have the Button object, you had to create a button on a separate sheet. While this is outdated and there’s a newer way to do it, I would not call this technique antiquated or useless, because it has at least one extra value of allowing you to pass a value between dashboards.

So I’m going to show you how to make a button with a separate sheet. And again, the reason you might want to choose this option instead of the new, easy way to do it, is you can actually pass values between the dashboards. This can be used, for example, for filtering the landing page or wherever the user gets navigated to.

Let’s say that between my Explanatory and Actionable tabs, I want to filter this map. Well, I happen to know that this particular dashboard was made with parameters as my filters, so I’m going to first remove that filter just to show you that this is working. So I remove my parameter filter. There’s an entire map of the US. But what I’m going to do for the second technique is we’re going to add a button that filters the landing page at the region that had been clicked on.

So let’s just start with the West region. I’m going to make a button for West. If you click that West button, it’s going to not only navigate you to the second dashboard, but it’s going to also filter that dashboard to the West region. To do so, I’m going to start a new sheet. I’ll call this my West button. And to get started, I’m going to double click in any blank space on the Marks Shelf, which allows me to add a word in the flow. I’m going to start with an open tick mark and I’ll say, Go to West. Closed tick mark.

I could have made a calculated field and then drug that to the Text Marks Card, but I’m doing this to show you another way to use Tableau in the flow. But what I just did was created my button text. That’ll eventually show up on my button. I’m going to change the mark type back to Text. And very important, whenever you’re adding something in the flow on a Marks Shelf, by default, whatever you type is getting added to the Detail Marks Card. I know that by looking at this icon.

Well, if I want this to show up as text, I need to move it from the Detail Marks Card to the Text Marks Card. You can do by just dragging the pill to the Text Marks Card. And now my button text is showing up.

Just like with the Button or Navigation object, because this is its own sheet, I can essentially format exactly how this button looks. I can click on the Text Marks Card. I can center the alignment. I can click this ellipses, make the font a different color, different size, different font type, et cetera, essentially, full formatting flexibility of this button. But I’ll call this button fine for now. We’re just calling it Go to West.

Maybe I will add a border around it by adding row dividers and column dividers, just so that it shows up a little bit better. And we know exactly where the button is. OK, and then I’m also not loving this tooltip. You could, of course, edit that. I’m actually just going to not show the tooltips. I think that’s an intuitive enough call to action right there on the button text. It says Go to West.

I’m also going to filter this button to the West region and drag region to the Detail Marks Card, so that that value is now connected to this button. So that, again, this is the value in using the older technique. We not only made a button, it’s formatted however I would like, just like the new button and Navigation object. The difference is I can connect a value to this button. I put the Region dimension on the Detail Marks Card and filtered this whole sheet to the West region, so this button carries with it a value of West, essentially.

Now if I go back to my dashboard and add that West button as a floating object, maybe over the West region and make this fit the entire view. Whoops, I accidentally clicked on the button. That’s not what I wanted to do. I’m going to be kind of quick, here, with the formatting, but I’ve added this West button just to remind us what the second page looks like currently. We have a map of the entire US. But now back on my first dashboard, I’m going to add a dashboard action. Dashboard. Actions. This will be a Filter action and it will only run on if you click the West button. I will have it run on Select, and here’s the key to this type of dashboard action to get this technique to work and to pass values.

The target of the action is that second page. So it’s called Super Prescriptive. I don’t want anything to be filtered except for my map, so I will click the first sheet on the Prescriptive dashboard, the last sheet, and then erase everything except for Prescriptive Map. So I’m saying if you click the West button, go to the Prescriptive dashboard, and filter the Prescriptive Map.

There’s only one field on that West button. It’s Region, so I can leave this as All Fields for target filters. I’ll click OK and click OK again. I’ll put this in Presentation mode this time to show you. If I click on the West button, not only does it navigate me to the second dashboard, but it gets filtered automatically to the West region because we passed that value with the button, So that’s the advantage of using it.

I show you on a different video, here, how to use a similar technique to pass either a filter and/or a parameter, even to an external source. That’s even more advanced than this if you want to check that out. But I really just want to make a case for the older technique, and that was technique number two on how to add a button to a dashboard.

Third technique is the easiest of all of them. If you ever need to add a button that links to an external web page– so, for example, if you wanted to throw a logo on a dashboard and have the user be able to click on that logo and take the user to your web page, what you can do is simply add an Image object. So I’ll go back to my first sheet, and let’s just say I wanted to throw– there’s not a lot of room, I’m noticing.

Maybe I’ll actually go to the third dashboard in this workbook called Annotations, and I’ll just I’ll throw a Playfair Data logo up here in the top-right corner. I’ll click the Image object, make it floating, drag Image on to the view, and choose an image on my computer.

For this one, I wanted to grab a logo. I’ll click open. You can always click the Apply button to preview how that image is going to look. Maybe I’ll center it. But here’s the important thing– the Target URL. You simply set the Target URL– playfairdata.com. I’ll click OK and maybe resize this a little bit. And now if I go to Presentation mode, actually I’ll just hold the Alt key while I click Playfair Data. It takes me straight to the playfairdata.com web page.

So that was three different techniques for adding a button to a Tableau dashboard, all with their own pros and cons and ease of use.

I’m Ryan with Playfair Data TV – thanks for watching!