WCP/ADF to OJET: ADF Controller Task Flows / Portlets to Oracle JET Modules

This is the second post of the series Oracle WebCenter Portal to Oracle JET. In this case I will talk about how to move ADF Task Flows or Portlets in Oracle WebCenter Portal to Oracle JET.



WCP to JET

ADF Bounded Task Flows and Portlets in Oracle WebCenter Portal

The most common way of promoting re-usability in WebCenter Portal Pages is by embedding "widgets" built by using:
  • Oracle ADF Bounded Task Flows based in Page Fragments which can be embedded in a Portal Page as an ADF Region (<af:region>)
  • Portlets 2.0 (based on JSR 286) which are consumed remotely by using WSRP 2.0 (Web Service Remote Portlet) specification. Portlets can be based on ADF by using the ADF Portlet Bridge or based on any other Portlet technology.


In the above image, you can see there is:
  • A Portal Called Test.
  • Currently in the Page called Home of the Portal Test.
  • The Page has been configured with two components:
    • The Activity Stream Task Flow
    • The Page Traffic Analytics Portlet.
  • Both components are configured in the Page which is based in a 1 Column Layout.

How to achieve the same re-usability in Oracle JET?

Oracle JET uses the concept of modularity. Every re-usable fragment or functionality can be encapsulated in a OJ-Module (https://docs.oracle.com/en/middleware/jet/6.1/develop/use-ojmodule-binding.html#GUID-858030A0-D7B3-49B0-B2C6-BC1294E5991A) which consists in:
  • Input Parameter Configuration.
  • Its own View (HTML) and its own ViewModel (JavaScript) files which uses AMD and to load the necessary JavaScript modules




In the above iumage, you can see how is achieved in Oracle JET:
  • Oracle JET is a SPA Application with only one page, index.html in this case.
  • index.html makes use of the ViewModels main.js which makes use of the appController.js
  • appController.js setup a hierarchical router (as explained in the previous blog post).
  • So index.html has the oj-module for loading the Main Pages. In this case it loads the Home module.
    • View: /js/views/home.html
    • ViewModel: /js/viewModels/home.js
  • In the Home module I added two re-usable oj-module to simulate two ADF Region / Portlets:
    • Activity Stream:
      • View: /js/views/modules/activities/activity-stream.html
      • ViewModel: /js/viewModels/modules/activities/activity-stream.js
    • Page Traffic:
      • View: /js/views/modules/analytics/page-traffic.html
      • ViewModel: /js/viewModels/modules/analytics/page-traffic.js
This is the way to share same functionalities between different Modules in Oracle JET. (A module can be composed of multiple modules and so on).

In addition, Modules accepts input parameters, communication between them and lot of more complex functionalities like in ADF Regions or Portlets.

The example can be found in my GitHub (ojet-adf-region-to-ojmodule): https://github.com/DanielMerchan/ojet-examples

In the example you can find the same code as ojet-wcp-router but added two new Modules to the Home Module which are:
  • page-traffic (acts as a Page Traffic Task Flow, ADF Region)
  • activity-stream (acts as a Page Traffic Task Flow, ADF Region)

Comments

Post a Comment

Popular posts from this blog

OJET: Inter-Module communication in TypeScript Template

Image
In this post I bring another example on how to Communicate Modules using the Oracle JET - TypeScript Template based on the Oracle JET Cookbook: InterModule Communication From now and so on will create multiple examples using TypeScript for those who are not familiar with it and wants to turn the Cookbook examples into TypeScript :). The example ( ojet-typescript-list-detail ) can be found as usual in my GitHub repository: https://github.com/DanielMerchan/ojet-examples This example is a bit different compared to the Cookbook example where the modules are not running at the same time within a Module. This example is built as described in the following images: Customers module acts as the Wrapper Module. It coordinates when to load the list and detail modules. Customers module makes use also of signals npm module for communication between Customers-List, Customers-Detail. Explanation of the Example customers.js is the coordinator responsible module for: initiali
Read more

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