Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Announcements
QlikWorld happening right now! You can still join: REGISTER NOW
Francis_Kabinoff
Employee
Employee

When you're building a Qlik Sense mashup, you have the option of including the selections bar, which is pretty awesome. The selections bar not only keeps track of and displays selections made, it has step back and step forward functionality to undo or redo selection changes, a search tool, and a drop down selections tool.

It's possible, however, that for whatever reason you may not want to use the selections bar, but you still want to give your users some control over selections.  The simplest way to do this probably is to include a clear selections button, as we do in quite a few of our mashups.  You can see how to do that in a previous post on this blog here - How to create a “clear selections” HTML button for your next mashup project.

But if you want to show a little more information on current selections, and give users a little more granular control over what selections they are clearing, you can build a custom selections bar.  I'm going to walk through building a very simple selections bar, and you can follow along and build on the idea, adding your own styling and customizing it even further.

custom_selections2.png

NOTE - I'm going to assume that you have some prerequisite knowledge of building a mashup. If you do not, here are a few links to get you started -

Qlik Sense Workbench. The visualization and Mash-Up Editor

Qlik Sense Mash-Up API Tutorials

Qlik Sense Help - Building Mashups

The first thing you need to do is actually get the selections currently made. You can do that like this -

app.getList("SelectionObject", function(reply){

  // STUFF TO DO IN CALLBACK

});

That will get you the selection object as the reply. The rest of our code will go inside of the callback function, which will execute every time the selections change.  Now in the callback, we need to grab the DOM node we're going to use for the selections bar, and make sure it's clear of any previous content so that every time the callback function is called we are not appending duplicate content.

$selections = $("#selections");  //DOM node to append selections to

$selections.html("");  //Clear node of any previous selections

Now comes the bulk of our code. We have to loop through the array of fields that have selections, and for each field that has selections, grab some variables, including the field name, number of selections made in field, the total values in the field, a string of the names of the values selected, and something called the selection threshold. If the number of selections is greater than the selection threshold, the selection object will not return the name of every value selected, so at that point we no longer display the names of the values selected, and instead display the number of selections. You could also choose to always display just the number of selections as well, instead of the names of the values selected. Here, I've chosen to display the names of values selected, when possible.

//Loop through array of fields that have selections

$.each(reply.qSelectionObject.qSelections, function(key, value) {

  var field = value.qField;  //The field name

  var numSelected = value.qSelectedCount;  //Number of selections in field

  var total = value.qTotal;  //Total number of values in field

  var threshold = value.qSelectionThreshold;  //Threshold in which to display a number count instead of each value

  var selectedStr = value.qSelected;  //When numSelected is less than or equal to threshold, a string of the names of each value selected

  //If numSelected is below or equal to threshold, show string of names of each value selected

  if (numSelected <= threshold) {

    var html = "";

    html += "<span class='selected-field-container' id='" + field + "'>";

    html += "<span class='selected-field'>" + field + ": </span>";

    html += selectedStr;

    html += " <span class='clear-field'>X</span>";

    html += "</span>";

    $selections.append(html);

  }

  // If numSelected is greater than threshold, show the numSelected of total values

  else {

    var html = "";

    html += "<span class='selected-field-container' id='" + field + "'>";

    html += "<span class='selected-field'>" + field + ": </span>";

    html += numSelected + " of " + total;

    html += " <span class='clear-field'>X</span>";

    html += "</span>";

    $selections.append(html);

  }

});

Notice that I've include a span with class 'clear-field'.  We're going to attach an event listener to that, so that when that span is clicked, the corresponding field has its selections cleared.

//Event listener on .clear-field to clear that field's selections when clicked

$(".clear-field").click(function() {

  var field = $(this).parent().attr("id");  //Field associated with the .clear-field that was clicked

  app.field(field).clear();  //API method to clear the field

});

And that's it.  I've attached a folder of the entire project where you can see all of the code, and you can place it into the extensions folder of Qlik Sense Desktop to see this in action and play around with it (you'll also need the Consumer_Sales.qvf if you don't already have it).

9 Comments
Not applicable

Hi Francis,

This is a great extension.

I've added it to the extensions folders, like all my other extensions but the 'customSelections' object doesn't appear in my list of objects in Qlik Sense Desktop/Qlik Sense. I've also tried hitting refresh.

Many thanks

0 Likes
1,507 Views
Francis_Kabinoff
Employee
Employee

Hi Xena,

This is not an extension, but rather a "how to" if you were building a website with the Qlik Sense Capability APIs. The attached files are a project showing this in action. The easiest way to check it out, if you are interested, is, if you are using Qlik Sense Desktop, to unzip the file and place the folder in C:\Users\<username>\Documents\Qlik\Sense\Extensions, then navigate to the dev hub at http://localhost:4848/dev-hub, and locate and open this mashup from there. You can check out the code, and reuse it in your own mashup.

0 Likes
1,507 Views
pedroygor89
Contributor
Contributor

Helo  Francis and Xena,

At  my field there is a expression. How may I get the category name?

field-name.png

0 Likes
1,507 Views
Francis_Kabinoff
Employee
Employee

If your field is an expression, then it is actually a "calculated dimension" (see here) and it's name becomes the entire expression.

0 Likes
1,507 Views
pedroygor89
Contributor
Contributor

Thanks I put a Switch and it works very well!

Switch (field) {

                case "DATA_FECHAMENTO":

                    field = " ** ";

                    break;


Did you have any problem with the clear field? Because that was the only part than not works.

0 Likes
1,507 Views
srada2609
Partner
Partner

Hi Francis!! Thanks for your tutorial, is what I needed!!

I am beginning with QlikSense and Mashups and I'm not sure how to use this customSelections.js


Could you help me?


Thanks you so much!!!

0 Likes
1,507 Views
Francis_Kabinoff
Employee
Employee

So all of the files in the customSelections.zip make up a mashup. The customSelections.js file includes the config for the Qlik Sense Capability APIs connection, then making the connection itself, then doing stuff with it (in this case building a custom selection bar). The whole thing is an example of how to do it. I'm not exactly sure what you mean by "how to use the customSelections.js". How are you looking to use it?

0 Likes
1,240 Views
ajunaidm
Partner
Partner

I have pasted your code in my mashup but is not working ... I am unable to understand how does it pickup the list. I am using another code that works for me but in that code I am unable to integrate the closure of a select with X button. If you can help below is my code

 

app.getList("CurrentSelections", function(reply) {

selectionslist = "";

var mySelectedFields = reply.qSelectionObject.qSelections;

console.log(mySelectedFields);

//loop through selected fields
var mySelectedFields_arrayLength = mySelectedFields.length;
for (var i = 0; i < mySelectedFields_arrayLength; i++) {

// Field Selection Name included or not
var text = ""

//console.log(mySelectedFields[i].qField);
console.log(mySelectedFields[i].qLocked);

//loop through selected field values
var currentFieldValues = mySelectedFields[i].qSelectedFieldSelectionInfo;

var currentFieldValues_arrayLength = currentFieldValues.length;

for (var y = 0; y < currentFieldValues_arrayLength; y++) {
//text += "<div class='chip sira-subtle cyan-text text-darken-2 z-depth-1" + "'>" + currentFieldValues[y].qName + "</div> ";
text += "<span class='took cyan-text text-darken-2 z-depth-2" + "'>" + currentFieldValues[y].qName + " </span> <span class='clear-field'> x </span>";
//put the field names into a variable
//console.log(text);
}

if(i===0) {
selectionslist = text;
} else {
selectionslist += text;
}

//add the complete string for this field to an array.
}
console.log(selectionslist);
$(".myselections").html(selectionslist);

});

0 Likes
1,207 Views
khalander
Creator II
Creator II

Hi @Francis_Kabinoff ,

 

It is really good post. I have added your code. But i am expecting below type of selection bar. could you please help?

https://community.qlik.com/t5/New-to-Qlik-Sense/Custom-selection-bar-in-Qlik-Sense-Mashup/m-p/187269...

 

Thanks in advance.

Regards,

Khalander

0 Likes
96 Views