Skip to main content

Create Dashboard Links with Filter URLs

Updated

This article explains how to filter dashboard views using hyperlinks by creating filter URLs in HTML. Users can add text containers with anchor tags linking to pre-filtered dashboards using specific dashboard IDs, filter axes, and elements. It covers creating filter URLs with both standard filters and global filters. The article includes examples and tips for effective URL-based filtering in dashboards.

    Tags:
  • Project Owner
  • Creator

 

In this article

  1. Filter the Dashboard view with a Hyperlink
    1. Create a Filter URL using HTML
    2. Create a Filter URL using Global Filters

 

1. Filter the Dashboard View with a Hyperlink

Dashboard Filter URLs allow users to navigate directly to pre-filtered dashboard views by clicking on a hyperlink. 

When the user clicks a link: 

  • Dashboard charts display only the relevant data
  • Users do not need to manually select filters
  • The browser URL updates to reflect the applied filter

To create a customized filter URL, add a text container to the dashboard and create a link tag using the HTML editor. You can create the link using filter URLs or global filter URLs:

  • Filter URLs apply filters to dashboard charts by using a specific Axis and Element combination.
  • Global Filter URLs apply filters based on the project setup with a Global Filter.

 

LightBulb_WhiteOnTealBG.svg

Creating URL-based filters requires HTML knowledge

 

 

a. Create a Filter URL using HTML

With the flexibility of the HTML editor in a text container, you can a create link by combining elements like text, buttons, images, or media to create easy navigation to filtered insights. 

Learn more about the HTML editor and creating dashboard links.

 

Add a Link in the Text Container

  1. In dashboard edit mode, add a text container.
  2. Click the </> HTML editor, add an <a href=""> anchor tag:
<a href="">Your Filter Label</a>.
  1. Add the Filter URL to the href attribute and click save.
<a href="Add Filter URL here">Your Filter Label</a>.

 

Add a Filter URL

To add a filter URL, you need to include the Dashboard ID along with the Filter Axis and Filter Element. The Filter URL uses this format: #/dashboard/DashBoardID/filter:AxisLabel.ElementLabel 

 

Find the Dashboard ID

  • In the browser URL, find the dashboard ID and copy the part starting with #.
  • Then, in the HTML editor, paste it into the anchor tag's href attribute:
    <a href="#/dashboard/DashBoardID">
DashboardID_BrowserURL.jpg

Identify the Filter Axis and Filter Element

  • Find the filter axis and element labels, then add them after the dashboard ID like this:
     /filter:AxisLabel.ElementLabel
FilteringAxis_ElementLabel.jpg

 

In the example above, you can find the following information:

  • Dashboard ID: 146 
  • Filter axis: Top 10 Markets
  • Filter element: Australia

An example URL looks like this:

<a href="#/dashboard/146/filter:Top 10 Markets.Australia">Australia</a>

When you save the dashboard and click the Australia link, the dashboard applies the filters from the Top 10 Markets axis to show the filtered results.

 

 

LightBulb_WhiteOnTealBG.svg

Filter Axis and Element names are case-sensitive and must exactly match the Project Tree labels. Incorrect labels prevent the filter from being applied.

 

 

To make filters easier to identify, include the filter name in the link text shown on the dashboard.

CheckFilters_TitleSettings.jpg

 

H3_InteractiveFIlters_AddURLpath_TextContainer.gif
  • Add a Text Container and type <a href="">Your Filter Label</a>
  • In the href quotes, add the dashboard ID, filter axis label, and element label
  • Save and click the link
  • The dashboard updates with filtered data

 

b. Create a Filter URL using Global Filters

Before creating a Filter URL to filter the dashboard using global filters, global filters must be setup in your project.

🔗 To learn more about setting up global filters, please review the Knowledge Base information about Global Filters.

With global filters enabled, you can create the Filter URL using the HTML editor.

  • Use the following format in the href within the text container's HTML editor: #/dashboard/DashBoardID/gfilter:AxisLabel.ElementLabel
  • To add a filter on top of the global filters using the format below:
    #/dashboard/DashBoardID/filter:AxisLabel.ElementLabel&gfilter:GAxis.GElement

An example URL looks like this:

<a href="#/dashboard/197/gfilter:Top 10 Markets.Australia">Australia</a>.

 

H3_GlobalFilterURL.gif
  • Create a link with Global Filters URLs in the HTML editor
  • Click the link to update the dashboard with selected global filters
  • The browser URL updates to the new dashboard URL

 

Where to from here?

Learn more about Harmoni:

Up Arrow.png