Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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
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
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
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
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
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
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