Qlik Community

Qlik Design Blog

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

Employee
Employee

Mashup Editor - Create a Bootstrap Drop Down selection menu

In many of my webpages that I've created using the Capabilities API, I had to create a custom menu and I always used Bootstrap's Dropdown component. In this tutorial I will show how to do the same.

From the Mashup Editor, create a new project and give it a name, using "Grid Mashup Template". this will include bootstrap for you.

.1.png

2.png

Select the app "Helpdesk Management.qvf".

From the right hand side, create a list and select "Department" from the Dimensions. Make sure you add a callback function, since that is where we will put our code. Here, I named it showData.

3.png

Now, lets go to the html template and add the dropdown code.

In the div that has the id="QV01", add the following:

  <div class="col-sm-4 qvplaceholder" id="QV01">

   <div class="dropdown">

  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

   Select Department

   <span class="caret"></span>

  </button>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

  </ul>

   </div>

  </div>


In your javascript code, you will see a callback function created.


//callbacks -- inserted here --

function showData(reply, app){}

The reply has all of the data from the Dimension so we can create the list elements in the drop down. So, let's populate the drop down list elements.

function showData(reply, app){

     $('#QV01 .dropdown ul').empty()

     $.each(reply.qListObject.qDataPages[0].qMatrix, function(key, value) {

          if (typeof value[0].qText !== 'undefined') {

               $('#QV01 .dropdown ul').append('<li><a data-select="'+ value[0].qText+'" href="#">'+ value[0].qText+'</a></li>');

          }

     });

}

Notice that we empty the list first, otherwise every time we make a selection, the same elements will be added in the drop down.

Now, we have to add a jQuery on click event that will trigger the selection and change the button value.

$('body').on( "click", "[data-select]", function() {

     var value = $(this).data('select');

     app.field('Case Owner Group').selectValues([value], false, false);

     $('#QV01 .dropdown button').html(value + ' <span class="caret"></span>');

  });

The selection drop down is ready. now lets add some more graphs to make it more interesting when we select a department. I added 'Open & resolved cases over time', the KPI 'High priority Cases' and 'Case Details'. So the final page should look like this:

4.png

Last, we must set the button to the original state after the user clicks on the "Clear All". We just add the following line in the code.

case 'clearAll':

     app.clearAll();

     $('#QV01 .dropdown button').html('Select Department <span class="caret"></span>');

     break;

15 Comments
prabhu0505
Valued Contributor

Hi Yianni -

Where should I add the JQuery code? Thanks!

0 Likes
301 Views
Employee
Employee

Hello Saravana,

In your browser, got to your mashup editor at http://localhost:4848/dev-hub/mashup-editor, create a new project as the screenshots above. This will create several pages for you. One of these, is a javascript .js file. You will add all of the code there.

More details on how to create a mashup, you can go here Creating a webpage based on the Qlik Sense Desktop Mashup API

I hope I answered your question.

best,

Yianni

0 Likes
301 Views
prabhu0505
Valued Contributor

Yes I was able to complete the tutorial successfully. Thanks!

0 Likes
301 Views
Employee
Employee

And as an extension

SenseUI-DropDown

0 Likes
301 Views
Not applicable

Can I assume this will not work for QlikView?

0 Likes
301 Views
miskin_m
Contributor

Hi Yianni,

I followed another tutorial and was able to build the custom filter. Just want to know if I am using different colors to show selection made then how to show the possible selection (white and grey color of filter) for another filter.

Thanks and Regards

Miskin M

0 Likes
301 Views
Employee
Employee

In you loop check for the state and assign a css,

if (value[0].qState === 'S')

0 Likes
301 Views
miskin_m
Contributor

Will work on this...

Thanks

0 Likes
301 Views
vkish16161
Contributor III

Still can't understand why Qlik wouldn't provide this standard. Tableau and Power BI do.

0 Likes
301 Views

How to ad Multi selection to this(cube) object?

0 Likes
301 Views
Employee
Employee

Well, this is getting a little bit more complicated.

On the click even you will need to store the values into an array and have 2 buttons, confirm and cancel. On confirm, make the selections based on the stored array

Y

0 Likes
301 Views

Thank you, Yanni.

So like the native QS object?

Can we do that like in QV?

Just by highlighting the cells?

0 Likes
301 Views
Employee
Employee

Yes, you can check for the qState of the row and have specific classes so if value[0].qState === "S"  { var currentClass = "Green" } etc

0 Likes
301 Views

Thank you again.

Would you mind to add that option to above example?

0 Likes
301 Views
nvrphanikumar
New Contributor III

jvs

Instead of making selections on field in the app as below

app.field(fieldName).selectValues([value], true, false);


Can you help me show a way to pass values to a Variable in Qlik app like below?

app.variable.setStringValue("vKumar", $("#VKumar").val());

0 Likes
301 Views