How to create custom action based on a BLOX dropdown filter (+Styling the filter)?
I'm currently using the Wiser Filter widget plugin to display some dropdown filters on a dashboard, but I would like to add some more involved filtering (where I potentially apply filters to two columns at once) using BLOX.
I really like the styling of the Wiser Filter widget, and I think the default Blox dropdown filter styling, while practical, is very basic. I haven't found a way to style the dropdown box. Any guidance on where to start in that direction would be useful.
My main issue, however is that I have some trouble getting the BLOX dropdown filter to work as I would want it to. Even the default template doesn't actually work for me to *filter*. It does display the list of filter values but the 'apply' button does nothing, even though I filled in the filter name in the script and that's also what the filter on the dashboard was called.
Interestingly, the default template gives the snippet for the dropdown the id "data.filters[0].filterJaql.members[0]". If I check the documentation, that says the id attribute for a Dropdown must be 'selectVal'.
I wasn't particularly interested in the default usecase for the dropdown so I used the 'selectVal' id and tried to create a custom action that reads out this value (+ a value from a tickybox) and applies filters that way. But there I run into the issue that the value available as 'selectVal' is an HTML Collection that the filters can't work with. It actually seems to be the entire list of values that *could* be filtered on, not the selected value. How do I get the actual selected value so I can use it in my script?
The script of the custom action that showed to me that 'selectVal' was a strange collection (I know this doesn't actually set any filters yet):
Hi irismaessen ,
Check if the below post helps:
https://www.binextlevel.com/post/blox-drop-down-with-all-selection
(second line in the blox script is to set border-radius: "style": "select {border-radius:5px}",)
-Hari
Hey Iris,
You can set global rules for css in the first line of blox:"style": "#select_id { width: 100%; border: 1px solid; border-radius: 15px; padding: 0.25em 0.5em; font-size: 1.25rem; cursor: pointer; background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);}",
You'll get something like this:
Regarding custom action -> How do you pass members to the filter object?
You can try this:prism.activeDashboard.filters.update( { 'jaql': { 'dim': "[Brand.Brand]", // filter dim 'title': "Brand", // filter title 'filter': { 'members': [payload.data.select_id] // filterText }, 'explicit': true, 'multiSelection': true, 'datatype': 'text' } }, { 'save': true, 'refresh': true } )
If you are intrested in some more advanced filter dropdown - where you are able to choose single or multiple items in one dropdown, add dependent filter within dropdowns, be able to control look and feel from design panel, I can suggest one of our most popular plugin
Advanced dashboard filters
Best regards,
Alek from QBeeQ