Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

jonvitale
Contributor III

Mashup: Filters in bootstrap collapse (accordion)

Hi all. Hopefully, this new format will still ensure that the right people see this question. We'll see I guess.

I am creating a Qlik Sense mashup with Angularjs and Bootstrap. Many of my templates have an accordion component like this below. You click on one of these bars and the collapsed content underneath expands (using Bootstraps collapsed class).
Capture.PNG

In one case I have a filter panel rom a Qlik Sense app that appear in the collapsed content (see below, look for "Current Network", "School Name", ...). Since the filters are themselves collapsed, clicking on them should enable a pop up dialog where I can scroll through filter values. However, clicking on a filter name does nothing. Strangely, if I take the filter panel out of the accordion, I put it on top, it seems to work. So, there seems to be some kind of incongruency having the filters inside of the collapsed accordion content. Any ideas?

Capture.PNG

5 Replies
erik_wetterberg
Valued Contributor III

Re: Mashup: Filters in bootstrap collapse (accordion)

Hi,

And when do you get the filterpane (call app.getObject /app.visualization.show)? When page is loaded or when the section is expanded? Probably easier to get it to work if you get it when section is expanded.

Erik Wetterberg
https://extendingqlik.upper88.com/
jonvitale
Contributor III

Re: Mashup: Filters in bootstrap collapse (accordion)

I have a reusable component in the template called <qlik-object> .  Within this component the app.getObject is called in the $onInit (probably unnecessary) and $onChanges lifecycle hooks.

Also, in the parent component, when the user clicks the accordion to expand it I call qlik.resize(). I believe that this is necessary to make sure it sizes correctly for the newly expanded section.

Does that make sense?

erik_wetterberg
Valued Contributor III

Re: Mashup: Filters in bootstrap collapse (accordion)

Yes, that makes sense. You might try using the visualization API instead, with separate get and show methods.

Is the resize call made after the section is expanded?

Erik Wetterberg
https://extendingqlik.upper88.com/
jonvitale
Contributor III

Re: Mashup: Filters in bootstrap collapse (accordion)

I'll take a look at the visualization api.

For the resize, it's called on a click event handler on the button (the accordion tab being the button). I suppose it's possible that handler gets called before the section actually expands, and then its resizing to fit a not-quite-yet expanded section. I'm not sure how to wait for the section to actually expand before calling resize.

Highlighted
erik_wetterberg
Valued Contributor III

Re: Mashup: Filters in bootstrap collapse (accordion)

I've no experience with bootstrap collapse, but from the documentation it looks like they have a 'shown.bs.collapse' event that should work better rthan the click event.

https://getbootstrap.com/docs/4.1/components/collapse/#events

Erik Wetterberg
https://extendingqlik.upper88.com/
Community Browser