The Stories Global Filter Bar

The Global Filter Bar component in Stories allows users to filter charts, maps, and tables that are powered by the same dataset with just a few clicks!

For terminology, please refer to the Dictionary section at the bottom of this article.

Setting up the Global Filter Bar

Add a global filter component

If a user wants to add a global filter bar to their Story, when they open the Add Content side panel and double-click on the global filter bar component, they will see it added to the very top of their Story.

They can also click and drag the global filter component from the Add Content side panel to where they want in their Story.

Note: Once you have added a global filter component to the story, you are not able to add another

add_global_filter_comp_1.gif

Note: Once you have added a global filter component to the Story, you will not be able to add another.

 

Add a Data Source to Power the Global Filter

To make your global filter useful, you must choose a dataset or derived view to power it.

When a user wants to configure their global filter, they have two options:

  1. Start from scratch

  2. Auto-populate the global filter when there is already content in the Story

Starting from scratch

When there is no content in the Story and a user adds the global filter to their draft, they must click “Add Data Source”.

From there, they must choose a dataset or derived view to power the global filter.

add global filter gif 2.gif

Users can add additional data sources to power their global filter by clicking the “+Add Data Source” in the Data & Filtering side panel.

additionaldatasources 3.gif

When there’s content already in the Story

When visualizations are already in the Story, and a user adds a global filter component to the Story, the global filter will automatically add any data sources powering those visualizations to it.

Gif 4.gif

Important Notes
  • Because the global filter supports multiple sources, we’ve removed the Data Source name that appears on hovering the global filter in a Story draft.

  • Users cannot remove any data sources from the global filter that power visualizations present in the Story. When they hover over a disabled data source, there is a tooltip explaining why they cannot remove it.

remove message.png

  • If more visualizations are added to the Story and the Story contains a global filter, the global filter data sources will automatically update data sources.

  • If the Story contains a multi-layer map, users will only see the top-level layer data source added to the "Data Sources" list.

Removing the global filter component from the Story

If a user would like to remove the global filter bar component from their Story, they can do by clicking the “X” in the component control.

remove gfb.gif


If the global filter has data sources or filters configured and a user removes the component from their Story, then all applied filters are removed from any visualizations and the Story is updated.

Removing a data source powering the global filter

When a user wants to change or remove a data source that’s powering the global filter, they can easily remove a data source by clicking the “X” next to the data source’s name.
remove data source.gif

If the data source a user wants to remove is powering a visualization in the Story, the user must do the following:

  1. Remove the visualization from the Story

  2. Remove the data source from the “Data Sources”

remove gif 2.gif

If a user removes a data source that is associated with a global filter, it will automatically be removed from that filter.

Add Filters to the Global Filter

Choose filters

To start adding filters to the global filter, users must click the “Add Filter” dropdown in the Data & Filtering side panel. Once a filter is added under “Filters & Parameters”, users will see it automatically added to the horizontal global filter bar in their Story draft.

choose filters 1.gif

Important Notes
  • The “Add Filter” option will be disabled if there are no data sources added to the global filter

Link columns to the filter

Once a user has added the filters they want to power their global filter, they can begin to associate columns from other data sources to that filter.

Users can do this by clicking “Edit” in the (…) next to the filter name under “Filters and Parameters”. This immediately takes them to the “Filter Options” panel where they can select other columns to link to the filter.

link columns to the filter.gif

 

Columns that can be linked to a filter must have the same data type as the initial column selected for the filter.

Important Notes
  • A given column can only be used once for any filter. This means users cannot use a column in multiple filters within the global filter bar.

  • A filter in the global filter uses a maximum of one linked column per data source.

  • There is no limit to the amount of linked columns a user can associate with a given filter. However, for particularly wide or large datasets, users may notice degraded performance will increased linked columns.

  • Columns show up in alphabetical order in the following places:

    • The data source list under “Data Sources” in Data & Filtering panel

    • When adding a filter under “Filters & Parameters in Data & Filtering panel

    • In the linking column dropdown under “Filter options” when linking columns

  • When there are no available columns to link, users will see the “+Link Column” option disabled.

  • When users are reselecting a linked column for a given filter, the available columns shown in the dropdown include other eligible columns from the initially selected data source (in addition to eligible columns from other data sources not yet in use).

    • For example: There are three data sources added to the global filter bar for a Story

      • A user chooses Data Source A - Column 1, which is a text-type column.

        • The user clicks Link Column, opens the Select column dropdown, and see eligible text type columns from Data Sources B and C.

        • Then the user chooses Data Source B - Column 1.

        • When they reopen the dropdown for Data Source A - Column 1, they see text-type columns from Data Source A and Data Source C.

        • Next they remove the linked column Data Source B - Column 1.

        • When they reopen the dropdown for Data Source A - Column 1, they see eligible columns of all data types from Data Sources A, B, and C.

Removing a linked column from a filter

Users can remove a linked column from a given filter in the global filter by navigating to the Filter Options for the filter and clicking the “X” next to the linked column.

removing a linked column.gif

Important Notes
  • If you removed a linked column from a given filter, it will reset the filter value. This is so we can ensure the available values contained in the data sources are generated accurately.

  • If there is only a single column tied to the filter, users will not be able to remove it without navigating to the Data & Filtering panel and removing the filter under “Filters and Parameters”.

Reselecting linked columns from a filter

reselecting linked columns.gif

 

Important Notes:
  • If you make any changes to the linked columns including removing a linked column or adding a new linked column, it will reset the filter value. This is so we can ensure the available values contained in the data sources are generated accurately.

Choosing default values for the global filter

Currently, users will configure a default value for a given filter or parameter in the global filter by selecting it in the horizontal global filter bar in the Story draft.

choose default filters.gif

Filter or Parameter Options

The Filter Options and Parameter Options panels allow users to configure the columns linked to a filter or link parameters together.

Important Notes

When there are multiple data sources attached to the global filter bar, we do not enable infinite scroll when selecting a value for a text filter. Instead, we include up to 20 values from each data source in the value dropdown to select from and sort by most common to least common values. Users can still easily search for a value that is not included in the immediate top 20 values from each data source but using the search functionality in the filter dropdown.

Choosing Assets to Filter via the Global Filter

Creating a visualization in the Story

When a user wants to create a visualization in their Story, they click Insert on the rich media content block, Insert > Visualization > Create New Visualization.

Then they see the list of options within the asset selector. They also see a “Global Filter Compatible” checkbox. When they check this box, the assets are filtered down to the assets that are derived from the data sources they selected for their global filter bar.

add global filter gif 2.gif

If the user has not selected a data source or configured the global filter, then they will not have that checkbox option available when selecting a table.

Inserting a visualization into the Story

When a user wants to insert a chart, map, or calendar into their Story, they click Insert on the rich media content block, Insert > Visualizations > Select Existing from Catalog.

Then they see the list of options within the asset selector. They also see the “Global Filter Compatible” checkbox checked, which means the assets are filtered down to the assets that are derived from the data sources they selected for their global filter bar. If they uncheck this checkbox, they will see all assets available through the asset selector.

 

insert a visualization.gif

If the user has not selected a data source or configured the global filter, then they will not have that checkbox option available when inserting a visualization.

Creating a table in the Story

When a user wants to create a table in their Story, they click Insert on the rich media content block, Insert > Table.

Then they see the list of options within the asset selector. They also see a “Global Filter Compatible” checkbox. When they check this box, the assets are filtered down to the assets that are derived from the data sources they selected for their global filter bar.

create a table in a story.gif

If the user has not selected a data source or configured the global filter, then they will not have that checkbox option available when selecting a table.

How do I know which assets are filtered or not?

In the Edit, View, Print, or Presentation Mode of Stories, visualizations that are filtered by the global filter will have their asset filter icon reflect the number of active filters from the global filter bar and any quick filter bar filters applied.

Any individual filters that are overridden by the Global Filter Bar values will be "read-only" in the Quick Filter Bar (QFB).

activefilters.gif

Presentation Mode of a Story

If you are presenting a Story that contains an active global filter, Story viewers will see the global filter at the top of the Story containing those columns to filter on and the global filter will render on its own slide in Presentation Mode.

presentgif.gif

Unfilterable Assets

Currently, the following asset types do not currently work with the global filter:

    • Measure cards

    • Measure timeline charts

    • Legacy maps

    • Legacy charts

Filtering or Drill Down on Individual Assets

Filter or Drill Down into an Individual Chart

If you or your Story viewers want to filter or drill down into a chart, map, or table, you are able to apply any filters that are not currently applied in the global filter bar. Individual filters that are included within the global filter bar, will be read-only.

gif432.gif

Clearing the Global Filters

Clearing the filters within the global filter bar component will do the following:

  • clear all globally applied filters within the Story

  • clear all the globally applied parameter values within the Story and reset them to their original default value

Clearing the filters within the global filter bar component will not do the following:

  • reset individual asset filters

  • remove the default value from a parameter in the global filter (i.e., the parameter value is empty)

Sharing Your Story

You can easily share filtered stories with other users on your site. Just like a story without a global filter, assets embedded in the page will have their own permissions.

The visibility of the global filter component will be determined by the permissions set for the data source powering it. If you share the story with another user who does not have permission to view that data source, they will not see the global filter bar component.

If a user is added as any type of collaborator on the Story and does not have data source access (i.e. data is private or internal) or if they do not have permissions to specific assets on the page, they will see an empty global filter component and pink error messages on assets that say “Sorry! An error was encountered when rendering this visualization. Contact our support team for help.”

Dictionary

Global Filter Bar (GFB)

All components that aid in filtering the page, the horizontal Global Filter Bar in the Story draft and on the published Story, the vertical panel where users can configure the filters.

Quick Filter Bar  (QFB)

The filter bar on an individual visualization within a Story. This filter appears in the visualization authoring experience (AX), Edit mode, and View mode of a story. The filters can only be configured and saved while in the Authoring Experience.

QFB in AX.png

Quick filter bar in Authoring Mode

QFB in edit mode.png
Quick filter bar in Edit Mode

QFB in View Mode.png
Quick Filter bar in View Mode

 

Horizontal Global Filter Bar

The grey filter bar appears in the Story draft and the published Story for users to filter the page.
In story draft.png

In Story Draft

 

grey filter bar.png

On Story View Mode

Vertical Panel

Anything within the side panel of a Story draft. This panel can include any of the Data & Filtering configurations, Layout & Style, or Content Block options.

vertical panel 1.png

Data and Filtering configuration

vertical panel 2.png

Layout & Style

vertical panel 3.png
Content Block options

 

Data & Filtering

The Data & Filtering panel is where users can configure the Data Sources, Filters, and Parameters for the Global Filter bar.
data and filtering in dictionary.png

 

Filter Options

The Filter Options panel is where users can configure the columns linked to a filter.

filter options in dictionary.png

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.