We can statically populate a combobox in the HTML as shown in the cook book :
<oj-combobox-one id="combobox" value="{{val}}"
style="max-width:20em">
<oj-option value="Internet Explorer">Internet Explorer</oj-option>
<oj-option value="Firefox">Firefox</oj-option>
<oj-option value="Chrome">Chrome</oj-option>
<oj-option value="Opera">Opera</oj-option>
<oj-option value="Safari">Safari</oj-option>
</oj-combobox-one>
However if the option list is long and if we would want to source it from a REST service.
Please note that I would not confirm this is the best way to fetch, however this worked for me and performance wise also its not bad.
To do this we would need to create a new helper javascript file apart from the JET component ( .html and .js )
A. Lets say we want to populate the Colours LOV. Create a new .js viewModel as below :
Write the code to fetch from Colours REST url. The main method is the fetch() method highlighted in yellow :
define(['ojs/ojcore', 'knockout', 'ojs/ojmodel', 'ojs/ojtable','ojs/ojcollectiontabledatasource',
'jquery', 'ojs/ojbutton', 'ojs/ojinputtext'], function (oj, ko) {
function coloursLOVHelperViewModule() {
var self = this;
self.urlcoloursLOVURL = ko.observable("YOUR URL ") ;
self.coloursArray = ko.observableArray([]);
self.ColoursLOVCol = ko.observable();
self.ColoursLOVDataSource = ko.observable();
self.fetch = function(successCallBack) {
// populate the collection by calling fetch()
self.ColoursLOVCol().fetch({
success: successCallBack,
error: function(jqXHR, textStatus, errorThrown){
console.log('WorkRequestIDHelper : Error in fetch: ' + textStatus);
}
});
};
// Colours LOV
parseColour = function (response) {
if (response['items']) {
var innerResponse = response['items'][0];
return {ColourId: innerResponse['ColourId'],
ColourName: innerResponse['ColourName']
};
}
return {
ColourId: response['ColourId'],
ColourName: response['ColourName']
};
};
var ColourLOVModel = oj.Model.extend({
urlRoot: self.urlColoursLOVURL() , // urlWorkRequests,
parse: parseColour,
idAttribute: "ColourId"
});
var myColourLOVModel = new ColourLOVModel();
var collectionColoursLov = oj.Collection.extend({
url: self.urlColoursLOVURL(),
//fetchSize: -1,
model: myColourLOVModel
});
self.ColoursLOVCol(new collectionColoursLov());
self.ColoursLOVDataSource(new oj.CollectionTableDataSource(self.ColoursLOVCol()));
}
return new coloursLOVHelperViewModule();
});
B. Import the above .js in our main viewModel .js file :
define(['ojs/ojcore', 'knockout', 'viewModels/common/coloursLOVHelper',...)
], function (oj, ko, colourLOV )...........
C. Call the fetch method as below :
self.colorsArray= ko.observableArray([]);
colourLOV.fetch(
function(collection, response, options)
{
if(self.colorsArray.length == 0)
{
for (var i = 0; i < collection.size(); i++)
{
var coloursModel = collection.at(i);
self.colorsArray.push({value: coloursModel.attributes.colorId, label: coloursModel.attributes.colourName});
}
}
}
)
D. Now in the main html page use the above populated array variable :
<oj-combobox-one id="coloursCombobox" options="[[colorsArray]]" value="{{colorsSelectedValue}}"
Hope this helps.
Srikanth
