Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
In an earlier tutorial I described how to create a bootstrap drop down Mashup Editor - Create a Bootstrap Drop Down selection menu
What if you need to create more than one drop down in a single page? For this, I have create a simple reusable object that you can call as many times as you need.
Open the files from the previous tutorial and start making some changes.
var data = {
hq: {},
rf: {}
};
function getFieldData (field, callback, title) {
app.createList({
qDef: {
qGrouping: "H",
qFieldDefs: [
field
],
qSortCriterias: [{
qSortByAscii: 1,
qSortByLoadOrder: 1
}],
},
qInitialDataFetch: [{
qTop : 0,
qLeft : 0,
qHeight : 1000,
qWidth : 1
}],
qShowAlternatives: false,
}, function(reply) {
field = (title) ? title : field;
data.hq[field] = reply.qListObject.qDataPages[0].qMatrix;
refactorFieldData(field);
callback(true);
});
};
function refactorFieldData (field) {
var tdata = [];
$.each(data.hq[field], function(key, value) {
if (value[0].qState!=='X') {
tdata.push(value[0].qText);
}
});
data.rf[field] = tdata;
};
function createFieldFilter (field, fieldName) {
fieldName = (fieldName) ? fieldName : field;
if (data.rf[field].length > 1) {
var $element = $('#dropdown'+field + ' ul');
$element.empty();
$.each(data.rf[field], function(key, value) {
$element.append('<li><a data-select="'+ field + '" data-fieldname="'+ fieldName + '" data-value="'+ value + '">'+value+'</a></li>');
});
}
};
<div class="dropdown" id="dropdownYear">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Year
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" aria-labelledby="dropdownYear"></ul>
</div>
getFieldData('Year', function () {
createFieldFilter('Year');
});
This will get all of the data for the field 'Year' => add it into the object data.hq['Year'] => refactor it into a more readable format => put into data.rf['Year'] => createFieldFilter will look for the id dropdown+field and add the elements.
<div class="dropdown" id="dropdownCaseOwnerGroup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Department
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" aria-labelledby="dropdownCaseOwnerGroup"></ul>
</div>
getFieldData('Case Owner Group', function () {
createFieldFilter('CaseOwnerGroup', 'Case Owner Group');
}, 'CaseOwnerGroup');
You see in this one I am passing 2 parameters. This is because the field name has spaces and it will cause issues. So the first parameter is the name we will be using through out our code and the second, is the one that we will use to communicate with Sense for data retrieval and data selection.
$('body').on( "click", "[data-select]", function() {
var field = $(this).data('select');
var fieldName = $(this).data('fieldname');
var value = $(this).data('value');
app.field(fieldName).selectValues([value], true, false);
$('#dropdown'+field + ' button').html(value + ' <span class="caret"></span>');
$('#dropdown'+field + ' ul li').removeClass('active');
$('#dropdown'+field + ' ul li:contains(\''+value+'\')').addClass('active');
});
$('#dropdownCaseOwnerGroup button').html('Select Department <span class="caret"></span>');
$('#dropdownYear button').html('Select Year <span class="caret"></span>');
Our webpage should like this now
That's it. Let me know if you run into any issues. I will be more than glad to help you with this!
Yianni
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.