Qlik Community

Qlik Sense Enterprise Documents

Documents for Qlik Sense related information.

Drop down menu and Sub drop down using Basic single page mashup template

shneior2
New Contributor II

Drop down menu and Sub drop down using Basic single page mashup template

final result

Drop Menu.png

1) create Basic single page mashup

2) edit .HTML file and add the following line after </li> more drop down menu:

<li class="dropdown qcmd">

<a class="dropdown-toggle" data-toggle="dropdown">Filters<b class="caret"></b></a>

<ul class="dropdown-menu multi-level">

<li class="dropdown-submenu">

<a tabindex="-1" href="#">Version</a>

<ul class="dropdown-menu">

<li class="dropdown-submenu">

<a data-toggle="dropdown" id="dropdownMenu1">TT</a>

<ul id="ttlist" class="dropdown-menu"></ul>

</li>

</ul>

</li>

<li class="dropdown-submenu">

<a tabindex="-1" href="#">Time</a>

<ul class="dropdown-menu">

<li class="dropdown-submenu">

<a data-toggle="dropdown">Day</a>

<ul id="daylist" class="dropdown-menu"></ul>

</li>

<li class="dropdown-submenu">

<a data-toggle="dropdown">Hour</a>

<ul id="hourlist" class="dropdown-menu"></ul>

</li>

</ul>

</li>

<li class="divider"></li>

<li class="dropdown-submenu">

<a data-toggle="dropdown">BB</a>

<ul id="bblist" class="dropdown-menu"></ul>

</li>

</ul>

  </li>


3) .JS createList

//create cubes and lists -- inserted here --

app.createList({

"qFrequencyMode": "V",

"qDef": {

"qFieldDefs": [

"TT_ID"

]

},

"qExpressions": [],

"qInitialDataFetch": [

{

"qHeight": 20,

"qWidth": 1

}

],

"qLibraryId": null

},ShowTt);

app.createList({

"qFrequencyMode": "V",

"qDef": {

"qFieldDefs": [

"Day"

]

},

"qExpressions": [],

"qInitialDataFetch": [

{

"qHeight": 20,

"qWidth": 1

}

],

"qLibraryId": null

},ShowDay);

app.createList({

"qFrequencyMode": "V",

"qDef": {

"qFieldDefs": [

"JOB_Hour"

]

},

"qExpressions": [],

"qInitialDataFetch": [

{

"qHeight": 20,

"qWidth": 1

}

],

"qLibraryId": null

},ShowHour);

app.createList({

"qFrequencyMode": "V",

"qDef": {

"qFieldDefs": [

"TT_BB"

]

},

"qExpressions": [],

"qInitialDataFetch": [

{

"qHeight": 20,

"qWidth": 1

}

],

"qLibraryId": null

},ShowBb);



4) .JS callbacks

//callbacks -- inserted here --

                function ShowBb(reply, app){                              

                var strBb = "";

var qObject = reply.qListObject;

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

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

                                strBb += '<li><a data-select="'+ value[0].qText+'" href="#">'+ value[0].qText+ '</a></li>';

                                }                                                              

}

);

$( '#bblist' ).html( strBb )

                }

                function ShowHour(reply, app){

                                var strHour = "";

var qObject = reply.qListObject;

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

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

                                strHour += '<li><a data-select="'+ value[0].qText+'" href="#">'+ value[0].qText+ '</a></li>';

                                }                                                              

}

);

$( '#hourlist' ).html( strHour )

                }

                function ShowDay(reply, app){             

                var strDay = "";

var qObject = reply.qListObject;

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

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

                                strDay += '<li><a data-select="'+ value[0].qText+'" href="#">'+ value[0].qText+ '</a></li>';

                                }                                                              

}

);

$( '#daylist' ).html( strDay )

                }

                function ShowTt(reply, app){

                var str1 = "";

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

var qObject = reply.qListObject;

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

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

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

                                //str1 += '<li><a  ">' + value[0].qText + '</a></li>';

                                str1 += '<li><a data-select="'+ value[0].qText+'" href="#">'+ value[0].qText+ '</a></li>';

                                }                                                              

}

);

$( '#ttlist' ).html( str1 )

                }

5) .JS on click AppUi func

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

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

     app.field('TT_ID').selectValues([value], false, false); 

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

  });

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

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

     app.field('TT_BB').selectValues([value], false, false); 

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

  });

 

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

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

     app.field('JOB_Hour').selectValues([value], false, false); 

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

  });

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

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

     app.field('Day').selectValues([value], false, false); 

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

  });

6) .CSS

.dropdown-submenu {

    position: relative;

}

.dropdown-submenu>.dropdown-menu {

    top: 0;

    left: 100%;

    margin-top: -6px;

    margin-left: -1px;

    -webkit-border-radius: 0 6px 6px 6px;

    -moz-border-radius: 0 6px 6px;

    border-radius: 0 6px 6px 6px;

}

.dropdown-submenu:hover>.dropdown-menu {

    display: block;

}

.dropdown-submenu>a:after {

    display: block;

    content: " ";

    float: right;

    width: 0;

    height: 0;

    border-color: transparent;

    border-style: solid;

    border-width: 5px 0 5px 5px;

    border-left-color: #ccc;

    margin-top: 5px;

    margin-right: -10px;

}

.dropdown-submenu:hover>a:after {

    border-left-color: #fff;

}

.dropdown-submenu.pull-left {

    float: none;

}

.dropdown-submenu.pull-left>.dropdown-menu {

    left: -100%;

    margin-left: 10px;

    -webkit-border-radius: 6px 0 6px 6px;

    -moz-border-radius: 6px 0 6px 6px;

    border-radius: 6px 0 6px 6px;

}

Version history
Revision #:
1 of 1
Last update:
‎08-13-2017 07:49 AM
Updated by: