Filter Properties
Use the Vizlib Filter properties panel to configure dimensions and data handling, display settings, templates, interactivity, actions, and appearance.
Dimensions, Data Handling
In the property panel, the Dimensions menu is where you define your filter field, which can be a single dimension, a drilldown or a master item dimension. In this example the values in the Clothing table are filtered against CategoryName, and you select, deselect and display them in the Sales YTD Mini Charts. You can find an example filter setup in our guide here.
Figure 1: Filter Example
Dimension
In the Field section you can define the field name, title and select whether to include null values or a limitation.
Figure 2: Dimensions
Filter Values
In Filter Values you can choose to hide or show dimension, and also make them subject to a condition by entering an expression in Conditional Show exp. for Values. If the condition value is true, the value will be displayed.
Figure 3: Filter Values
You can also select to display a Frequency Count for the dimension, choosing from the Absolute value, Percent or Relative value.
Figure 4: Frequency Count
Figure 5: Frequency Count Example
Measure
Enabling the Measure settings allows you to add a measure to the filter. You can add a measure expression, and this example uses =sum([Gross Profit])/sum(Sales). You can also select a method of Measure Formatting and Format Pattern.
Figure 6: Measure
Indicators
The Indicators settings allow you to display an indicator next to the measure, and also customize the indicator shown when the measure is compared to a pre-defined threshold. You can enter the value in Indicator Threshold (this example sets the threshold at =20/100 or 0.2).
Figure 7: Indicators
The icon and color indicators can now be set, and they are displayed according to the result of comparing the measure value to the threshold (Greater than, Less than, Equal than). You can choose to show or hide each icon, and also set the Icon Position.
Figure 8: Indicator Icons
Markers
Markers can be enabled to display a symbol beside filter values. You can choose from two Representations: Icon or Image. You can also customize the Symbol Size and Symbol Opacity, and choose to Show Dimension Values (when Disabled, only the icon or image will be displayed).
Figure 9: Markers
If you choose Image as a representation, enter the image location and any further settings in Image expression. The following figure shows an example of filter values which uses images of flags.
Figure 10: Image Markers Example
Sort Options
Sort Options allow you to choose how filter fields are sorted. You can sort in ascending or descending order, sort by state, sort in alphabetical order (or reversed) and by original load order (or reversed). #1 Sort by State is the default sort option.
Figure 11: Sort Options
Data Handling
Data Handling settings contains settings relating to the data in the object. You can enter a Calculation condition using the editor, and also enter a message to display if the calculation is not fulfilled.
Figure 12: Data Handling
Settings - Dropdown
If you're using Vizlib Filter and select the Dropdown option in Settings, you'll display the filter in Dropdown format.
Dropdown Presentation
When you select the display type Dropdown, the Dropdown Presentation settings will open. You can choose a Selection Bar, set a Dropdown Label, and customise a Popup position. You can also select Hide automatically to only display the dropdown when a selection is being made.
Figure 13: Settings
You can also choose a dropdown Style (LED, Tick and Checkbox are currently available), set the Tick Position, customize a Background Type and Background Color.
Figure 14: Style
Dropdown Styling
In the Dropdown Styling settings, you can set a Background Color, Font Color and Border Color. In the Font Properties settings, you can set the Font Size, Font Family and Font Style, and in the Other settings you can select Disable Corner Radius if you don't want the dropdown to have rounded corners.
Figure 15: Dropdown Styling
Cell Styling
In the Cell Styling settings you can customize the Height, and set a Height Mode. In Font Properties, you can set the Font Size, Font Family and Font Style, select a Cell Alignment, and customize a Coloring Type.
Figure 16: Cell Styling
Settings - Listbox
If you're using Vizlib Filter and select the Listbox option in Settings, you'll display the filter in Listbox format.
Listbox Presentation
When you select the display type Listbox, the Listbox Presentation settings will open. You can choose to show a Selection Bar, set Responsive mode, and customise a Popup position. You can also choose a drop-down Style (LED, Tick and Checkbox are currently available), set the Tick Position, and customize a Background Type and Background Color.
Figure 17: Listbox Presentation
Listbox Styling
In the Listbox Styling settings, you can choose a Border Style, set the Border Width, enable or disable specific parts with the Border Selector, and set a Border Color and Global Radius.
Figure 18: Listbox Styling
Cell Styling
In the Cell Styling settings you can customize the Height, and set a Height Mode. In Font Properties, you can set the Font Size, Font Family and Font Style, select a Cell Alignment, use a Row Border and set the Border Thickness and Border Style, and customize a Coloring Type.
Figure 19: Cell Styling
Header
In the Header settings you can set some Title Text, choose a Text Color and Background Color, select a Caption Alignment, and use the Caption Font Settings to set the Font Size, Font Family and Font Style. You can also select any Vizlib Actions you want to use.
Figure 20: Header
Settings - Buttongroup
If you're using Vizlib Filter and select the Buttongroup option in Settings, you'll display the filter in Button format.
Buttongroup Styling
When you select the display type Buttongroup, you can customize the Background Type, and set a Background Color. In the Buttongroup Styling settings you can set the Orientation, Spacing, and choose to have the objects Grouped.
Figure 21: Buttongroup Settings
Button Styling
In the Button Styling settings, you can customize the Height, choose a Height Mode, and select a Width option. In the Borders settings, you can choose a Border Width and set a Border Color. The button Radius settings allow to set values for the Global Radius, and also Top Right, Top Left, Bottom Left and Bottom Right.
Figure 22: Button Styling
Font Properties
You can customize Font Properties, including the Font Size, Font Family and Font Style, and also choose a Coloring Type for your Cell Color.
Figure 23: Font Properties
Header
In the Header settings you can set some Title Text, choose a Text Color and Background Color, select a Caption Alignment, and manage the Caption Font Settings (Font Size, Font Family and Font Style). You can also select any Vizlib Actions you want to use.
Figure 24: Header
Templates
Vizlib Filter supports Vizlib Templates now, so you can pick the look and feel you want and apply it with one click.
Using Templates
You can find template settings in the property panel under Templates.
Figure 25: Templates
To use templates, click on View Templates to open the template screen. You'll see a list of available themes, so you can choose the theme you want and it'll be applied right away. If you need to change the template theme, select one and apply the changes with one click.
Figure 26: Templates Example
Managing Templates
If you find you need to make more changes to the template theme, you can use the settings in the Appearance tab to set the look and feel you want.
If you'd like to know more about managing or working with Vizlib Templates, please see our article on creating and saving templates here.
Interactivity
Interactivity settings provide you with a set of options to control user interaction in Vizlib Filter.
Selection Mode
Selection mode allows you to disable Read Only mode in Vizlib Filter by choosing Allow Selections. You can enable a Quick Select function, and choose one of three selection modes:
Multiselect - you can select multiple values at once.
Sheet level always one selected - you can select and deselect one value at a time. If the default selection (see General Options) is undefined, no values are selected for the initial state.
Filter level always one selected - one value is always selected (no de-selection). If the default selection is defined manually (see General Options), then the first value in the field is automatically selected for the initial state.
There are also options to Enable Drag Select and Scroll Top After Selection.
Figure 27: Allow Selections
Enabling Quick Select displays a confirmation window in listbox mode for a user to complete their selection.
Figure 28: Confirmation Window
General Options
General Options settings control the values you display in your visualization. You can choose to Show Alternatives, Hide Excluded values and Hide Dropdown After Selection.
Enabling Default Selections allows you to manage the default options displayed when an app opens or a selection is cleared. You can enter your own list of values, but multiple default selection values should be comma-separated with no space.
You can also enable default behavioural settings Lock Default(s) after selection, Set Default(s) when cleared, Set Default(s) on open, and Run Actions after selection.
Figure 29: General Options
Search Options
Search Options has settings to display a Dropdown search and a Search icon, sets the Search icon position and the Search mode.
Normal - enter text to return matches from the beginning of each value.
Wildcard - enter text between the asterisks * * to return matches for each value which contains the search string.
Fuzzy - enter text after the ~ sign to return matches which most resemble the search string. Expression - enter a Qlik Sense expression to return matches which meet the conditions contained in the expression.
Exact Search - enter text to return only results which match the search string exactly.
Figure 30: Search Options
Icons
Icons settings controls Qlik Sense native icons with Show Maximize Icon or Show Snapshot Icon.
Note: The Snapshot Icon has been part of the Hover Menu since the Qlik Sense September 2020 release, and is no longer controlled using the property panel.
Figure 31: Icons
Vizlib Actions, Appearance, Alternate State, Viztips and Tooltips
These settings control actions, visual appearance, alternate states, and tooltip behavior for your Vizlib Filter.
Vizlib Actions
Vizlib Actions settings allow you to integrate Vizlib Actions with Vizlib Filter. You can use multiple actions in the same sheet. To use actions when you're in analysis mode, right-click on the sheet to open the context menu. You can enable Actions to display the settings and also enable actions Use with alternative state to integrate them with Alternate States.
Figure 32: Vizlib Actions
Appearance
The Appearance settings allow you to Show Titles, add a Title, Subtitle, and a Footnote. You can also choose to Toggle off hover menu and Show details to include more information about the data you're using.
Figure 33: Appearance
Alternate State
Alternate State permits you to assign Vizlib Filter to an alternate selection state. Setting the Alternate States Manager to Show allows you to view the states you've already created, and you can also choose to Show Alternate States Icon.
Figure 34: Alternate State
Viztips and Tooltips
If you'd like to include tooltip, you can enable the Tooltips setting in Viztips and Tooltips.
Figure 35: Viztips and Tooltips
You can select your Viztips Content using the drop-down and use Viztips Settings to set the width and height.
Figure 36: Viztips Content, Viztips Settings
If you'd like to know more about working with Viztips, you can find our Overview article here.