{"id":1859,"date":"2020-01-08T13:48:19","date_gmt":"2020-01-08T13:48:19","guid":{"rendered":"https:\/\/www.biconnector.com\/blog\/?p=1859"},"modified":"2021-08-30T13:48:09","modified_gmt":"2021-08-30T13:48:09","slug":"3-ways-optimize-space-usage-tableau-dashboard-hidden-containers","status":"publish","type":"post","link":"https:\/\/www.biconnector.com\/blog\/3-ways-optimize-space-usage-tableau-dashboard-hidden-containers\/","title":{"rendered":"3 Ways To Optimize Space Usage In Tableau Dashboard Using Hidden Containers"},"content":{"rendered":"\n
\n\t\t\t\t

Hidden containers are one of the features in Tableau that optimizes space utilization on a dashboard and improves its interactiveness. There are several uses for this feature and this article will look at some ways you can spice up your dashboard with hidden containers.<\/p>\n

\n

\n
\n

[Tableau Hacks] Improving Dashboard With Set Actions >><\/a>
\n<\/b><\/p>\n<\/div>\n<\/div>\n<\/p>\n

Using hidden containers to add more information<\/strong>
\nIn dashboard development, you may receive requests from users to include the underlying data you used to build your dashboard but this information might be too much detail to showcase in the dashboard. In this scenario, it is good to use hidden containers and creating a toggle button to switch between the detailed and chart views.<\/p>\n

Here are the quick steps to achieve it!<\/p>\n

    \n
  1. Connect to your superstore data set and build a simple dashboard as shown in the screenshot below.<\/li>\n

    \"Profit<\/p>\n

    \n

    \n
    \n

    [Step-by-Step Guide] Row Level Security (RLS) Setup in Tableau >><\/a>
    \n<\/b><\/p>\n<\/div>\n<\/div>\n<\/p>\n

  2. Build a chart that shows the details of the charts on the dashboard as a text table, along with Row and Column totals.<\/li>\n

    \"Tableau<\/p>\n

  3. Now go back to your dashboard, and drag a floating layout container (vertical or horizontal) into it, and float this over your charts as shown in the screenshot below.<\/li>\n

    \"Floating<\/p>\n

  4. In the layout menu, change the background color to white. This will ensure that once we toggle to the detail view, the underlying chart view is hidden behind the container.<\/li>\n

    \n

    \n
    \n

    [eBook] The Ultimate Guide to Supercharge OBIEE With Tableau >><\/a>
    \n<\/b><\/p>\n<\/div>\n<\/div>\n<\/p>\n

    \"Change<\/p>\n

  5. Now drag your text table with the detailed view of your data (created in step 2) to this layout container. You need to make sure the chart is within the layout container for it to work. The current view should now look like the screenshot below.<\/li>\n

    \"place<\/p>\n

  6. Now click on the detailed view chart and select the layout container.<\/li>\n

    \"Select<\/p>\n\n

    \n

    \n
    \n

    [Tableau Hacks] Improve Report Interactiveness With Parameter Actions >><\/a>
    \n<\/b><\/p>\n<\/div>\n<\/div>\n<\/p>\n

  7. Once the layout container is selected, you\u2019ll notice a blue border around it. Select Add Show\/Hide Button.<\/li>\n

    \"select<\/p>\n

  8. You\u2019ll notice an x-icon showing up on your dashboard. Select it and click Edit Button.\"select \n

    \n

    \n
    \n

    [eBook] Tableau vs OBIEE: Which is Best for What? >><\/a>
    \n<\/b><\/p>\n<\/div>\n<\/div>\n<\/p>\nIn the Edit menu, you can choose to select a button view or a text view. When you select a button view, you can use an image to show how to display an item hidden or closed in your container. Text view allows you to create your own text buttons and display whatever information you want in them. In this example, we will use a button view.<\/li>\n

    \"configure<\/p>\n

  9. First, click on Item Shown then select an image for it. Do the same for Item hidden and select an image for it. You can use the tooltip to show a user what clicking the button will do. When working with an image view, we can place a text box next to the button to show what it does. In the screenshot below you see a button that shows us when the chart view is shown and another when the detailed view is shown.
    \n<\/li>\n<\/ol>\n

    Using hidden containers to show filters<\/strong>
    \nJust as we used the hidden container to hide additional information on the dashboard, we can also place filters or parameters into a hidden container to equip the user display or hide them as needed.<\/p>\n

    \n

    \n
    \n

    [Giveaway] How to Securely Connect Tableau to OBIEE and OAC? >><\/a>
    \n<\/b><\/p>\n<\/div>\n<\/div>\n<\/p>\n

    Now let\u2019s take a look at the steps.<\/p>\n

      \n
    1. Select any chart and bring Region, State, and City to the filter shelf. Make the filters global by applying them to all charts using the data source.<\/li>\n

      \"create<\/p>\n

    2. On your dashboard, show all your 3 filters as floating filters on the dashboard.<\/li>\n
    3. Bring in a horizontal floating container to the dashboard and place the filters into it as shown below.<\/li>\n

      \"place<\/p>\n

    4. Select the layout container then choose Add Show\/Hide Button.<\/li>\n
    5. Now edit the default button that shows by selecting Edit Button.<\/li>\n

      \n

      \n
      \n

      5 Must-haves of Tableau OBIEE\/OAC\/OAS Connectors >><\/a>
      \n<\/b><\/p>\n<\/div>\n<\/div>\n<\/p>\n

    6. Let\u2019s select the text button style this time. Enter the title as \u201cHide filters\u201d when Item Shown is selected, and \u201cShow filters\u201d when Item Hidden is selected, as shown in the screenshots below.<\/li>\n

      \"edit\"edit<\/p>\n

    7. We can play around with the formatting options of the button to make it to match the overall dashboard design. After finalizing the format options, click Ok. Your button should now look similar to the ones in the screenshots below.<\/li>\n

      \"filters\"filters<\/p><\/ol>\n

      Using hidden containers to show instructions for your dashboard<\/strong>
      \nAnother important use for hidden containers is to use it as a means to show a user how to interact with your dashboard. There may be situations where your dashboard has a lot of interactive features that the users might find it difficult to understand. In such scenarios, you may need to do a demo to help them understand how to use your dashboard. Hidden containers help to save time in doing presentations or writing detailed instructions.<\/p>\n

      \n

      \n
      \n

      5 DOs and DON’Ts of Cloud Data Warehousing >><\/a>
      \n<\/b><\/p>\n<\/div>\n<\/div>\n<\/p>\n

      Now let\u2019s learn the steps to achieve this.<\/p>\n

        \n
      1. After you have completed your dashboard, export the image of it using the export image option from the dashboard menu or simply take a screenshot.<\/li>\n

        \"profit<\/p>\n

      2. Bring your image into PowerPoint or any screen capture tools and place instructions on your screenshot.<\/li>\n

        \"instructions\"<\/p>\n

      3. Make sure you resize your image to match your dashboard layout size. In our example, our dashboard layout is 1200\u00d7700. Save your image to a folder of your choice.<\/li>\n
      4. Bring a floating layout container (horizontal or vertical) and resize it to 1200\u00d7700.<\/li>\n

        \n

        \n
        \n

        [9 Best Practices] Connecting Tableau to OBIEE, OAC & OAS >><\/a>
        \n<\/b><\/p>\n<\/div>\n<\/div>\n<\/p>\n

      5. Using the objects menu at the bottom of your dashboard, use the image option to bring your image to the dashboard.<\/li>\n

        \"objects<\/p>\n

      6. Drop this image into the layout container and ensure that you change the background image to white. This ensures that the help screen\/ instructions are always on top when we show it.<\/li>\n
      7. Next select your layout container and edit it for when you hide or show the image we just added as shown in the screenshots below.<\/li>\n

        \"edit\"edit<\/p>\n

      8. Now use the toggle to show or hide the instructions. An example is shown in the screenshot below.<\/li>\n

        \"dashboard\"instructions<\/p><\/ol>\n

        How about using the hidden containers feature to improve OBIEE data visualization in Tableau? You\u2019re just a click away!<\/p>\n

        Try BI Connector<\/a> now!!<\/p>\n