Skip to content

Filters & buttons

Filters

Filters example

Filters

Good practice

Filters

Selecting all dates in filter settings

  • Filters should be applied to all the views in one dashboard. You should avoid having separate filters for each view, unless there is a strong reason to do so. Users should not have to search around the page to cancel previous choices.

  • Make sure the values in the quick filter are ordered in a way that makes sense for your data. You can specify the order of a quick filter by setting the default sort order for that field.

  • If your user can make multiple selections within a filter dropdown, then use an 'apply' button. This stops the dashboard from refreshing whilst the user is still choosing their selections.

  • Slider filters are great for date and numerical values, while list filters are better for categorical data. If your filter is continuous it may show date and times when published to prod, you can avoid this by making your date filter discrete with Day(Date), Month(Date) etc.

  • Discrete date filters can be set to the latest date value in the data source.

  • If your users require start and end date on the slider filter, this will not automatically update when new data comes through. To avoid this, instead of filtering on a range of dates, choose 'all dates' on the 'special' tab and turn the filter into a slider, as per the image to the right.

Filters summary

  • The filters on a dashboard should span across the width of the navigation and be left aligned to the dashboard.
  • Maximum of two rows (10 filters) should be displayed on a dashboard. If more filters are required, they should be included in the advanced filters 'advanced filters' container.
  • Filters should always show a reset link, which resets all of the filters applied including the advanced filters.
  • When adding filters to a dashboard do not change the font colour and size on the worksheet. The font colour will be set in the template.
  • Advanced filters button is optional and should be added only if there are more than 10 filters.

Filters size, padding and colours

  • All filters should be equal in width
  • The filter card should be a white container with 16px inner padding and a 2px shadow (refer to cards page for further details)
  • The filters should be in a horizontal container within the card with a background colour of #D8DBDC

  • The inner padding of each filter should be 16px left (except the further left filter) and 16px right
  • Each filter should have a white background
  • The outer padding of each filter should be 1px left (except the furthest left filter) to give the break lines
  • The filter title should be arial, bold and size 11
  • There can be any number of filters on a dashboard but a maximum of five should display in a row.

Filters size

Example of size of filters

Filters - empty slot: - If there are <5 filters on a dashboard, then the rest of the filter container slots should be left as empty and set a variable width similar to the other filter containers

Filter layout (two rows)

  • Filters should always show a reset link, which resets all of the filters applied including the advanced filters.
  • Only five filters should appear in a row for desktop, for 10 filters they must break into two rows.
  • When adding filters to a dashboard do not change the font colour and the size on the worksheet. The font colour will be set in the template.
  • 'Advanced filters' button is optional and should only be added if there are more than 10 filters.

Filters two rows

Example of filters with two rows

Filters with radio buttons & sliders

  • Radio buttons and sliders can be used as filters which can be used to change the view of the data.
  • Radio buttons should have maximum 2 options, else use a dropdown filter.

Filters with radio buttons & sliders

Example of filters with radio buttons & sliders

Filters in context

  • If any filters are only applicable for a certain visualisation then those filters should be placed within its card layout, as shown below.

Filters in context

Example of filters in context

Advanced filters - No information required

  • This set of advanced filters does not require any information to explain all/any advanced filters.

Advanced filters - No information required

Example of advanced filters with no information required

Advanced filters - Short information required

  • This set of advanced filters requires short information to explain all/any filters. The info should be shown in a tooltip should be shown in a tooltip when user clicks on the information icon information icon.

Advanced filters - Short information required

Example of advanced filters with short information required

Advanced filters - Long information required

  • This set of advanced filters requires long information to explain all/any filters.

Advanced filters - Long information required

Example of advanced filters with long information required

Buttons

How to add a button on the dashboard

Button

Dashboard button

Tableau has an in-built button object used to navigate from one page to another within a dashboard.

  1. You can use the 'navigation' object on the bottom left hand side.

  2. Drag it to the dashboard like any other object.

  3. Click the 'edit button' to define its attributes.

  4. You can add this button as an image or as a text box.

  5. Test it in the presentation mode to make sure it is working correctly.

Note if you edit the background colour of the button it will appear unchanged unless in presentation mode or on server.

Button to reset all filters in a dashboard

Finished reset button sheet

The method to use buttons as filters can also be used as a 'reset button'.

  1. Create a new worksheet, this will become your button.

  2. Use the square mark. (This stops the button highlighting as blue when the sheet is selected).

  3. To add text to your button, use a label. This can be using the field or static text.

  4. Fit to entire view.

  5. If the square still appears behind text even when the square size is maxed, you can add “1” to the marks card as a colour, then edit the colour to what you want. Now when the worksheet is selected the square will appear as a border instead.

    Before colour Using colour

  6. Add any default values (for resetting parameters) to the marks card eg as details.

  7. Add your button worksheet to your dashboard.

  8. Create a filter dashboard action. Ensure the filters you want to unfilter are named in the selected fields section. Ignore the missing field message. You can add as many filters as you want to reset to the single action.

  9. To unfilter/reset parameters to a default, create a change parameter dashboard action. Ensure the default value you want to set the parameter to is placed in the source field and the clearing selection area. You will need a parameter action per parameter you want to reset.

Reset filters action Reset parameter action

Controls

Filters with controls

  • Dashboards may require extra controls alongside the filters. The purpose of controls is to change the way the measures are being calculated rather than removing data. Eg: Absolute values, 7 day rolling average, population rates.

  • Note: Controls and filters will both work in conjunction to refine the data.

Filters with controls

Example of a filter with controls

Toggles (weighted data)

toggle button

Where it is helpful to show data by different groupings, for example a crude or weighted view, or if your view needs to switch between provider & commissioner, you can add a single value button toggle. Alternatively, a multiple value drop down could be used.

Depending on your data source structure, this may be a filter or a parameter. If your data has one column consisting of text values “provider” or “commissioner”, then a filter toggle would be the best approach. If your data has one column with provider IDs and one with commissioner IDs, then a parameter toggle would be best. Combine the parameter with a calculated field to return the appropriate column name when each toggle option is selected. This calculated field would then be used in the view.


Last update: November 5, 2024