I’ve added a new component to senseUtils called filterPanel. filterPanel allows a user to define a list of fields in a Qlik Sense application. The object will then generate all of the list objects, retrieve the data from the Qlik Sense server, and build or update the existing filterPanel UI. The panel can be created in an existing element on a webpage.
The panel features badges for the # of selections and collapsible filters by default. These settings can be easily changed with the .badges() and .autoCollapse() methods.
CSS is used for the collapsing behavior as well as the styling. The base css file (filter-panel.css) can be used as a starting point for applying custom styling to the panel. Alternatively, the filterPanel could just be used to create the list objects and keep track of their values. This is possible with the .fields() method, which returns a list of the current fields in the panel as well as attribute like the number selected, the total number of elements, and all of the values of the filter.
Documentation for the panel’s use is in the README of the senseUtils’ repository. An example use, taken from the repository:
app; // assume a Qlik Sense app object exists in this variable var filterPanel = senseUtils.filterPanel() // creates a new filterPanel .app(app) // sets the app for panel to pull from .container("#filter_container") // sets an element with id "#filter_container" as the parent .addFields(["Region","Country"]); // adds the fields Region and Country to the panel filterPanel.badges(false); // disables badges filterPanel.removeField("Region") // removes the Region filter from the panel
The live demo above also uses Bootstrap’s CSS. This helps with some of the text centering, but is not necessary for the panel to function.