15.1.7.7.1.1 Using JavaScript Namespace Template

Use an app.js file to define a single global namespace for reusable JavaScript helper functions.

Use the following app.js code as a template for a JavaScript helper function library. This one includes two "public" functions named setDialogTitle() and areDifferent(). This block of JavaScript code defines a reusable helper function "namespace" called app. You can think of it like a PL/SQL package:

• It has public functions (returned in the return {…} block).
• It may also have private helper functions defined inside the block but not returned.
• Only the returned functions are visible from outside.

This approach creates a single global symbol app instead of adding many separate function names into the global JavaScript scope. That keeps things clean and avoids naming conflicts.

// Export single global symbol "app" to keep code clean
const app = (function($) {
 
    // --- Private Functions ---
 
    // function myPrivateFunction(itemName) {
    //   ⋮
    // }

    // --- Public Functions (returned below!) ---
 
    //----------------------------------------------------
    // Set the title of the current dialog window 
    //----------------------------------------------------
    function setDialogTitle(title) {
        apex.util.getTopApex()
                 .jQuery(".ui-dialog-content")
                 .dialog("option", "title", title);
    }

    //----------------------------------------------------
    // Return true if x and y are different, treating null
    // and empty string as equivalent in the comparison 
    //----------------------------------------------------
    function areDifferent(x, y) {
        return (x || '') !== (y || '');        
    }

    // Only these functions are exposed to JavaScript code
    // in APEX pages; everything else stays private.
    return {
        setDialogTitle,
        areDifferent
    };
    // Ensure $ in app namespace resolves to correct jQuery
})(apex.jQuery);