Business Challenge
Update (Aug 2026): where the Redwood page actually exposes the record context, you can now do this config-only — no advanced mode — with a Guided Journey. See Fusion Redwood: Add context-aware links to any page by using Guided Journeys . Use the DOM approach below when the context isn’t exposed (e.g. Inventory Transactions).
Oracle SCM has introduced new Redwood UI for Order management. It brings additional functionality and is aligned with Oracle roadmap of moving all UI screens to Redwood. In the classic mode there was an option to create context specific links by using Page Composer, for example open a BIP report or external application and pass to it current order header id by using #{binding} syntax. New Redwood Ui screens are being customized by Visual Builder Studio and additional links can be added by Guided Journey setup, however there is no documented syntax yet to pass current order id as a parameter to external URL or a BIP report (see the Aug 2026 update above for the Guided Journey method that resolves this).
Current customer’s request is to enable seamless navigation option from new Redwood screen to Classic screen.
Current post explains how this requirement can be achieved.
Our Solution
To address this challenge, we utilize Visual Builder Studio (VBS) in advanced mode to dynamically add a link to the Redwood Order screen that navigates to the Classic screen with the current order context. This involves creating an event listener to detect navigation to the order page and then manipulating the DOM to insert a new link with the extracted order header ID.
High Level Implementation Details
- Use VBS in an advanced mode
- Create a flow level event listener and action chain to catch vbAfterNavigate event
- Check that the current page is order
- Implement a javascript DOM analysis to find existing link “Additional order details”
- Add dynamically new link after found link
Detailed Implementation Details
The solution is implemented through a custom action chain in VBS that listens for the vbAfterNavigate event. Below is the step-by-step code and explanation.
Step 1: Set Up the Event Listener
Create a flow-level event listener for the vbAfterNavigate event and associate it with the action chain.
Step 2: Implement the Action Chain
The action chain checks if the current page is the ‘order’ page, polls for the “Additional order details” link in the DOM, extracts the headerId from the URL query parameters, constructs the Classic URL, and inserts a new link.
Full action chain code can be copied from the below sniplet:
define([
'vb/action/actionChain',
'vb/action/actions',
'vb/action/actionUtils',
], (
ActionChain,
Actions,
ActionUtils
) => {
'use strict';
class vbAfterNavigateListener extends ActionChain {
/**
* @param {Object} context
* @param {Object} params
* @param {{previousPage:string,previousPageParams:any,currentPage:string,currentPageParams:any}} params.event
*/
async run(context, { event }) {
const { $flow, $application, $base, $extension, $constants, $variables } = context;
if ($application.currentPage.id === 'order') {
// Poll for the target link to appear in the DOM, up to 20 seconds
let attempts = 0;
const maxAttempts = 200; // 20 seconds with 100ms intervals
let targetLink = null;
await new Promise((resolve, reject) => {
const checkLink = () => {
const links = document.querySelectorAll('a');
for (let link of links) {
if (link.innerText.trim() === 'Additional order details') {
targetLink = link;
resolve();
return;
}
}
attempts++;
if (attempts >= maxAttempts) {
console.error('Timeout waiting for "Additional order details" link to appear');
reject(new Error('Timeout waiting for link'));
} else {
setTimeout(checkLink, 100);
}
};
checkLink();
});
if (!targetLink) {
return; // Exit if link not found after timeout
}
// Step 1: Extract headerId from the query string
const urlParams = new URLSearchParams(window.location.search);
const headerId = urlParams.get('headerId'); // Replace 'headerId' if the query param name differs
if (!headerId) {
console.error('headerId not found in query string');
return;
}
// Step 2: Construct the URL
const url = `/fscmUI/faces/deeplink?objType=SALES_ORDER&action=VIEW&objKey=HeaderId=${headerId};DraftOrderFlag=true&returnApp=/fscmUI`;
// Step 4: Create the new link
const newLink = document.createElement('a');
newLink.innerText = 'View in Classic'; // Customize the link text as needed
newLink.href = url;
newLink.target = '_blank'; // Open in a new tab
newLink.style.marginLeft = '10px'; // Optional: Add some spacing; adjust styling to match UI
// Step 5: Insert the new link after the target link
targetLink.parentNode.insertBefore(newLink, targetLink.nextSibling);
}
}
}
return vbAfterNavigateListener;
});Note: Ensure that the query parameter name (‘headerId’) matches your environment. The polling mechanism waits up to 20 seconds for the DOM to load the target link, which can be adjusted as needed.
Advantages of This Pattern
- Seamless Integration: Allows users to navigate between Redwood and Classic UIs without manual input of order IDs.
- Dynamic Context Passing: Extracts and passes the current order header ID automatically.
- No Documented Syntax Required: Bypasses the lack of official syntax for parameter passing in Redwood by using DOM manipulation.
- Flexible Customization: Can be extended to add more links or integrate with other external applications.
Outcome
This approach provides a practical workaround for adding context-specific dynamic links in Oracle SCM’s Redwood UI, enhancing user experience and maintaining compatibility with Classic screens. If you need assistance implementing similar customizations in your Oracle Fusion environment, contact CID Software Solutions LTD.
