ADF application with UI Shell and ADF Task Flows rendered in dynamic tabs would not offer instant switch from one tab to another experience. Thats because tab switch request goes to the server and only when browser gets response - tab switch happens. There is more to this - even if tab in ADF is not currently active (tab is disclosed), tab content (e.g. region rendered from ADF Task Flow) still may participate in the request processing. If user opens many tabs, this could result in slightly slower request processing time overall.
ADF allows to render ADF Task Flows directly by accessing them through URL, if it is configured with page support on the root level. ADF Task Flow can be accessed by URL, this means we can include it into iframe. Imagine using iframe for each tab and rendering ADF Task Flows inside. This will enable ADF Task Flow independent processing in each tab, similar to opening them in separate browser tab.
Iframe can be managed in Oracle JET, using plain JavaScript and HTML code. My sample implements dynamic JET tabs with iframe support. Iframe renders ADF Task Flow. While navigating between tabs, I simply hide/show iframes, this allows to keep the state of ADF Task Flow and return to the same state, when opening back the tab. Huge advantage in this case - tab navigation and switching between tabs with ADF Task Flows works very fast - it takes only client time processing. Look at this recorded gif, where I navigate between tabs with ADF content:
![]()
Main functions are listed below.
1. Add dynamic iframe. Here we check if frame for given ADF Task Flow is already created, if no we create it and append to HTML element
![]()
2. Select iframe, when switching tabs. Hide all frames first, select frame which belongs to the selected tab
![]()
3. Remove iframe. Remove frame, when tab is closed
![]()
4. Select frame after remove. This method helps to set focus to the next frame, after current tab was removed
![]()
We can control when iframe or regular JET module is rendered, by using flag computed function assigned to main div:
![]()
In this app I have defined static URL's for displayed ADF Task Flows. Same can be loaded by fetching menu, etc.:
![]()
To be able to load ADF Task Flow by URL, make sure to use ADF Task Flow with page (you can include ADF region with fragments into that page). Set url-invoke-allowed property:
![]()
This is how it looks like. By default, JET dashboard module is displayed, select item from the menu list to load tab with ADF Task Flow:
![]()
JET tab rendering iframe with ADF table:
![]()
You can monitor ADF content loading in iframe within JET application:
![]()
JET tab rendering iframe with ADF form:
![]()
Download sample app from GitHub repository.
ADF allows to render ADF Task Flows directly by accessing them through URL, if it is configured with page support on the root level. ADF Task Flow can be accessed by URL, this means we can include it into iframe. Imagine using iframe for each tab and rendering ADF Task Flows inside. This will enable ADF Task Flow independent processing in each tab, similar to opening them in separate browser tab.
Iframe can be managed in Oracle JET, using plain JavaScript and HTML code. My sample implements dynamic JET tabs with iframe support. Iframe renders ADF Task Flow. While navigating between tabs, I simply hide/show iframes, this allows to keep the state of ADF Task Flow and return to the same state, when opening back the tab. Huge advantage in this case - tab navigation and switching between tabs with ADF Task Flows works very fast - it takes only client time processing. Look at this recorded gif, where I navigate between tabs with ADF content:
Main functions are listed below.
1. Add dynamic iframe. Here we check if frame for given ADF Task Flow is already created, if no we create it and append to HTML element
2. Select iframe, when switching tabs. Hide all frames first, select frame which belongs to the selected tab
3. Remove iframe. Remove frame, when tab is closed
4. Select frame after remove. This method helps to set focus to the next frame, after current tab was removed
We can control when iframe or regular JET module is rendered, by using flag computed function assigned to main div:
In this app I have defined static URL's for displayed ADF Task Flows. Same can be loaded by fetching menu, etc.:
To be able to load ADF Task Flow by URL, make sure to use ADF Task Flow with page (you can include ADF region with fragments into that page). Set url-invoke-allowed property:
This is how it looks like. By default, JET dashboard module is displayed, select item from the menu list to load tab with ADF Task Flow:
JET tab rendering iframe with ADF table:
You can monitor ADF content loading in iframe within JET application:
JET tab rendering iframe with ADF form:
Download sample app from GitHub repository.