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>
