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.

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 Advanced 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

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	Behavior
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
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

Search Filter Conditions

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

⚠️

These conditions are not displayed to the Viewer.

Customize the widget look and feel

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

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

Input field settings

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

Setting	Behavior
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.