Top 10 Hidden Secrets of Dashboard Designer

Ed Mengel
7 min readOct 16, 2020

You may be a seasoned expert in designing dashboards for Einstein Analytics (now Tableau CRM) or you may just be getting started on your journey. Either way I will be there’s something in this list that you didn’t know, and will help you be more productive. So, let’s dig in!

1. Dashboard Properties

Dashboard Properties menu item

Short and sweet, many people don’t know this was here or what it does. Here it is. More about what it does below.

2. Hide on mobile

If you look within the dashboard properties, the first item in there is “Available on Mobile”.

By deselecting this, your dashboard will no longer show up in the list of dashboards when browsing within the Einstein Analytics mobile app. The most common use is to hide your embedded only dashboards so they don’t clutter up your users mobile experience. It could also be used for large, complex dashboards where you can’t reduce them down to be effectively usable on mobile. Use the option sparingly though. I find that going through an exercise of asking “what is critical information here?” is a very useful process and will improve your overall content experience both on mobile devices and off. Be careful about saying “No one will ever need this information away from their desk!” out loud as that’s the best way to ensure they actually will.

3. Widget Defaults

Widget defaults can be an immensely time-saving feature. They are the next best thing to having dashboard themes. In fact, you can create your own themes by creating a blank dashboard and setting the widget defaults and saving it. Whenever you need to start a new dashboard using that theme, clone your template. Here’s what they look like (within Dashboard Properties):

You can set these common properties in one place, and even modify them after you have built out your entire dashboard. As you add a new widget, note that there’s an option in the Widget Style section called “Use defaults” which defaults to selected:

Check this to make sure your widget uses the dashboard defaults for all of these attributes. If you modify any property in this section, this checkmark will be deselected and all other properties will be specified (using the current defaults). This means that if you change the default later, all properties on this widget will not be affected. Also, note that widget style properties are saved in the layout reference and not in the widget itself, so you can customize the look and feel per layout if needed.

4. Layout Properties and Max Dashboard Width

At the the top left of the dashboard there’s another property panel. This one is for the current Layout, and it’s a little more discoverable, since it has a gear icon on it.

There’s some great things in there, like number of columns, row height, and cell spacing that can really help you customize the style of your dashboard.

If you’re looking at a mobile dashboard, we recommend you set the Maximum Dashboard Width to 375. This will actually be ignored rendering on mobile, but it really helps in the designer view, because the preview will be more like actual devices in the wild, and it will help make sure you don’t pack too much content into one row.

5. Layout Device Selectors

Some people assume there’s only 3 types of layouts, Desktop, Mobile, and Tablet, but those are really only some suggested templates. Really, there’s a system in place for you to make a responsive layout system with thresholds at any places you choose. If you go with the defaults, the phone layout covers anything 0 to 599 logical pixels wide which covers all phones and even most “phablets”. The tablet layout cover 600 to 999 logical pixels. The assumption here is if you’re on a device with a wider view than 1000 pixels, you’re better off using the default desktop layout, even if that device happens to be a tablet. There’s additional selectors here like orientation where you specify to have one layout for portrait and a different layout for landscape. Orientation isn’t strictly tied to how you hold your device. It’s really asking is height > width for the current viewport. You can use this to create experiences like the old Apple iOS Stock app where you rotate the device to see a more detailed or otherwise different view. There’s also a platform selector to have different layouts for the iOS or Android apps respectively. These are much less important nowadays as both apps now have 100% support of all visualization types.

It’s important to note that browser resize events DON’T trigger a layout re-selection. Mobile rotation events do, and iPad Split screen resize event do, but the analytics apps running on a phone form factor do NOT support landscape orientation…yet!

If you want to learn more about layouts, here’s a great video resource:
Everything you ever wanted to know about dashboard layouts, but were afraid to ask

6. Unused Widgets

Within the layout’s properties, there’s a section for “Unused Widgets”. If you have added widgets after you created this layout, this is a great place to go to make sure this layout has everything it needs. Just drag the widget onto the current page to add it to the layout.

7. Copy a Chart or Table to another dashboard

  1. Open destination dashboard for editing
  2. Preview the source dashboard
  3. Choose Explore from the widget to be cloned’s drop down menu

4. Choose Clip from the Explorer header. (This creates a copy in ALL dashboards currently opened for editing.)

5. Drag query from query panel onto the dashboard canvas.

I find this is easier than copy and pasting JSON because

  • No dealing with trailing commas and closing brackets
  • No need to copy the widget AND the query
  • Automatically migrates the Asset XMD which can contain conditional formatting information and custom number formats

8. Multi Select + Arrow Key Moving

Select multiple widget and move

Hold down [command] on Mac or [ctrl] on PC while clicking to select multiple elements, then you can use the arrow keys to move them around as a group.

9. Delete Unused Queries

First click on any empty space on the dashboard to see your query panel. Then use the below selector to view the Unused Queries.

Now you can delete any unnecessary queries one by one, or scroll to the bottom to delete them all with one click.

While unused queries SHOULD NOT run as the dashboard runtime should optimize them out of execution, better safe than sorry. They also increase the dashboard size which means more for your users to download especially when the are on a slower connection, and more content for the browser and mobile device to parse. Also, it’s more for you to manage and more room for error if you go mucking around in the JSON. Best to keep a clean house!

10. Image Hyperlinks

Everyone knows about the link widget, but did you know how to use it to make a hyperlinked image? Here’s how:

  1. Drag a container widget onto your dashboard
  2. Set a background image for the container
  3. Drag a link widget into the container and make it take up the full size
  4. Set the background color of the link and choose custom and drag the alpha transparency slider all the way to the left.
  5. Set up the destination or link url (this can contain a binding but it MUST start with a static “https://”)
  6. Set the link text to the empty string

Et voilà!

So in review

  1. Dashboard Properties
  2. Hide on mobile
  3. Widget Defaults
  4. Layout Properties and Max Dashboard Width
  5. Layout Device Selectors
  6. Unused Widgets
  7. Copy lens to another dashboard
  8. Multi Select + Arrow Key Moving
  9. Delete Unused Queries
  10. Image Hyperlinks

Honorable Mention

Not enough time for everything, but here’s what almost, but didn’t, make the list.

  • Shift key to make space on drop
  • Dashboard Inspector + Performance Check

Thanks for reading! I hope you learned something new. Let me know your favorite Designer tricks.

--

--

Ed Mengel

Interests in Big Data, Search, Data Analytics, Graphs, Great Products, and Martial Arts