Sticking the Landing: How to Create Stunning, Accessible Landing Pages

Imagine this: you have built a series of amazing, actionable, insightful dashboards. They are highly trusted and highly used. But, in order to access those dashboards, users are directed to the Server or Cloud home URL, and are greeted by a list of folders, that then they have to click into to find the dashboards, then they have to click the dashboard they want. Can we streamline this process? Yes!

One of the first ways I tried building a landing page was to combine a list of URLs and row-level security, and create something that looked like this:

Landing page that uses URL actions and a text table in Tableau

There are two problems with this approach: 1) it’s not the most highly designed dashboard, and it can be off-putting to users; 2) more importantly, URL actions are currently not accessible by keyboard in Tableau. So users who navigate via keyboard wouldn’t be able to get to the dashboards they wanted.

So then I tried a landing page using images, like this one I created:

Landing page that uses images to go to each dashboard

It has the look and feel of a nice landing page, and the image URLs are keyboard accessible. But this kind of landing page cannot be combined with row-level security, so everyone would see every dashboard and still have to search for the ones they have access to.

Being very stubborn Tableau developers, my coworker Jackie Adams and I knew there had to be a way to combine accessibility, design, and row-level security to get the landing page of our dreams. And we finally found it with Tableau’s dynamic zone visibility (DVZ) feature!

Dynamic, keyboard accessible landing page!

In order to build this dashboard, you’ll need a few things:

• Data with individuals' usernames and what dashboards they have access to. Ideally, this would be a table in your database, but an Excel file works in a pinch.
• Images for your dashboards. For the keyboard accessibility piece, this need to be static images that we add URLs to, but this technique can be used in conjunction with Tableau’s image role feature and the REST API, to add some automation.
• Lots of patience with containers (again, this method doesn’t need DVZ if you’re using image roles and URL actions, but then the dashboard will not be keyboard accessible or 508 compliant).

So how to begin:

First, design the structure of your landing page, using your company’s style guide and branding.

Next, create a calculated field that checks if the user who is viewing the dashboard has access to do so. In the example below, [User Access Filter] is just [username]=USERNAME(). The USERNAME() function in Tableau just pulls in the username of the person accessing the dashboard at any given time.

Calculation for checking access.

In this calculation, we are checking that the person viewing the landing page has access to dashboard number 19. You will need to create the calculation for each dashboard on the landing page.

Next, create a parameter for each dashboard that populates whether the user has access or not. The example below would be the parameter for dashboard 19 still.

The key part of this parameter is that it needs to be set to “When workbook opens.” This creates the dynamic portion of the dashboard, updating to each unique user that views the landing page.

Finally, create the calculation that is going to be used for Dynamic Zone Visibility. The DZV functionality can be temperamental, and it likes to work with calculations that use parameters, not calculations. We have to grab that parameter we created, and check if the person does or does not have access. If the parameter says “Has Access,” then the user will be able to see the information on the landing page.

Now you’re ready to build!

Grab all the images and icons you want, as well as the description text. You can save the description text in your database or Excel file as well, so that when updates happen you have that. You can also pull descriptions using the Tableau API for a more automated experience.

Now it’s just building out containers. Create a sheet with the title of the dashboard and the dashboard description. You’ll need one per dashboard.

Create a container and put in any icons, sheets, and images you have.

Finally, set up the DZV:

And there you have it! A dynamic, keyboard accessible, secure landing page! The last step is to update the tab order in the XML file so that when a person navigates with the keyboard, they navigate in the correct order. If you have questions on how to update the tab order, let me know. That could be a whole blog in and of itself.

Here is the final version: Landing Page Dashboard #TC25 . Hopefully you have fun creating some dynamic landing pages!