The folder structure is defined, and so is the property panel and a basic idea of our desired HTML output. We can now get started with the coding. As we are not leveraging the dimensions and measure properties, we will not need to define initialProperties. Snapshots will be left out as well, as no one really needs to take screenshots of their drop-down elements for their Qlik Sense Story.

This will result in the JavaScript skeleton, which we will use to write our code in:

define(['qlik', './properties', 'text!./template.html', 'css!./MasteringQSdrop-down.css'],
function(qlik, properties, template) { 
 return { 
     snapshot: {
         canTakeSnapshot: false
     },
     definition: properties,
     paint: function(){},
     resize: function(){},
     template: template,
     controller: ['$scope', '$element', function (scope, $element) {
        //Code comes here
    }]
     }
});

Based on the requirements, as we need to display the drop-down filters, capture their states, and also to pass back selected drop-down values as selections to the Qlik Sense data model, we will need to define the following three variables for the dimension values:

• title
• selection_state
• element_id

As the first step, we will call the dimension values using a qListObjectDef object and retrieve them via the createList method:

//Get list of values
 var obj = {
     "qDef": {
     "qFieldDefs": [scope.layout.field]
     },
     "qInitialDataFetch": [{
         qTop : 0,
         qLeft : 0,
         qHeight : 10000,
         qWidth : 1
     }]
 };
var app = qlik.currApp();
//Create the listbox as a session object which will persist over the session and then be deleted.
app.createList(obj,function(listobject) {
    //Dimension values values
}

Now that the list object is created and returns its dimension values, it's time to define all required variables within the call:

//Create the listbox as a session object which will persist over the session and then be deleted.
app.createList(obj,function(listobject) {
   //Define dimension title
   scope.dimension_title = listobject.qListObject.qDimensionInfo.qFallbackTitle

   //Define Dimension value
   scope.dimension_values = listobject.qListObject.qDataPages[0].qMatrix.map(function(row){
   return {
      title: row[0].qText,
      element_id: row[0].qElemNumber,
      selection_state: row[0].qState
   }
 })

Now that we have everything that we need in the scope let's go back to the template and explore how we can use the results of the dimension to create the dynamic drop-down list.

Starting with the dimension title, kept within scope.dimension_title, it can directly be read by the template by defining it, as it is using curly brackets: {{dimension_title}}.

For the drop-down list, we will need to utilize ng-repeat , as we wish to loop through all available dimension values and create separate HTML <options> tags for each one of them. This is achieved using ng-repeat='value in dimension_values track by $index'. Each repeated value can then be used to pull the {{value.title}}, and {{value.element_id}} as its option's value. The selection state will be defined as a class, as we can then later easily style those classes in the CSS file. The result looks as follows:

<div>
<h4>{{dimension_title}}:</h4>
<select class="lui-select lui-select--gradient">
     <option ng-repeat='value in dimension_values track by $index' value="{{value.element_id}}" class="state_{{value.selection_state}}">{{value.title}}</option>
</select> 
</div>

And this now results in a beautiful dynamic drop-down list, which is defined by the property panel: