Skip to main content
Announcements
Qlik Connect 2025: 3 days of full immersion in data, analytics, and AI. May 13-15 | Orlando, FL: Learn More
cancel
Showing results for 
Search instead for 
Did you mean: 
jonvitale
Creator III
Creator III

Mashup filter pane not reloading

Hi all,

I am creating a mashup, in which I am loading the filter pane object directly from the underlying Sense app. (As an aside, is this the best way to use filter panes in an app or is it better to create a custom html object?)

The filter pane works on initial load. See:

Capture.PNG

However, when I navigate away from the page and come back the Qlik object doesn't get loaded into html. Instead I get the default text ("Loading...').

I am using AngularJS. Here is the template, in which the qlik object is supposed to load:

<div id="{{$ctrl.objId}}" class="qvobject qv-filterpane" ng-style="{ 'height': '5rem', 'width': '100%' }">

   Loading...

</div>

I am doing the actual loading within the $onInit hook. Like this:

$onInit(){

   this.$openApp.getObject(this.objId,this.objId, this.objOptions || null)

}

Any ideas why it won't reload? I put a console.log in the $onInit function and it gets called every time I navigate to the page, so it's not that getObject isn't being called. Also, everything else on the page gets reloaded, only the filter pane does not.

Thanks.

5 Replies
Anonymous
Not applicable

I can't remember if I had this exact error but Interacting with the App and qlik engine and having it load consistently was a problem for me until I tied it all to the window in Angular.

So in the component where the mashup lives we have the constructor calling....

  constructor(private domSanitizer : DomSanitizer, private winRef: WindowRef) {

    this.window = winRef.nativeWindow;

    this.qlikApp = winRef.nativeWindow.app;

    console.log(winRef.nativeWindow.app);

    winRef.nativeWindow.loadQlik(this.qlikObjects);

Where loadQlik is a seperate function in a js file under assets that has all the mashup code.

window.loadQlik = function(objects) {

  var prefix = '/';


  var config = {

  host: 'qlik.mashey.com',

  prefix: prefix,

  port: 443,

  isSecure: true

  };

  //to avoid errors in workbench: you can remove this when you have added an app

And the apenApp , and getObject calls now nested in that function looks like...

  //open apps -- inserted here --

  window.app = qlik.openApp('e2382997-ff7d-42be-892b-a73bd07f8687', config);



  //get objects -- inserted here --

    for(i = 0; i< objects.length;i++){

      app.getObject(objects.id,objects.qlik_id);

    }

  


And I'm just using an array to store the object IDs.

Hope this can resolve your issues as well.

jonvitale
Creator III
Creator III
Author

Thanks Andrew. I'll check it out. I've temporarily moved on to a new project so I can't be sure for right now, but as soon as I get back I'll try your approach and see if it works.

rbartley
Specialist II
Specialist II

Hi Jonathan,

I can't comment on why the filter is not loading as I'm not using Angular.  However, with regard to whether to simply take the filter pane from the underlying Qlik Sense app or create an HTML version, it really depends on whether the filter pane meets your requirements.  If so, it certainly involves less coding to just use getObject.  However, I have come across a number of scenarios which have led me to create my own HTML lists, including single-selection lists.  Of course, you also have more flexibility in styling when creating your own HTML lists.

ErikWetterberg

Hi Johnathan,

I don't really know why the filterpane does not work, but it is different from other visualizations in that it's a container holding a set of listboxes, which are really visualizations themselves. An alternative might be to create the listboxes with the visualization API instead (I think there is some example on that in the community).

Another thing you could try is to remove the qv-filterpane css class from your code. Qlik Sense uses that css class internally in the filterpane, so using it in your template might cause problems.

Hope this helps

Erik Wetterberg

jonvitale
Creator III
Creator III
Author

Erik,

Removing the qv-filterpane css class didn't seem to have any effect, but thanks for the suggestion.

I will probably try to build my own filters, perhaps using the visualization API to create listboxes. Re-using my filter-pane from the app would have made life easier, but I suppose that having my own version, which I can style as I wish, won't be too bad.