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

Deploying Oracle JET application ( .war file ) to Weblogic/ JCS

These steps are tested for Oracle JET 4.X release as well.

I was searching for the details on how to generate WAR file out of JET application and then deploy it to JCS / Weblogic.

I have found some really nice articles, however i would like to present the same in the way I understood them.

Not demeaning the content from those posts, I would like to condense the steps a little bit, so that it would be a reference to me as well. So here we go : 

a. Install the grunt-war using below command : 

         npm install grunt-war --save-dev

b. Verify if the directory "/grunt-war" is generated in the node_modules directory.

c. Create a javascript file as below in scripts folder : 

The file content is as below :

/*******************************************************************************/

module.exports =  {

  /*
   * Build a WAR (web archive) without Maven or the JVM installed.
   *
   * Template strings in the <%= %> tags are set in the data section of Gruntfile.js,
   *  or you can hardcode the strings here instead
   */
      
        target: {
          options: {
            war_dist_folder: '<%= distdir %>',      /* Folder to generate the WAR into, set in data section of Gruntfile.js */
            war_name: '<%= appname %>',            /* The name for the WAR file (.war will be the extension) */
            webxml_webapp_version: '2.5', /* I needed this older version for JCS-SX */  
            war_extras: [ {filename: 'grunt-war-credits.txt', data: 'This line will appear in the file!\n see http://likeahouseafire.com/2017/08/09/updated-using-grunt-to-create-war-jet3x/ '}, 
                          {filename: 'WEB-INF/weblogic.xml', data: '<?xml version="1.0" encoding="UTF-8"?>\n<weblogic-web-app xmlns="http://www.bea.com/ns/weblogic/90" xmlns:j2ee="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.bea.com/ns/weblogic/90 http://www.bea.com/ns/weblogic/90/weblogic-web-app.xsd">\n  <jsp-descriptor>\n    <keepgenerated>true</keepgenerated>\n    <debug>true</debug>\n  </jsp-descriptor>\n  <context-root>/<%= appname %></context-root>\n</weblogic-web-app>'}],
                                          /* the war_extras are extra files to be generated, needed since grunt-war doesn't create a weblogic.xml */                                          /* also notice that we're using the <%= appname %> variable in there */  
            webxml_welcome: 'index.html', /* to point web.xml to the default page */
            webxml_webapp_extras: [ '<login-config />\n', '<session-config>\n    <session-timeout>\n    30\n    </session-timeout>\n</session-config>\n' ]  
                                          /* some extra settings for web.xml to work with JCS-SX */

          },
          files: [
            {
              expand: true,
              cwd: '<%= appdir %>',             /* find the source files for the WAR in the /web folder, set in Gruntfile.js */
              src: ['**'],
              dest: ''
            }
          ]
        }
};

/*******************************************************************************/