Qlik Community

New to Qlik Sense

Discussion board where members can get started with Qlik Sense.

stanlyrj
New Contributor III

Qlik Sense Mahups Field Values Selection

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

1 Solution

Accepted Solutions
stanlyrj
New Contributor III

Re: Qlik Sense Mahups Field Values Selection

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 == 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

5 Replies
erik_wetterberg
Honored Contributor

Re: Qlik Sense Mahups Field Values Selection

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

Erik Wetterberg
https://extendingqlik.upper88.com/
stanlyrj
New Contributor III

Re: Qlik Sense Mahups Field Values Selection

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

erik_wetterberg
Honored Contributor

Re: Qlik Sense Mahups Field Values Selection

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

Erik Wetterberg
https://extendingqlik.upper88.com/
stanlyrj
New Contributor III

Re: Qlik Sense Mahups Field Values Selection

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 == 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

stanlyrj
New Contributor III

Re: Qlik Sense Mahups Field Values Selection

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 == 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

Community Browser