Using Visual Builder advanced mode to Add dynamic URL with order context to Redwood Order screen

Business Challenge

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.

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;
});

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.