OJET: Adding a JET Component programmatically

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','DesktopLaptopTablet' )
        ko.cleanNode(fakeDiv);
        ko.applyBindings(this,fakeDiv);
      };

As you can see in the code, we are cleaning the DIV context and applying the bindings again, this is to avoid the Knockout Exception about applying bindings more than once and also to allow the new components to re-bind.

Comments

Post a Comment

Popular posts from this blog

OJET: Build and Deploy in an Application Server

Image
There are some other sources where an Oracle JET Application is packaged and deployed as a WAR in Oracle WebLogic Application Server (Arda Eralp) https://blogs.oracle.com/ardaeralp/deploy-oracle-jet-application-to-weblogic-server (Andrejus Baranovski's) http://andrejusb.blogspot.com/2016/07/serving-oracle-jet-application-from.html They may look bit old or maybe because they call directly grunt tasks by using the grunt-cli . In this post I will update a bit these posts in Oracle JET 6.1.0 and the usage of ojet build (instead of calling the grunt tasks) for also building the corresponding WAR file. The example can be found in my GIT repository: https://github.com/DanielMerchan/ojet-examples Let's start... Install grunt-war module in your Oracle JET Application. npm install grunt-war --save-dev Create a war.js (or call it whatever you want) in /scripts/grunt/config folder under your souce files. This is a sample code inside of it, check https://www.npmjs.com/packag...
Read more

OJET: Select All options using only Checkboxset

Image
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')...
Read more

WebCenter Content: Check-in sin Primary File

Image
En esta entrada se explican dos ascpectos relacionados con los Primary File: Primary File fields Permitir que un Check-in no obligue a subir un fichero asociado para todos los contenidos. Cómo permitir Check-in para un perfil específico y ocultar los campos de Primary File de un formulario de Check-in . Permitir Check-in sin Primary File Para permitir los Check-in sin Primary asociado para todos los contenidos de WebCenter Content solo hay que añadir la siguiente variable a la configuración: AllowPrimaryMetaFile=true Configuración de Oracle WebCenter Content Permitir Check-in y ocultar los campos para un Profile específico En caso de requerir realizar la acción para ciertos perfiles de WebCenter Content. Seguir los siguientes pasos: Crear una nueva regla que se activará con las condiciones de Check-in Regla que se activa con Check-in En la pestaña de Side Effects añadir el siguiente IdocScript que permitirá la creación de contenido sin Primary File y ade...
Read more