Oracle Cloud and Fusion Middleware, Oracle JET, Jakarta EE and all other Open Source Blog!

Hello Oracle JET lovers, In this post I will bring a small example on how to handle two common errors when Routing in Oracle JET. Routing to a State Id which has not been registered as part of the Router configuration Routing to an existing State Id, however when calculating the corresponding View and View Model they are missplaced, no-exist or whatever cause it makes the module to do not load properly The example is based on the scaffold Oracle JET Application navdrawer (without TypeScript). GitHub: ojet-page-not-found-handling Taking a look into the code provided by navdrawer , navigation is implemented as following: The index.html uses oj-navigation-list where selection is bind to router.stateId which will immediately trigger the Router to route to the new stateId The appController.js (View Model for the index.html) configure the possible Router States // Router setup self.router = oj.Router.rootInstance; self.router.configure({ 'dashboar

This is an example on how to select all other options by using another oj-checkboxset. GitHub: ojet-checkbockset-select-all The idea is to keep track of the selection and make use of the on-value-changed as described in the following code. self.colorOptions = ko.observableArray([ { id: "blueopt", value: "blue", color: "Blue" }, { id: "greenopt", value: "green", color: "Green" }, { id: "redopt", value: "red", color: "Red" }, { id: "limeopt", value: "lime", color: "Lime" }, { id: "aquaopt", value: "aqua", color: "Aqua" }, ]); self.selectAll = ko.observableArray([]); self.currentColor = ko.observableArray(["red"]); self.selectAllOptionChanged = (event) => { const newSelection = event.detail.value; if (newSelection.indexOf('all')

Recently I have been asked of one of my team colleagues about how we can generate some Oracle JET components once the View Model has been loaded. GitHub: ojet-add-jet-comp-programmatically Researching a bit in Knockout / JET and how the Binding Context works I found the following approach. In the transitionCompleted lifecycle method, the DOM has already been generated, so we can use JavaScript API to get the DOM component what will we use to add Oracle JET Components. By using insertAdjacentHTML method, we will add our Oracle JET Components. In addition, you can already bind the methods / attributes to Knockout Obvervables if required. self.transitionCompleted = function () { // Implement if needed const fakeDiv = document.getElementById('fake'); fakeDiv.insertAdjacentHTML('beforeend',' '); fakeDiv.insertAdjacentHTML('beforeend',' Desktop Laptop Tablet ' ) ko.cleanNode(fakeDiv); ko.ap