Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
jonvitale
Creator III
Creator 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

Labels (5)
5 Replies
ErikWetterberg

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.

jonvitale
Creator III
Creator III
Author

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?

ErikWetterberg

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?

jonvitale
Creator III
Creator III
Author

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.

ErikWetterberg

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