Thursday, December 17, 2015

Improved JET Rendering in ADF

This post is supposed to provide improved solution for the approach described previously - ADF and Oracle JET - Integration Pattern with ADF Regions. Many thanks to John Brock, Product Manager for Oracle JET, for his proactive comments and suggestions.

I have changed it to JET rendering in ADF, instead of integration. Perhaps word 'integration' is too strong in this context. You should not mix two frameworks together, like trying to render data from ADF bindings in JET components. Oracle doesn't encourage mixing ADF and JET, there is no support for this.

But still there are valid business requirements to create JET islands inside ADF. For example, fast data entry or displaying data from WebSocket. We could use JET table on top of REST within ADF page and allow users to type and save data really fast. There will be no integration between ADF and JET features, simply JET UI rendering inside ADF page. Similar as ADF DVT components currently work, they are based on JET libs (at least I heard such talks on OOW).

Here you can download improved sample application (you must download JET separately and copy into public_html folder) - Improvements:

1. No need to use ADF region, it works to isolate JET code into JSF fragment

2. We can use simple JSF include to include fragment with JET into ADF page

3.CSS stylesheet is loaded once in the main page. Using af:resource, instead of script:

4. This is how it looks, chart is rendered by JET component. Obviously we could render same chart with ADF DVT, but here is only simple example. In the future I will post more advanced use cases. ADF UI built with Masonry layout, including JET island tile:


Subhash Chandra said...

Hi Andrejus

My use case involves showing the JET UI inside a 2nd level popup(which is a jsff based BTF). I was able to render the UI using the approach you specified in the sample application. Though the functionality looks to be ok, I have an issue with respect to CSS. I'm trying to render the JET charts inside the popup and it is rendered without any proper css styles. It works fine when I try to do the same thing in a sample application where a popup is opened from a jspx page. I suspect that the JET specific css initialization is not done properly in my case.

This is the flow.

Application home page -> 1st level popup(jsff based BTF containing only ADF content) -> 2nd level popup(jsff based BTF containing ADF+ JET charts UI)

I put the below code in the 1st level popup BTF jsff.

baseUrl: "js"

require( ["main"]);

Do you see any issue with this approach. Can you please provide any pointers to fix this issue. Thank you in advance for your help.

Andrejus Baranovskis said...


I would need to take a look into app, hard to guess.