List selection not working in Qliksense Mashup

[calvin_wee]

Hi All,

I am new to Mashup and trying to create a list dropdown but not working. All the other components work well except the dropdown showing "Drag object to place in the layout" in Dev-hub.

Any advise? (Thanks in advance)

Here is what I did :

1. Add List (SITE and Customer) below auto populated in js

app.createList({"qFrequencyMode": "V","qDef": {"qFieldDefs": ["SITE"]},
"qExpressions": [],"qInitialDataFetch": [{"qHeight": 20,"qWidth": 1}],"qLibraryId": null},SiteList);

app.createList({"qFrequencyMode": "V","qDef": {"qFieldDefs": ["CUSTOMER"]},
"qExpressions": [],"qInitialDataFetch": [{"qHeight": 20,"qWidth": 1}],"qLibraryId": null},CustomerList);

2. Callbacks in js

function SiteList(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>');
}});}

function CustomerList(reply, app){$('#QV02.dropdown ul').empty()
$.each(reply.qListObject.qDataPages[0].qMatrix, function(key, value) {
if (typeof value[0].qText !== 'undefined') {
$('#QV02 .dropdown ul').append('<li><a data-select="'+ value[0].qText+'" href="#">'+ value[0].qText+'</a></li>');
}});}

3. Body on click in js

$('body').on( "click", "[data-select]", function() {
var value = $(this).data('select');
app.field('SITE').selectValues([value], false, false);
$('#QV01 .dropdown button').html(value + ' <span class="caret"></span>');});

$('body').on( "click", "[data-select]", function() {
var value = $(this).data('select');
app.field('CUSTOMER').selectValues([value], false, false);
$('#QV02 .dropdown button').html(value + ' <span class="caret"></span>');});

4. Added Clear All in js

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

5. In HTML

<section class="content-section-a">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 qvplaceholder" id="QV06">
      </div>
      <div class="col-lg-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">
          Site
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          </ul>
        </div>
      </div>
      <div class="col-lg-4 qvplaceholder" id="QV02">
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          Site
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

[calvin_wee · Accepted solution]

We managed to get it up and running but the effect is not good and thus dropped.

Thanks for your attention.