Solved: Re: Qlik Sense Mahups Field Values Selection - Qlik Community

stanlyrj · ‎2017-10-13

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>

</ul>

</div>

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

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

stanlyrj · ‎2017-10-13

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

View solution in original post

ErikWetterberg · ‎2017-10-13

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

Qlik Sense extensions, mashups, integrations and APIs
Blog Extending Qlik

stanlyrj · ‎2017-10-13

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

ErikWetterberg · ‎2017-10-13

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

Qlik Sense extensions, mashups, integrations and APIs
Blog Extending Qlik

stanlyrj · ‎2017-10-13

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"

The selection array values are getting updated.

Could you please help me with this issue.?

Thank You
Stan

stanlyrj · ‎2017-10-13

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