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;

    }