Dashboard tile anchors (table of contents)

Markdown visualizations and dashboard Markdown text tiles can include links to other tiles within the dashboard. This is a nice way to create a table of contents or “back to the top” links or buttons to help users move around a longer dashboard.

Linking to existing charts

Any HTML element with an id on the page can be referenced as an anchor point to jump to. Every chart tile on the dashboard has a unique ID that is based on the title of the tile. For example, if the title of your tile is Top Performing Brands the corresponding ID is top-performing-brands and you can reference that anchor point with a markdown link like this:

[Jump to brand analysis](#top-performing-brands)

or if you are writing HTML in the markdown editor, like this:

<a href="#top-performing-brands">Jump to brand analysis</a>

Creating your own anchors

If you are making more complex HTML-based markdown tiles, you can also include IDs in your element tags. It’s a bit more complex to reference these IDs in other markdown tiles. Because we sanitize the HTML and markdown for security, we replace all user-generated IDs with a user-content- prepended to the provided ID. For example, if you write this HTML:

<article id="brand-analysis">We sell lots of stuff!</article>

then you will need to reference it like this:

<a href="#user-content-brand-analysis">Jump to brand analysis</a>

If you need help getting the ID for any element, you can also use your browser’s code inspector to locate the element.

Linking to another dashboard with filters and controls retained

A Markdown link can also jump to a different dashboard while carrying over the current dashboard’s filter or control selections, instead of opening the destination with nothing applied.

Filters

Reference the filter’s JSON value with Mustache, and pass it as the destination dashboard’s own filter ID, prefixed with f--:

Link to another dashboard, keeping a dashboard filter

<a href="/dashboards/sales-abc123?f--rW8-IWVU={{filters.8v_G12D7.json}}">Go to Sales dashboard</a>

8v_G12D7 is the ID of the filter on the current dashboard, and rW8-IWVU is the ID of the filter on the destination dashboard. These are usually different values, since filter IDs are scoped to the dashboard they’re created on. See Locating keys for how to find a filter or control ID.

Use the .json element, not .value_url_encoded, for filter passthrough. .json carries the filter’s full condition (its operator and values), which the destination filter applies to whatever field it’s already configured for - so unlike controls, the source and destination don’t need to reference the same field. .value_url_encoded only passes the bare value, which isn’t enough for the destination to apply the filter correctly.

Controls

Controls use the c-- prefix instead of f--. Reference the control’s value or value_url_encoded element:

Link to another dashboard, keeping a control

<a href="/dashboards/sales-abc123?c--8v_G12D7={{controls.rW8-IWVU.value_url_encoded}}">Go to Sales dashboard</a>

Control passthrough only works when the destination control is built on the exact same field as the current dashboard’s control. If the two dashboards pull the control from a different view or field, the destination dashboard won’t recognize the value and will load with no control value applied.It’s also limited to controls that hold a single field or value selection - field switcher, time frame switcher, parent controls, and Top N limit. Multi-field picker, period over period, and dynamic filter controls aren’t supported this way.

Example code

The following example references the video at the top of the page.

Anchor/header tiles

Each of the 3 colorful headers in the above example serve as anchor destinations to navigate to. For this example, each hading has been created using a separate markdown visualization in the workbook, each titled to match the text inside the heading.

Example code for the 'Overview' heading

<style>
.md-card {
  display: flex;
  background: linear-gradient(
    132deg,
    #8eecd5 2.13%,
    #9DAAF4 67.53%,
    #F7A8CB 90%
  );
  padding: var(--size4);
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
  justify-content: center;
  height: 100%;
  align-items: center;
  margin-block: 0;
}
</style>

<h1 class="md-card">Overview</h1>

Use a dashboard Markdown text tile to create the table of contents:

<style>
a {
  color: #E40473;
  text-decoration: none;
  font-size: 14px;
  border-radius: 10px;
  border: 2px solid #D3D3D3;
  margin-left: auto;
  padding: 10px;
  margin-right: 10px;
}

.navbar {
  background-color: #;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right {
  display: block;
  position: absolute;
}
</style>

<nav class="navbar">
  <span style="color:#E40473;padding: 15px;font-size: 20px;">Sections: </span>
  <a href="#overview">Overview</a>
  <a href="#organic-marketing">Organic Marketing - Detail</a>
  <a href="#paid-marketing">Paid Marketing - Detail</a>
</nav>
<hr style="border: none; border-bottom: 2px solid #FF1493; margin: 0; width: 100%; padding-top: 15px">

Getting started

Manage content

Analyze & build

Visualize & present

Deliver content

Model data

Manage integrations

Dashboard tile anchors (table of contents)

Linking to existing charts

Creating your own anchors

Linking to another dashboard with filters and controls retained

Filters

Controls

Example code

Anchor/header tiles

Table of contents

​Linking to existing charts

​Creating your own anchors

​Linking to another dashboard with filters and controls retained

​Filters

​Controls

​Example code

​Anchor/header tiles

​Table of contents

Linking to existing charts

Creating your own anchors

Linking to another dashboard with filters and controls retained

Filters

Controls

Example code

Anchor/header tiles

Table of contents