2 Replies Latest reply: Jul 16, 2018 4:45 AM by okp okp RSS

    Callback for selectValues in mashup

    okp okp

      Hi there,

       

      I was wondering if there was any callback function after triggering selectValues API.

       

      This is broadly what we are doing (trough angularJS) : we display some KPIs (items) from qlik in an html page.

      Then we want to be able to update those items based on a list values (company departments), so KPI are updated accordingly.

      We want to display a list of these values, select one or more, then apply to the displayed tiems (quiksense filter (?))

      Based on tutorials i've seen on Qlik's Youtube, this is my cleaned up code :

       

       

      $scope.app.createList({
          "qDef":{
              "qFieldDefs":["Departments"]
          },
          "qInitialDataFetch":[{
              qTop:0,
              qLeft:0,
              qHeight:10,
              qWidth:0
          }]
      }, function(reply){
          $('#dptFilter').empty();
          var qObject = reply.qListObject;
          //if we have some values
          if(qObject.qDataPages[0].qMatrix && qObject.qDataPages[0].qMatrix.length>0){
              $.each(qObject.qDataPages[0].qMatrix, function(){
                  var item=this[0];
                  var selT="";
                  //check if item is selected and apply class
                  if (item.qState=="S"){
                      currentReg=item.qText;
                      selT=" filtActive";               
                  }
                  //output to HTML
                  $('#dptFilter').append('<div class="col-xs-4'+selT+'"><a>'+item.qText+'</a></div>');
              });
              var selArray=[];
              //check if item is already in array
              function checkArray(arr,item){
                  var index=-1;
                  $.each(arr,function(i){
                      if(this.qText==item.qText){
                          index=i;
                          return false;
                      }
                  });
                  return index;
              }
              //on click on an item, remove or add it to the selection array
              $('#dptFilter div').click(function(){
                  var sel={qText:$(this).text()};
                  var index=checkArray(selArray,sel);
                  if(index>-1){
                      $(this).removeClass('filtActive');
                      selArray.splice(index,1);
                  }else{
                      $(this).addClass('filtActive');
                      selArray.push({qText:$(this).text()});
                  }
              });
              //on click on submit button, trigger selectValues method
              $("#submitDptFilt").click(function(){
                  $scope.app.field("Departments").selectValues(selArray,false,true);
              })
          }
          //else, no values -> hide container
          else{
              $('#filtersContainer').hide();
          }
         
      });
      
      

       

       

      Because we have 30-40 KPI items in the page (displayed through expand/collapse feature or modal, but all in DOM), the selectValues method can take a while, somehow freezing the page while working on, during a few seconds.

       

      My question is then :

      Is there a way to have a callback on this method ? I mean in order to know when is has finished filtering and updating all KPIs in client's browser.

      This way i could display a loading overlay and remove it when done.

       

      Many thanks !

        • Re: Callback for selectValues in mashup
          Erik Wetterberg

          Hi,

          Normally the selectValues call is very fast. That's because the calculations aren't done yet. Instead what you get back from the selectValues call would be an array with handles to all objects that are affected. If you use the browser console to watch the traffic on the web socket you would see this ( also if use use the Engine API explorer in dev-hub). So even though the selectValues call returns a promise, waiting for that won't help.

           

          What normally takes time is the getLayout call(s) made after that, that's when the calculation happens. You really need to wait until all those are ready. I don't know of any case where this has been done but it should be possible, though there isn't really any support for that in the APIs.

           

          Erik Wetterberg

            • Re: Callback for selectValues in mashup
              okp okp

              Thanks Eric for your answer.

              So it's not the selectValues that takes time, but the updates to the layout after that.

              You really need to wait until all those are ready

              Yes, that's the point...

              But I can't find any documentation or code samples that allow this to be done.

               

              When using an UI, it's really important (UX purposes) that we know the current state of the app: loading (data fetching), working (client-side), ready (update completed)

               

              A bit disappointed that it's not integrated in the API by default...

               

              No idea where I should dig info for that?

               

              Thanks again