Dashboard Filters – QBeeQ

Dashboard Filters allow Designers to bring filters directly into the dashboard as a widget, instead of relying on the native filter panel. Keep things simple with only the options users need, preventing filter overload and confusion without sacrificing screen space.

📄

Release Notes for Dashboard Filters can be found here.

Installation and configuration

The Dashboard Filters plugin can be installed by an Admin, following the directions in Installing QBeeQ Plugins.

Operating system and version support:

Linux - Latest

Windows - Latest

Creating a new dashboard filter

To create a new Dashboard Filter widget:

Choose QBeeQ Advanced Filter from the widget dropdown list

Select data as items from the data panel

Configure the update and reset behaviors

Configure individual input behavior

Customize the widget look and feel

Select data

Add filter items from the data panel, each “item” will represent a filter input.

💡

The order in which the items are selected or re-ordered corresponds to the left to right order of the input fields

Configure update and reset behaviors

Use the General settings in the design panel define the update and reset behaviors for the entire filter widget.

💡

It is best practice to provide minimally a Reset button, or else users have to either reload the dashboard or try and recall what the original filter conditions were.

Setting	Behavior
Instant Update	When checked (default), any changes to the field values will apply and update instantly. The Apply button will not be visible. When unchecked, the Apply button will be visible and the user will need to click on this button to apply changes.
Enable Reset	When checked, the Reset button will be visible. When clicked, the values will reset to their default values. When unchecked (default), the Reset button will not be visible.

Configure individual inputs

As each item is selected in the data panel, they will appear in the design panel with their own individual settings. Each input must be configured individually.

The widget supports three distinct input types, each designed for different use cases and data structures

Dropdown with single or multi-select

Toggle

Date Picker

💡

To change the order (L to R) of the inputs, reorder the items in the data filter.

Some input types introduce unique behaviors, such as dynamically updating options based on query results or offering multiple ways to input values. Each parameter has its own unique input type.

Setting	Description	Options
Placeholder	The placeholder text displayed in the dropdown and calendar picker input fields
Filter Button	Changes the input for this parameter to a toggle filter
Search Filter	Performs a string match on the values and returns any full matches. ⚠️ These conditions are not displayed to the Viewer.	Dashboard Filters supports the following filter conditions: • Equals • StartsWith • EndsWith • Contains • Does not start with • Does not end with • Does not contains • Does not equals
Choose Search Filter	Allows the Designer to include a filter condition on the values
Calendar Picker	Opens and displays a 3-month calendar. Users can select a single date or a date range.
Single Selection	Limits the user to a single selection from the drop down
Multi Selection	Allows the user to make multiple selections from the drop down
Choose Parent Filter	Selecting a parent filter will control the data being shown in the other filter inputs. Note: Parent Filters can only be used with Single Selection.
Date Granularity	Controls the visibility of additional settings related to date granularity Note: Date Granularity cannot be used with Multi Selection.	On, Off
Apply granularity to first data panel only	Controls how date granularity is applied to widgets with multiple date fields or panels	On, Off
Apply to All Widget	Controls if date granularity filter applies to all widgets on the dashboard
Apply to Selected Widgets	Controls if date granularity filter applies to a subset of widgets on the dashboard
Widget IDs	A field to provide comma-seperated widget IDs so that the only the provided widgets are affected. This is only relevant if Apply to Selected Widgets option is selected.
Available Granularities	The available granularities that can be chosen. Data must be formatted to the selected granularities.	Year, Quarter, Month, Week, Day, Hour

Using Date Granularity

Date granularity allows users to change the level of granularity at which time-based data is displayed across some or all widgets on the dashboard. This allows for more flexible and meaningful time analysis by letting users toggle between different time units such as years, quarters, months, weeks, days, or hours.

When a user selects a granularity (e.g., Month), the data is automatically grouped and displayed according to that time unit. This does not change the underlying data but instead alters how the date field is aggregated in some or all widgets on the dashboard.

Apply granularity to first data panel only

Use this setting when you want to modify the primary date axis (e.g., grouping by year or quarter) without affecting the secondary breakdown (e.g., day-level detail). This is especially useful for preserving a "break by" structure in pivot tables or multi-panel visualizations.

When this setting is disabled, the selected date granularity will be applied to all date fields in the widget. Example: In a pivot table where the first column is "Year" and the second column is "Day," both columns will change to the selected granularity (e.g., "Month").

When this setting is enabled, the selected date granularity is applied only to the first data panel or column. Example: In the same pivot table, only the "Year" column will update (e.g., to "Quarter"), while the "Day" column remains unchanged.

ℹ️

The Date Granularity checkbox will also appear in the Design panel on fields that aren’t associated with time-date data (i.e. text). If you are interested in using this capability, please contact support@qbeeq.io.

Customize the widget layout settings

Use the Layout settings in the design panel to change alignment and placement of the input fields in relation to the buttons.

Setting	Behavior
Alignment	Determines the alignment of the input fields, along with the Apply and Reset buttons, if enabled.
Placement	Controls the placement of the entire widget, left, center or right
Top padding	Determines the space in pixels between the top of the dashboard and the top of the input fields
Show Label	Displays the label of the input

Customize the widget button settings

Use the Button settings in the design panel you to change the visual styling of the buttons displayed in the widget.

Setting	Behavior
Width	Defines the button’s width in pixels
Height	Defines the button’s height in pixels
Margin	Defines the horizontal margins between the last input field and the individual buttons
Apply Text Color	Sets the color of the text displayed on the Apply button. Only applies if Enable Reset is unchecked in the General tab.
Apply Button Color	Defines the background color of the Apply button. Only applies if Enable Reset is unchecked in the General tab.
Apply Button Fade Color	Defines the background color of the Apply Button to denote the changes have been applied. The button will display the above button color when the user makes another selection.
Reset Text Color	Sets the color of the text displayed on the Reset button. Only applies if Enable Reset is checked in the General tab.
Reset Button Color	Defines the background color of the Reset button. Only applies if Enable Reset is checked in the General tab.
Apply Alias	Defines the text that appears on the Apply button
Reset Alias	Defines the text that appears on the Reset button
Button Position	Defines the location of the button(s) to the side of the inputs, or bottom

Customize the widget input field settings

Use the Input settings in the design panel you to change the visual styling of the input fields.

Setting	Description
Input Widths	The width of the dropdown and calendar picker input fields in pixels
Body Width	The width of the drop-down values when the dropdown is expanded
Input Heights	The height of the dropdown and calendar picker input fields in pixels
Label Spacing	The distance between the filter label and the filter dropdown
Input Spacing	Controls the distance between the bottom of the label and the top of the filter input in pixels
Row Spacing	Controls the distance between the rows of filters, only relevant when there are two or more rows of filters works when the
Max Input per Row	The maximum number of fields displayed on a single row. The apply and reset buttons will be tied to the first row.
Border Width	The width of the input field border in pixels
Border Radius	The roundness of the corners of the input fields in pixels
Border Color	The color of the input field border in pixels
Filter Labels	Displays either the first filter value or the placeholder text defined for each individual input.

Using Dashboard Filters

Users have the ability to interact with the Dashboard Filters to update the data on their dashboard.

Select a filter

Dropdown / Value

To apply a value filter to your dashboard:

Click on the dropdown filter to view the values

Scroll or search (if enabled) to locate the values that you want to include or exclude in the filter

Select one or more values

Apply the filter

Toggle

Select one of the options displayed

Apply the filter

Date Picker

To apply a date filter to your dashboard:

Click on the date filter field

Select a single date or select a date range by clicking on the first date int eh range, and dragging until the end date is highlighted

Apply the filter

Apply a filter

A Designer can configure the behaviors of the update function. Depending on the configuration, you may see a button or not. Buttons labels and colors are configurable, so the button you see may differ from the image below.

Setting	Visible?	Behavior
Search Button	Yes	The user will need to click on this button to any apply changes made to the filters
Search Button	No	After each filter selection, when the user clicks away from the filter, the changes will apply and update instantly

Remove a filter

A Designer can configure the behaviors of the reset function. Depending on the configuration, you may see a button or not. Buttons labels and colors are configurable, so the button you see may differ from the image below.

Setting	Visible?	Behavior
Reset Button	Yes	When clicked, all filter conditions will be removed, and the values will reset to their default values.
Reset Button	No	The button will not be visible. If you do not have this button, you will need to click into each filter input and remove any selections you may have made.