Tableau Pop-Out and Collapsable Menu Functionality

I wanted to share this with the Data Viz\Tableau community. This article will give you step by step insight on how pop out menu and\or collapsable menu functionality is possible and can work within Tableau. Before I begin, I am fully aware many have built dashboards similar to this before and have shared coding techniques in this area as well, most notably Robert Rouse from Interworks, Matt Lutton and Joe Oppelt's great video on "Sheet Swap and Pop" and Joshua Milligan's article "Sheet Selection on Steriods." Undoubtedly, they have influenced my work here. Whether I have created anything novel or not...well I'll let the Tableau community make that judgement.

Here goes:

First, the Viz itself

Not a bad looking dashboard, but nothing to get all excited about unless you are a Raider's fan. But you will notice the 3 horizontal lines in the upper left. That is called a "hamburger" menu icon if you didn't know. I just found out this month too...so don't feel like you've been missing out all these years. Ok, so that little icon will be our control button to make this menu pop.

Upon clicking the hamburger icon this is what we get

Wow, pretty cool huh!? It's a fully functional dashboard, too. You can insert any type of graph you want in the quadrants, no special coding for that. You can also resize the direct containers of the graphs and there's zero negative affect. With the side panel or without it you can see all the graphs and their full content. Without the side panel they are about 500 pixels each, but with the side panel the graphs get moved over to the right and get resized at 400 pixel each. Now click on the X in the side panel and you are back to where you started.

So here is how it is done. Step by Step (pretty much)

Below are the main pieces of the puzzle. You have to literally think outside the box (screen). While 1000x800 will be your desktop size, your workspace size is actually 1250px (see below)

I've done my best to label the pieces when needed, such as Container 1, Container 2, etc. These should be helpful as it is easy to get quickly lost.

Default View. So do you want to highlight the Pop out function or Collapse function first?

By default my dashboard is in non-popped out mode. Now, you can make it by default that the side panel is popped out, but that makes the whole idea of a pop out menu a little pointless in my opinion. The popping out action is a little more impressive than the collapsing action, though perhaps there are use cases exist where you would want to start with the menu already out. Say you have tons of filters selections and what is needed after making selections is to increase the viewing size. So in that case the X button really becomes the "make big" or "now show me the graphs" button

Putting all the pieces together.

1. Floating container B is placed on 1000w Dashboard
2. Then the floating container A is then placed over B, producing the overlap I show in the above diagram

Using the layout dashboard control, floating container A is placed at -250px in the X position, this effectively places the dashboard “outside” of the dashboard screen space and now occupies what I referred to as workspace (see below)

How the dashboard looked when the menu is popped out

There is of course more details to the dashboard, but those are the major pieces. I have this posted on my Tableau Public page already.

I also show how to create a version where the popout menu is on top versus the side.