Creating a tabbed experience in an embedded dashboard

While tabbed dashboards are on the way, there are currently a few creative solutions to provide users a tabbed experience or navigation across dashboards within the iframe.

The two main mechanisms for this are linking and sending a POST message from within the iframe.

Linking will allow users to have an experience where they can either click on a given value, such as a user ID, and have that display an option to link to another dashboard where that value is passed through into a filter. A common example for this would be a global sales overview, with a link to an individual sales person’s performance in a separate dashboard with more detail.

Markdown tiles can also be used in tandem with linking to create a tabbed appearance that will let users link across different dashboards.

POST messages can be used in two formats as outlined in the hyperlink above. The main way we see this leveraged today is to use a markdown component to send a POST message to the parent frame. This in turn can be picked up by a listener, which can then be used to swap out the URL in the iframe to a different link. This option, while requiring a bit more engineering effort, has a more seamless experience for the end user.

I am curious about what this looks like. Is there an example of this kind of dashboard available that we could check out?

Also, any update on the status of tabbed dashboards?

Hi Elliot! Tabbed dashboards are currently planned for the first half of next year.

For the tabbed dashboard example, I would recommend putting something like this in a markdown visualization.

<div style="display: flex; flex-direction: row; justify-content: center; width: 100%;">
  <div style="background-color: transparent; padding: 20px; display: flex; justify-content: center; align-items: center; width: 48%; border: 1.5px solid #ddd; border-bottom: none; border-radius: 4px 4px 0 0;">
    <a href="https://www.google.com" style="display: block; width: 100%; text-align: center; text-decoration: none; color: inherit;">
      <h3>Dash One</h3>
    </a>
  </div>

  <div style="background-color: #f5f5f5; color: #666; padding: 20px; display: flex; justify-content: center; align-items: center; width: 48%;">
    <a href="https://www.google.com" style="display: block; width: 100%; text-align: center; text-decoration: none; color: inherit;">
      <h4 style="font-weight: 400;">Dash Two</h4>
    </a>
  </div>
</div>