New senseUtils feature: filterPanel





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:
[code lang="js"]
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
[/code]

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.

-Speros

TAGS: Miscellany

Related News

"...Thirteen's just obnoxious."

Read More

d3vl I've uploaded a new extension to GitHub called the d3 visualization library, or d3vl...

Read More