Oracle JET : How to populate a Combobox from a REST service

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

Oracle JET : How to control the number of records shown in Oj-Table, apart from pagination.

This post is to share a trivial issue I faced with OjTable and how I resolved the same.

This might be a simple and common issue, but might help those who have not figured out the root cause.

Here ADFBC REST service was returning expected data and the JET table was also set with correct pagination setup.

<oj-paging-control id="paging" data='[[localPagingDatasource]]' page-size='5' layout="auto" maxPageLinks="10" slot='bottom'>

</oj-paging-control>

Here I expected the table to show 5 rows per page. However the data exceeded this and showed all the data at once.

To resolve this , I have used fetchSize:5  in the oj collection as below : 

This will make sure only 5 rows are shown per page.

Thanks for reading,

Srikanth