Dynamic Inline Help

Inline help is an effective way to provide users with additional guidance directly beneath the field it pertains to. In this blog, I will explain how to dynamically update inline help text based on user input. This approach helps reassure and guide users, ensuring they feel confident that they are on the right track.

The following technologies has been used to achieve the same.

Enhanced User Guidance: Dynamically changing inline help ensures users receive relevant instructions or feedback tailored to their input, reducing confusion.

Improved User Confidence: Providing real-time reassurance helps users feel confident that they are completing fields correctly, enhancing the overall experience.

Reduced Errors: Context-sensitive help minimizes mistakes by guiding users toward proper input, saving time and effort in corrections.

How do we solve: –

STEP 1: Add the necessary page items. Ensure inline help text is provided for the Bonus field.

STEP 2: Create a JavaScript file containing the setInlineHelp and clearInlineHelp
functions.Upload the file to Shared Components > Static Application Files in your Oracle APEX application.
setInlineHelp: Adds or updates the inline help text. If the inline help span doesn’t exist, it creates it with the given text; otherwise, it updates the existing text.
clearInlineHelp: Removes the inline help span.

JavaScript Code:

/***
@namespace var cnUtil = {};
**/
var cnUtil = {};

/**
* @function setInlineHelp
* @example cnUtil.setInlineHelp(‘P3_JUSTIFICATION’, ‘Hello World’);
**/
cnUtil.setInlineHelp = function (itemID, inLineHelpText) {
// Build the JQuery selector used to find the In-Line help element.
let itemInlineHelpSelector = ‘#’ + itemID + ‘_inline_help’;

// Debug Messages
apex.debug.info( “itemID: ” + itemID);
apex.debug.info( “inLineHelpText: ” + inLineHelpText);

// Check if the In-Line Help element already exists for the item.
if ($(itemInlineHelpSelector).length) {
// If In-Line help already exists, replace the Existing text.
$(itemInlineHelpSelector).text(inLineHelpText);
} else {
// If In-Line help does not exist.
// Build the JQuery selector to find the Page Item Container DIV.
let containerSelector = ‘#’ + itemID + ‘_CONTAINER .t-Form-inputContainer’;
// Build a new DIV with the necessary HTML elements and In-Line help text.
let inlineHelpDiv = ‘<div class=”t-Form-inlineHelp”><span id=”‘ + itemID +
‘_inline_help”>’ + inLineHelpText + ‘</span></div>’;
// Append the new DIV to the page item container DIV.
$(containerSelector).append(inlineHelpDiv);
}
};

/**
* @function clearInlineHelp
* @example cnUtil.clearInlineHelp(‘P3_JUSTIFICATION’);
**/
cnUtil.clearInlineHelp = function (itemID) {
let inlineHelpSelector = ‘#’ + itemID + ‘_inline_help’;
apex.debug.info( “itemID: ” + itemID);
apex.debug.info( “inlineHelpSelector: ” + inlineHelpSelector);
$(inlineHelpSelector).remove();
};

STEP 3: Add the code to a static application file named cnUtil.js and reference it on the pages where it will be used.

STEP 4: Create a Dynamic Action on P3_BONUS_AMOUNT that triggers on losing focus (tab out). Set the TRUE action for cases where the entered bonus amount exceeds the average and the FALSE action otherwise.

 

True Action Code:

// Get the value of the bonus entered by the user in the triggering element
let bonusEntered = this.triggeringElement.value;
// Format the average bonus value to a currency format (e.g., $1,000.00)
let averageBonus = apex.locale.formatNumber(1000, “fm999,990.00”);
// Create a message indicating that the entered bonus amount cannot exceed the average bonus
let itemMsg = ‘Entered bonus amount $’ + bonusEntered + ‘ cannot be greater than $’ + averageBonus;
// Set the generated message as inline help for the page item ‘P3_BONUS’
cnUtil.setInlineHelp(‘P3_BONUS’, itemMsg);
// Change the color of the inline help text to red for better visibility
document.getElementById(“P3_BONUS_inline_help”).style.color = “red”;

False Action Code:

// Get the default in-line help message.
let itemMsg = ” “;
// Call function to add/replace the InLine help text.
cnUtil.setInlineHelp (‘P3_NEW_BONUS’, itemMsg);

Conclusion: –

In conclusion, dynamically updating inline help text based on user input enhances the user experience by providing real-time guidance and feedback. This approach not only simplifies complex interactions but also boosts user confidence in navigating and completing tasks. Leveraging Oracle APEX and JavaScript, this solution seamlessly integrates dynamic behavior into applications, ensuring a more intuitive and user-friendly interface.

Output: –

In this scenario, if the bonus amount entered is greater than 1000, the inline help text will change dynamically.