5 Replies Latest reply: Oct 13, 2017 7:29 AM by Stanly Johns RSS

    Qlik Sense Mahups Field Values Selection

    Stanly Johns

      Dear Community,

       

      I'm new to this Qlik Sense world. Here I'm trying to develop a mashup with some customized selection drop-down menus.
      I have tried the following code. But it works for the fields with integer values like Year(2011,2012,...), Hour(10,12,13,...,24) etc. But the code does not work for fields like Month('Jan','Feb',...), Weekday('mon','Tue',...) etc


      <html>

      <div class="col-md-3">

                                 <div id="yearDropDown" class="dropdown margin-bottom-30">

                                    <button class="btn btn-secondary btn-user dropdown-toggle" type="button" id="dropdownThree" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Year</button>

                                    <ul class="dropdown-menu dropdown-user" aria-labelledby="dropdownThree">

                                    </ul>

                                 </div>

                              </div>

                              <div class="col-md-3">

                                 <div id="monthDropDown" class="dropdown margin-bottom-30">

                                    <button class="btn btn-secondary btn-user dropdown-toggle" type="button" id="dropdowmFour" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Month</button>

                                    <ul class="dropdown-menu dropdown-user" aria-labelledby="dropdowmFour">

                                    </ul>

                                 </div>

                              </div>

       

      -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

      <js>

      //call back

      function MonthDropDown(reply, app){

      $("#monthDropDown>ul").empty();

              var qObject = reply.qListObject;

       

       

              $.each(qObject.qDataPages[0].qMatrix, function(){

              var item =this[0];

              var self = "";

              if (item.qState == "S") {

              currentReg = item.qText;

              self = " active";

              }

       

       

              $("#monthDropDown>ul").append("<li class=\"dropdown-item "+self+"\"><a>"+item.qText+"</a></li> ");

       

       

       

       

              });

             

              function checkArray(arr,item){

                  var index = -1;

                  $.each(arr,function(i){

                      if(this.qText == item.qText){

                          index = i;

                          return false;

                      }

                  });

                  return index;

              }

              var selArray = [];

              $("#monthDropDown>ul>li>a").click(function(e){

                  e.stopPropagation();

                  var sel = {qText:$(this).text()};

                  var index = checkArray(selArray,sel);

                  if(index > -1){

                       $(this).parent().addClass('active');

                       selArray.splice(index);

                  }else{

                      $(this).parent().addClass('active');

                      selArray.push({qText:$(this).text()});   

                  }

                  console.log(selArray);

                  app.field('Month').selectValues(selArray, true, false);

              });

      }

      //list

       

      app.createList({

      "qFrequencyMode": "V",

      "qDef": {

      "qFieldDefs": [

      "Month"

      ]

      },

      "qExpressions": [],

      "qInitialDataFetch": [

      {

      "qHeight": 20,

      "qWidth": 1

      }

      ],

      "qLibraryId": "tHjdcMT"

      },MonthDropDown);

       

       

      ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

      (Chrome)Browser Console Output(when clicked on Monday in the drop-down list.)

       

      [{…}]0: {qText: "mon"}length: 1__proto__: Array(0)

      ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

       

      But this selection does not reflect on other charts.

       

       

       

       

      Any help is greatly appreciated.


      Thank You

      Stan

        • Re: Qlik Sense Mahups Field Values Selection
          Erik Wetterberg

          Hi,

          Don't use qText for selections, use qElemNumber instead. Probably means you will have to save qElemNumber in an attribute, common practice is to use data-value.


          Hope this helps


          Erik Wetterberg

            • Re: Qlik Sense Mahups Field Values Selection
              Stanly Johns

              Hi Eric,

               

              Thank you for the reply. Could you please give me an example how to use data-value.
              I'm just a rookie in this mashup field.

               

              Thank You
              Stan

                • Re: Qlik Sense Mahups Field Values Selection
                  Erik Wetterberg

                  Hi,

                  When you create the list do something like:

                  '<a data-value="'+item.qElemNumber+'">'+item.qText+'</a>'
                  

                  In your click function do something like this:

                  var sel = this.dataset.value;
                  var index = selArray.indexOf(sel);
                  

                  And when you do the actual selection you can use the select method:

                  app.field('Month').select(selArray, true, false);
                  

                   

                  Hope this helps

                   

                  Erik Wetterberg

                    • Re: Qlik Sense Mahups Field Values Selection
                      Stanly Johns

                      Hi Eric,

                       

                      Thank You for the reply. I have followed your instructions and written the following lines of code.

                       

                      $("#monthDropDown>ul").empty();

                              var qObject = reply.qListObject;

                       

                       

                              $.each(qObject.qDataPages[0].qMatrix, function(){

                              var item =this[0];

                              var self = "";

                              if (item.qState == "S") {

                              currentReg = item.qText;

                              self = " active";

                              }

                       

                       

                              $("#monthDropDown>ul").append("<li class=\"dropdown-item "+self+"\"><a data-value=\""+item.qElemNumber+"\" data-text=\""+item.qText +"\">"+item.qText+"</a></li> ");

                       

                       

                       

                       

                              });

                             

                       

                       

                              function checkArray(arr,item){

                                  var index = -1;

                                  $.each(arr,function(i){

                                      if(arr[i] == item){

                                          index = i;

                                          return false;

                                      }

                                  });

                                  return index;

                              }

                              var selArray = [];

                              $("#monthDropDown>ul>li>a").click(function(e){

                                  

                                  e.stopPropagation();

                                  var sel = this.dataset.value;

                                  var index = checkArray(selArray,sel);

                                  if(index > -1){

                                      

                                       selArray.splice(index);

                                  }else{

                                      console.log("**Setting Active Class"+$(this).text());

                                      $(this).parent().addClass('active');

                                      console.log(this.dataset.value);

                                      selArray.push(this.dataset.value);   

                                  }

                                  console.log(selArray);

                       

                       

                                  app.field('Month').select(selArray, true, false);

                                  console.log(selArray);

                              });

                       

                      Output: Now it gives me an error "Invalid method parameters"
                      error.JPG

                       

                      The selection array values are getting updated.

                       

                      Could you please help me with this issue.?

                       

                      Thank You
                      Stan

                        • Re: Qlik Sense Mahups Field Values Selection
                          Stanly Johns

                          Hi Erik,

                           


                          Thank you for your help. It's working perfectly. I have missed a method parseInt().
                          I have added that and the problem solved.

                           

                          function monthDropDown(reply, app){

                          $("#monthDropDown>ul").empty();

                                  var qObject = reply.qListObject;

                           

                           

                                  $.each(qObject.qDataPages[0].qMatrix, function(){

                                  var item =this[0];

                                  var self = "";

                                  if (item.qState == "S") {

                                  currentReg = item.qText;

                                  self = " active";

                                  }

                           

                           

                                  $("#monthDropDown>ul").append("<li class=\"dropdown-item "+self+"\"><a data-value=\""+item.qElemNumber+"\" data-text=\""+item.qText +"\">"+item.qText+"</a></li> ");

                           

                           

                           

                           

                                  });

                                 

                           

                           

                                  function checkArray(arr,item){

                                      var index = -1;

                                      $.each(arr,function(i){

                                          if(arr[i] == item){

                                              index = i;

                                              return false;

                                          }

                                      });

                                      return index;

                                  }

                                  var selArray = [];

                                  $("#monthDropDown>ul>li>a").click(function(e){

                                      

                                      e.stopPropagation();

                                      var sel = this.dataset.value;

                                      var index = checkArray(selArray,sel);

                                      if(index > -1){

                                          

                                           selArray.splice(index);

                                      }else{

                                          console.log("*****************Setting Active Class"+$(this).text());

                                          $(this).parent().addClass('active');

                                          console.log(this.dataset.value);

                                          selArray.push(parseInt(this.dataset.value));   

                                      }

                                      console.log(selArray);

                           

                           

                                      app.field('Month').select(selArray, true);

                                      console.log(selArray);

                                  });

                           

                           

                          }

                           

                           

                          Thank you

                          Stan