• Never Ending Navigation: Buttons that Deselect Themselves

    Navigation buttons can make a series of dashboards easier to use.  The most common approach has been using a view that shows an image, shape, or text for the user to click to trigger an action that filters into another dashboard.

    The main issue is that once a mark in the navigation view is selected (which triggers the action), then if the user goes back to the original page, then they have to first deselect the mark before they can trigger the action again.

    Check out the issue here by navigating between the sheets a few times:

     

    And now that you’re frustrated, consider some of the options:

    • Use a hover action. This actually works nicely in some cases, but can be accidentally triggered all too easily.
    • Use a Story. Another nice option in many cases.  However, you are dealing with snapshots of dashboards and vizzes, so be aware that things like global filters and parameters won’t carry through from one story point to the next.  Still, consider this option and apply it where it makes sense.
    • Instruct the user to double click the navigation button. Since the first click selects and the next deselects, a double click will work… if the user is fast enough so the action doesn’t navigate before the second click.  And I’m not too fond of telling the user to do something outside the normal use patterns.
    • Give up. Don’t do this.  Anything can be done in Tableau.  There has to be a way.  I just know it.  And there is.  Remember how the “Fire” button disappeared in the Star Trek Tableau game?  There’s a clue in that behavior that we can exploit to get the navigation working the way we want.

    NeverEnding Navigation! That’ll make anyone smile!

    The NeverEnding Data Story

    The NeverEnding Data Story


     

    Use a Navigation Data Source

    This is important, because we’ll want a data source that we can apply a global filter to and not mess up other vizzes.  It’s also good practice to use separate data source(s) for things like navigation buttons, information and help buttons, and the like because they can be kept small to avoid a performance hit (I learned that the hard way when working with a hundreds of millions of rows data set and I used it as the source to create a simple help button viz).

    Here, we’ll just use a source with a single column (ID) with rows 1 to 100.  We could get away with less rows (as few as 2), but the fewer the rows, the higher the chances that we’ll end up hitting a previously selected value that will frustrate the user.

    The only other thing we’ll do is create a calculated field to increment the ID until we hit 100 then we’ll reset back to 1:

    Navigation Calculation

    If Tableau categorizes the calculation as a measure, re-categorize it as a dimension. This is necessary because we’re going to use it for an action filter and Tableau requires dimensions for action filters. (Thank you Jason Scarlett for pointing out this clarification in the comments below!)

     

    The Views

    It’ll depend a little on your navigation scheme.  Here, I’m keeping it simple with a view for forward and another for backward navigation.

    Here’s forward:

    Forward View

    I just put the calculated field Increment ID on the Detail of the Marks Card and set the mark to Shape (right arrow).  The back view is identical except that I used a back arrow shape.  I won’t worry about the fact that I’m getting a mark for each value of Increment ID.  We’re going to use actions to filter, so I’ll let the action filter take care of everything.

     

    Adding Navigation to the Dashboards

    So, the first I thing I do is add the views to each dashboard.  You’ll once again notice the multiple marks for forward and backward.  That’ll get cleared up in a step or two:

    Profit Dashboard

    Once I get the views added to each dashboard, I’ll setup the action.  From the Dashboard > Actions menu, I’ll add a Forward action and a Backward action on each applicable dashboard.

    Here’s the setup for the action:

    Action

    Several notes:

    1. It will be on the selection of the button from one dashboard as the source and the next (or previous) as the target.
    2. When the action is cleared, I will Leave the Filter
    3. I specifically map Selected Fields – and this is one of the secrets: map Increment ID to ID. Why?  Because that will mean that each action will filter the navigation to the next ID – meaning that a new, deselected mark will be drawn.  So when I click the forward button on one dashboard I’ll navigate to the next with forward and backward buttons for ID 2 which in turn will trigger actions to filter the next buttons for ID 3 and so on, until we reset upon reaching 100.

     

    Once you have the action set up for one dashboard, go ahead and trigger it.

     

    And now, the final two Tableau secrets:

    First, find the drop down caret on one of the navigation button views (upper right of the border around the dashboard object) and use it to show a quick filter for the Action (ID).

     

    Then, once you have that quick filter, use the drop down caret on it to apply the action filter to All Using This Data Source.  So, this one action will be universal to all sheets using the data source – including the one that triggered the action!

    Apply to All

     

    Now, just go through the remaining dashboards and setup the actions for all the buttons.  And you are done!

    Here’s an example (and it uses the old Hide Control Filters in a Secret Place trick so you can see how the filter is working in Desktop if you download the workbook.)

     

     

    Yes, it’s a bit more setup that the traditional way of adding navigation buttons – but you’ve just made life a whole lot better for your users.

53 Responsesso far.

  1. Jason Scarlett says:

    Great stuff.

    I had some issues getting the action filters to work until I moved the [ID] and [Increment ID] from the measure shelf to the dimension shelf. Not sure why.

    I also had some issues with the action filters not filtering (only highlighting) when I had pre-existant vizs already showing … I couldn’t track down why I had to delete them and re-add them to get it to work … maybe it was just me.

    • Joshua Milligan says:

      Jason,

      That’s a great point about the need for [Increment ID] to be a dimension. Actions can only pass dimensions as filters. Thanks for pointing it out! I’ll clarify the post so it won’t trip others up. I’m not sure what the highlighting was about – but I’m glad you got it working!

  2. craig says:

    Very clever!

    I’ll definitely be using this one

    Thanks…..

  3. Ville Tyrväinen says:

    Nicely explained Joshua 🙂

  4. Rahul says:

    Awesome Stuff !!!
    This is Very Helpful

  5. Wendy Foslien says:

    Very nice! Thank you!

  6. Kathy says:

    I am very interested in trying this and have never thought to create a separate navigation data source before, but tell me does the navigation data source have to be either joined or blended with the main data source? I have not done so and I can’t seem to select my navigation data source for the Target Dashboard when setting up the action……

    • Mike says:

      I’m having the same problem. Did you ever figure it out?

      • Brian says:

        I have the buttons as a separate datasource and have do not have an issue with it being an option. The filters are not selecting anything from the other datasources, so you don’t need to blend/join. Have you been able to fix it yet?

      • Luke says:

        I’m now having this issue. Anyone solved it?

  7. tanveer khan says:

    Hey this is nice. Was working on your workbook and i figured this could be achieved with just two rows of ids (1,2) in the navigation datasource and selecting the target filters as :
    source field——target field
    increment id——- id
    id————- increment id
    This seems to work or am I missing something?

    • Joshua Milligan says:

      Great point! Yes, that would totally work. The calculated field helps me conceptualize it better, but there’s no reason it can’t be materialized as a column (when you extract it, the calculation is probably getting materialized anyways)

  8. Jeff Carlson says:

    This is really cool. I recently built a data subscription product with a pretty comprehensive user flow and had finally resigned myself to the “Instruct the user to double click the navigation button” option for my nav buttons.
    I was looking for something else but stumbled upon this write up, and will definitely revamp my product to use this trick. I also did not think about using a different navigation data source (just like Kathy) but will also incorporate that now as well.
    Thanks for the great work and for taking the time to write it up so well.

  9. Michael W Cristiani says:

    Josh,

    It was a pleasure to see you at DATA15!

    I have a slightly different use case, and was wondering if it might be possible to modify this solution. The user wants a button on a target dashboard that, when clicked, triggers navigation to the last other dashboard they were on (the one they came from, essentially) to get to the target dashboard. There is only always this one target dashboard, but it becomes activated from many other dashboards. What do you think?

    MANY BLESSINGS!
    Peace and All Good!
    Michael

    • Joshua Milligan says:

      It was great to see you too! I can’t think of a good way to do what you’re asking. The issue is that the action has to specify a target dashboard and I can’t think of any way to dynamically change that. The only option I can think of is to set up multiple buttons (one for each incoming dashboard) and then have the incoming action hide all but the one that is the link back to it. That would probably be cumbersome to maintain — but might work!

  10. Thanks for publishing this, Joshua. The (occasional) double-click to navigate problem has been annoying me for a long time, and now it’s been banished to the phantom zone.

  11. Jambesh says:

    Nice Post Joshua.. !!! Hope our users will jump on floor after 1Click to land on a different dashboard…
    No more 2Click.

    Thanks
    Jambesh

  12. Alexandra says:

    Hi Josh,

    Lovely article! Could you help me adapt this solution? In my case I start with a landing page with four dimension filters and use navigation buttons to move to and filter four dashboards accordingly. Furthermore the user would like to move from two of these filtered dashboards onto the other two keeping the “first” filter (and also move back – which I have not achieved).

    A little more on the filters, the user would like to select several options and also search for these options, so I have made them custom list and unchecked ‘Include all values when empty’.

    I am getting the sticky button situation but also sometimes the navigation occurs without the filter being applied. Any ideas of how to tackle both problems at once?

  13. Dave says:

    Does this solve the issue where links between dashboards often send you to the wrong dashboard? I don’t really care at all about the double click issue, but it is a serious problem that I have where links are set to go one place and they take the user to a different place about 1 out of 5 times…

    • Joshua Milligan says:

      I don’t know that I’ve seen that. Do you have an example?

      • Mark Usher says:

        Yes it’s a common problem (action filters taking you to the wrong dashboard sometimes with no rhyme or reason why it works sometimes and not others). Many others are having the same problem I believe. I’ve explained my specific issue with it in another post.

  14. Jon G says:

    This is a clever solution to a very frustrating problem. Thanks!!

  15. Ken S says:

    This is fantastic! Super-clever trick, and addresses a real pet-peeve.

    FYI – I posted a workbook to the Tableau Community Forum Workbook Library with this technique applied:

    Single-Click_Navigation_Animals.twbx
    https://community.tableau.com/docs/DOC-8483

    As I mentioned in my notes, because the ONLY data source in this workbook is for the navigation buttons, a dashboard can be easily cut-pasted into a different workbook to start building this functionality.

  16. Kelly McGrath says:

    I am new to Tableau and I am trying to follow the above but but you lost me at the increment id part. Can you explain that a little more?

  17. Ed says:

    This is a real game changer for me – I can’t thank you enough.

    I’m wondering if the same logic could be applied to create an onscreen “reset” button to reset filters?

  18. Tabatha Sullivent says:

    This is very helpul. I haven’t been able to see one navigation button at a time. I see more than one and then … How can I see one navigation button?

  19. Amit Gupta says:

    Hi …this is very helpful. I see one issue when i publish dashboard on server. When i click to back or forward, it opens next dashboard in separate tab/window. Is there a way to control and open in same tab/window?

  20. tobmar says:

    Wow, this is a very creative workaround. Made my workbook so much better for the user, thank you.

    Still, it’s a shame Tableau doesn’t have a simple scripting language for things like navigation. It’s very time consuming to build workarounds like these.

    • benmelek_admin says:

      Yeah, one of my hopes is that Tableau developers see workarounds like this and realize that the feature is something people want and could be implemented as something easy for the end-user. And this has happened before (e.g. the Rank() function had work-arounds before it was officially introduced).

  21. Thank you for this very usefull trick, but i just have one concern, does this method would work when we also include more fields in the detail of the buttons? for example, i have a dashboard that needs to pass some geographical filters to the second pages (the user navigates to those 2nd pages by the buttons) and the way i achieve this was by putting those geographical fields in the details of my buttons, would you thing this can be done ussing this method?

    Thaks and regards,
    Angel Rodríguez

  22. Kathleen Foley says:

    I use this technique all the time and it’s amazing in Tableau Desktop. However, I just uploaded a workbook that uses this to Tableau Online (we are doing a free trial) and the navigation stopped working altogether. tableau Support seems to think it it this never ending feature that does not work with Tableau Online, because the more simple form of dashboard action navigation does work online.

    Has anyone been able to get this to work in tableau Online? (and out of curiosity) does it work in Server?)

  23. Luke says:

    For those who encountered the problem that I did, you need to have a button (or an object) associated with the data source (Navigation) on your target dashboard in order to be able to set up the Target Fields > Selected Fields.

    If you don’t have this, you can’t select that data source as a target. Therefore you have to have at least one navigation arrow/button on each page. Also, remember to place them on each dashboard before setting each one up.

    Hope this solves any confusion.

  24. Sandor Marton says:

    Hi, I have a problem.
    When I want to select the show the quick filter for Action(ID), it doesn’t appear on the list. Do you have any idea why it happens?

  25. Dinesh Kumar S R says:

    This function is awesome Joshua, I just replaced my old button with this approach.

  26. Ulrik says:

    Nice trick Joshua! The need for deselecting the mark was such a nuisance. Thanks a lot!

  27. Rick says:

    Great addition for the bag of tricks! I use it all the time now.

    Thank you!

  28. HadAQuestion_NJ says:

    @Joshua

    Thanks for the post

    –My question, is there any way to use Action-filters to navigate between Dashboards (within the same browser window) WITHOUT having to publish “worksheets as Tabs”?

    Every attempt I’ve made launches the new dashboard in a new window

    THANKS in advance!!

    • Joshua Milligan says:

      You’re welcome! The only way I know of without publishing with the tabs option is to use URL actions. To get them to open in the same window, the original window must be opened using the ?:linktarget=_self querystring option (that is, the URLs that trigger the action aren’t the ones that need the parameter, rather it is the URL for the view that hosts the view that triggers the actions). Hope that helps!

Leave a Reply

Your email address will not be published. Required fields are marked *