A drop-down list is pretty much a user interface HTML element that can be implemented using <select> and <option> values. As this extension heavily relies on HTML, it's presenting a good use case to implement it using an AngularJS template.

As a result, we should try to implement an initial pre-populated version of a drop-down list in the template to first get to a good feeling of what we want it to look like, before connecting it to the engine.

To save time on styling, and to keep the drop-down object consistent with the rest of Qlik Sense's UI, we will make use of Leonardo UI's native drop-down list by defining the template.html file in the following way:

//template.html
<div>
<h4>Dimension Title</h4>
<select class="lui-select lui-select--gradient">
 <option value="1" selected>First</option>
 <option value="2">Second</option>
 <option value="3">Third</option>
</select> 
</div>

This is the HTML output:

Before we dive into preparing and coding the template, let's first get to the main code in the next section and define all required variables to the scope.