Having worked on
some react stuff, I was wondering, if there was a way for us to integrate
something like Axios or any other custom npm modules within Oracle JET. We have
recently started getting into Oracle JET and trying to understand how it works.
We were able to
achieve this by broadly following three steps:
- Install Axios and integrating it with Oracle JET, so that Require JS (the module loader that Oracle uses)loads Axios as other default modules that it loads.
A)
installing Axios is straight forward npm -install axios --save
B)
update the oraclejet-build.js file and include the copyCustomLibsToStaging like the
below. I did this inside the web section of the file.
copyCustomLibsToStaging: {
fileList: [
{
cwd:'node_modules/axios/dist',
src: ['*'],
dest: 'web/js/libs/axios'
}
]
}
When
we do the above and run build i.e ojet build, it would pick up axios module
content with other default module content and copies it inside web/js/lib
folders
C)
Open the main.js and update the path section include the axios reference
paths:
//injector:mainReleasePaths
{
'knockout': 'libs/knockout/knockout-3.4.0.debug',
'jquery': 'libs/jquery/jquery-3.1.1',
'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.12.0',
'promise': 'libs/es6-promise/es6-promise',
'hammerjs': 'libs/hammer/hammer-2.0.8',
'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0',
'ojs': 'libs/oj/v3.2.0/debug',
'ojL10n': 'libs/oj/v3.2.0/ojL10n',
'ojtranslations': 'libs/oj/v3.2.0/resources',
'text': 'libs/require/text',
'signals': 'libs/js-signals/signals',
'customElements': 'libs/webcomponents/CustomElements',
'proj4': 'libs/proj4js/dist/proj4-src',
'css': 'libs/require-css/css',
'axios': 'libs/axios/axios'
}
With the above two steps, we
have axios inside the Oracle JET.
- Attaching the axios with viewmodel. Require.js uses 'define' function for loading data
define(
[array], object );
[Array]
is a list of modules that this module depends on.
We
will have to add axios as well to list of default viewmodel
dependencies
Like
below
define(['ojs/ojcore',
'knockout','jquery','axios', 'promise', 'ojs/ojknockout', 'ojs/ojmodel',
'ojs/ojtable', 'ojs/ojcheckboxset',
'ojs/ojcollectiontabledatasource',
'ojs/ojinputnumber',
'ojs/ojinputtext',
'ojs/ojdialog', 'ojs/ojbutton','ojs/ojarraytabledatasource']
Oracle
JET has lot of function hooks that run
at various points while a module is being brought in or dismissed.
handleActivated is one such hook that can be used to load data from an external
source and have the module wait to build its view until the data has arrived.
The basic criteria is that the method should return a promise. This where we
will make the call using axios and then attach result to the
knockout components as shown below. This works well and data gets loaded.
function
DashboardViewModel() {
// console.log("results"+ result.data);
var self = this;
self.users = ko.observableArray();
this.dataprovider =new oj.ArrayTableDataSource(self.users,
{idAttribute: 'id'});
/**
* Optional ViewModel method invoked when this ViewModel is about to be
* used for the View transition. The application can put data fetch
logic
* here that can return a Promise which will delay the handleAttached
function
* call below until the Promise is resolved.
* @param {Object} info - An object with the following key-value pairs:
* @param {Node} info.element - DOM element or where the binding is
attached. This may be a 'virtual' element (comment node).
* @param {Function} info.valueAccessor - The binding's value accessor.
* @return {Promise|undefined} - If the callback returns a Promise, the
next phase (attaching DOM) will be delayed until
* the promise is resolved
*/
self.handleActivated = function(info) {
// Implement if needed
return
axios.get('https://jsonplaceholder.typicode.com/posts/').then(function(result){
result.data.forEach(function(user){
self.users.push(user);
});
})
};
Great we have axios
that can we used now inside oracle JET . Feel much more confident.
Time to move to oracle JET common model
