How to Get and Set Item Values with $v, $s, and Other APEX Global Functions

Long before Oracle APEX organized its JavaScript into namespaces such as apex.item and apex.region, it shipped a set of global functions with short, cryptic names. $v reads a value, $s sets one, $x finds an element, and a few dozen more handle showing, hiding, checking, and building elements.

They are still in APEX 26.1, documented as the Non-namespace APIs, so code written years ago keeps running. You will meet them in older applications, in forum answers, and in the snippets of colleagues who learned APEX a long time ago. This guide covers every one of them with a tested example, points out which ones quietly do nothing in Universal Theme, flags two that do not behave as documented, and names the modern API to use instead.

Quick Reference

Should You Still Use the Global Functions?

For new code, no. The namespaced APIs know about every item type, fire the right change events, work with any page layout, and are where Oracle keeps adding features. apex.item("P1_NAME").getValue() says what it does; $v("P1_NAME") needs a comment.

The global functions still matter for three reasons. Existing applications are full of them, and you need to know what they do before you replace them. A handful, $v and $s above all, remain a convenient shorthand for quick console checks. And several have behaviors that surprise people, so knowing them helps you debug old code.

Watch for three traps covered below. The table-row functions look for a surrounding tr element that only old themes had, so in Universal Theme they do nothing. $f_Swap does not actually swap. And $nvl does not treat an empty string as empty.

How to Run These Examples

The examples ran in Oracle APEX 26.1 on a test page that holds one item of every type, grouped into regions with the static IDs text_items and choice_items. The output under each one is exactly what the browser console printed.

To try one, open a page of your own, press F12, paste the code into the Console tab, and swap in your own item names and region IDs. Wherever a function takes an element, written pNd in the syntax lines, you can pass either the element itself or its ID.

Reading and Setting Values

$v

Returns the value of an item as a string. For an item that holds several values, such as a checkbox group, the values come back joined with colons.

$v(pNd) → string

console.log($v("P20_TEXT"));
apex.item("P20_CHECKBOX_GROUP").setValue(["ONLINE", "PHONE"]);
console.log($v("P20_CHECKBOX_GROUP"));

Output:

Trailblazer 2-Person Tent
ONLINE:PHONE

$v2

Works like $v, but returns an array for items that can hold several values. It is the same as apex.item(pNd).getValue().

$v2(pNd) → string | string[]

console.log($v2("P20_TEXT"));
apex.item("P20_CHECKBOX_GROUP").setValue(["ONLINE", "PHONE"]);
console.log($v2("P20_CHECKBOX_GROUP"));

Output:

Trailblazer 2-Person Tent
["ONLINE", "PHONE"]

$v_Array

Always returns an array, wrapping a single value in an array of one. Handy when the rest of your code wants to loop over values whatever the item type.

$v_Array(pNd) → string[]

apex.item("P20_CHECKBOX_GROUP").setValue(["ONLINE", "PHONE"]);
console.log($v_Array("P20_CHECKBOX_GROUP"));
console.log($v_Array("P20_TEXT"));

Output:

["ONLINE", "PHONE"]
["Trailblazer 2-Person Tent"]

$v_CheckValueAgainst

Returns true when an item's value matches one of the values you pass, either a single value or an array.

$v_CheckValueAgainst(pThis, pValue) → boolean

console.log($v_CheckValueAgainst("P20_RADIO", ["ONLINE", "PHONE"]));
console.log($v_CheckValueAgainst("P20_RADIO", "STORE"));

Output:

true
false

$v_Upper

Converts the value of a text element to upper case. It writes to the element directly rather than going through setValue, so no change event fires and it does not suit every item type.

$v_Upper(pNd)

$v_Upper("P20_TEXT");
console.log($v("P20_TEXT"));

Output:

TRAILBLAZER 2-PERSON TENT

For a version that fires events and works as the user types, see how to set an item value to upper case in Oracle APEX.

$s

Sets an item's value with its type taken into account, which makes it the shorthand for apex.item(pNd).setValue(). For items whose displayed text differs from the stored value, such as a popup LOV, pass the display value as well. Pass true as the fourth argument to set the value without firing a change event.

$s(pNd, pValue, [pDisplayValue], [pSuppressChangeEvent])

$s("P20_TEXT", "Summit Down Sleeping Bag");
console.log($v("P20_TEXT"));

// a popup LOV with a display value, without triggering a change event
$s("P20_POPUP_LOV", "7", "Rocky Mountain Outfitters", true);
console.log($v("P20_POPUP_LOV"), "-", apex.jQuery("#P20_POPUP_LOV").val());

Output:

Summit Down Sleeping Bag
7 - Rocky Mountain Outfitters

The second line shows both halves of a popup LOV: $v returns the stored value 7, while the visible input shows the company name. The same distinction is covered in getValue and setValue in Oracle APEX.

$nvl

Returns the first argument, or the default when the first argument is null or undefined.

$nvl(pTest, pDefault) → *

console.log($nvl(null, "(none)"));
console.log(JSON.stringify($nvl("", "(none)")));   // an empty string is kept
console.log($nvl($v("P20_TEXT"), "(none)"));

Output:

(none)
""
Trailblazer 2-Person Tent

Oracle's documentation says an empty value also returns the default, but the 26.1 code checks only null and undefined. The second line proves it: the empty string comes back untouched. Since an empty item's value is an empty string, $nvl($v("P1_X"), "none") never returns "none". When you mean "empty or null", write value || defaultValue instead.

Finding Elements

$x

Returns the element with a given ID, or false when there is none. Note false, not null, which matters if you test the result with a strict comparison.

$x(pNd) → Element | false

console.log($x("P20_TEXT").tagName, $x("P20_TEXT").id);
console.log($x("P20_NO_SUCH_ITEM"));

Output:

INPUT P20_TEXT
false

$x_ByClass

Returns the elements that carry a class, optionally limited to one container and one tag name.

$x_ByClass(pClass, [pNd], [pTag]) → Element[]

const fields = $x_ByClass("text_field", "text_items", "INPUT");
console.log(fields.length, "text fields:", fields.map((f) => f.id));

Output:

1 text fields: ["P20_TEXT"]

$x_FormItems

Returns the form inputs of a given type inside a container.

$x_FormItems(pNd, pType) → Element[]

const checkboxes = $x_FormItems("choice_items", "checkbox");
console.log(checkboxes.length, "checkboxes:", checkboxes.map((c) => c.id).slice(0, 4));

Output:

5 checkboxes: [
  "P20_CHECKBOX",
  "P20_CHECKBOX_GROUP_0",
  "P20_CHECKBOX_GROUP_1",
  "P20_CHECKBOX_GROUP_2"
]

Five checkboxes from two items: a checkbox group renders one input per option, so the single checkbox plus the group's options add up to five.

$x_UpTill

Climbs from an element to its nearest ancestor with a given tag name and, optionally, a given class. The example uses it to find which region an item lives in.

$x_UpTill(pNd, pToTag, [pToClass]) → Element | false

const region = $x_UpTill("P20_TEXT", "DIV", "t-Region");
console.log(region.id);

Output:

text_items

Changing Values, Classes, and Styles

$x_Value

Sets the value property of one element or an array of elements directly, bypassing each item's setValue.

$x_Value(pNd, pValue)

$x_Value(["P20_TEXT", "P20_TEXTAREA"], "Checked by QA");
console.log($v("P20_TEXT"), "|", $v("P20_TEXTAREA"));

Output:

Checked by QA | Checked by QA

$x_Class

Replaces the whole class attribute of one or more elements. Every existing class is removed, which in Universal Theme usually breaks the element's layout, so reach for jQuery's addClass when you only want to add one.

$x_Class(pNd, pClass) → Element | Element[]

$x_Class("P20_TEXT_CONTAINER", "highlight");
console.log($x("P20_TEXT_CONTAINER").className);

Output:

highlight

$x_ClassByClass

Finds elements the way $x_ByClass does, then replaces their class attribute with a new one.

$x_ClassByClass(pNd, pClass, [pTag], [pClass2]) → Element | Element[]

const changed = $x_ClassByClass("text_items", "text_field", "INPUT", "text_field is-reviewed");
console.log(changed.length, "inputs now have:", changed[0].className);

Output:

1 inputs now have: text_field is-reviewed

$x_SetSiblingsClass

Documented to give every sibling of an element one class and, optionally, the element itself another.

$x_SetSiblingsClass(pNd, pClass, [pNdClass]) → Element[]

const column = $x("P20_TEXT_CONTAINER").parentNode;
const siblings = $x_SetSiblingsClass(column, "is-dimmed", "is-active");
console.log(siblings.length, "siblings now have:", siblings[0].className);
console.log("the column itself:", column.className);

Output:

1 siblings now have: col col-6 apex-col-auto col-start is-active
the column itself: col col-6 apex-col-auto col-start is-active

Two differences from the documentation show up in 26.1. The function adds the classes instead of replacing the existing ones, and it returns an array holding the element itself rather than its siblings. That is why both output lines describe the same grid column.

$x_Style

Sets a single CSS property, in its JavaScript camelCase name, on one or more elements.

$x_Style(pNd, pStyle, pString) → Element | Element[]

$x_Style("P20_TEXT", "backgroundColor", "#fff3cd");
console.log($x("P20_TEXT").style.backgroundColor);

Output:

rgb(255, 243, 205)

Showing and Hiding Elements

In Universal Theme every page item sits in a wrapper whose ID is the item name plus _CONTAINER. Hide the container rather than the input, or the label is left floating on its own.

$x_Hide and $x_Show

Hide or show one or more elements.

$x_Hide(pNd) → Element | Element[]
$x_Show(pNd) → Element | Element[]

$x_Hide("P20_TEXT_CONTAINER");
console.log("visible:", apex.jQuery("#P20_TEXT_CONTAINER").is(":visible"));

Output:

visible: false

apex.jQuery("#P20_TEXT_CONTAINER").hide();
$x_Show("P20_TEXT_CONTAINER");
console.log("visible:", apex.jQuery("#P20_TEXT_CONTAINER").is(":visible"));

Output:

visible: true

More ways to do this, with and without dynamic actions, are in showing and hiding DOM elements with JavaScript in Oracle APEX.

$x_Toggle

Hides whatever is visible and shows whatever is hidden.

$x_Toggle(pNd) → Element | Element[]

$x_Toggle("P20_TEXT_CONTAINER");
console.log("visible:", apex.jQuery("#P20_TEXT_CONTAINER").is(":visible"));
$x_Toggle("P20_TEXT_CONTAINER");
console.log("visible:", apex.jQuery("#P20_TEXT_CONTAINER").is(":visible"));

Output:

visible: false
visible: true

$x_HideAllExcept

Hides every element in a list, then shows the one you name. It is a quick way to switch between panels when only one should be visible at a time.

$x_HideAllExcept(pNd, pNdArray) → Element | Element[]

const all = ["P20_TEXT_CONTAINER", "P20_NUMBER_CONTAINER", "P20_DATE_CONTAINER"];
$x_HideAllExcept("P20_NUMBER_CONTAINER", all);
console.log(all.map((id) => id + ": " + apex.jQuery("#" + id).is(":visible")));

Output:

[
  "P20_TEXT_CONTAINER: false",
  "P20_NUMBER_CONTAINER: true",
  "P20_DATE_CONTAINER: false"
]

$x_HideChildren and $x_ShowChildren

Hide or show every direct child of an element. An item container has two children, the label and the field, so hiding them empties it visually while the container itself stays.

$x_HideChildren(pNd)
$x_ShowChildren(pNd)

console.log("children visible:", apex.jQuery("#P20_TEXT_CONTAINER").children(":visible").length);
$x_HideChildren("P20_TEXT_CONTAINER");
console.log("children visible:", apex.jQuery("#P20_TEXT_CONTAINER").children(":visible").length);

Output:

children visible: 2
children visible: 0

apex.jQuery("#P20_TEXT_CONTAINER").children().hide();
$x_ShowChildren("P20_TEXT_CONTAINER");
console.log("children visible:", apex.jQuery("#P20_TEXT_CONTAINER").children(":visible").length);

Output:

children visible: 2

$x_HideSiblings and $x_ShowSiblings

Hide or show every sibling of an element. In Universal Theme each item sits in its own grid column, so the sibling of an item's column is the column beside it in the same row.

$x_HideSiblings(pNd) → Element[]
$x_ShowSiblings(pNd) → Element[]

// in Universal Theme each item sits in its own grid column
const column = $x("P20_TEXT_CONTAINER").parentNode;
const hidden = $x_HideSiblings(column);
console.log(hidden.length, "sibling columns hidden:", hidden.map((col) => apex.jQuery(col).find(".apex-item-wrapper").attr("id")));
console.log("P20_TEXT visible:", apex.jQuery("#P20_TEXT").is(":visible"));

Output:

1 sibling columns hidden: ["P20_AUTOCOMPLETE_CONTAINER"]
P20_TEXT visible: true

const column = $x("P20_TEXT_CONTAINER").parentNode;
apex.jQuery(column).siblings().hide();
const shown = $x_ShowSiblings(column);
console.log(shown.length, "sibling columns shown");

Output:

1 sibling columns shown

$x_ShowAllByClass

Shows the children of an element that carry a given class and, optionally, a given tag.

$x_ShowAllByClass(pNd, pClass, [pTag])

apex.jQuery("#text_items .t-Region-body").append(
    '<div id="tips"><p class="tip">Tip 1</p><p class="tip">Tip 2</p></div>');
apex.jQuery("#tips .tip").hide();
console.log("visible tips:", apex.jQuery("#tips .tip:visible").length);
$x_ShowAllByClass("tips", "tip", "P");
console.log("visible tips:", apex.jQuery("#tips .tip:visible").length);

Output:

visible tips: 0
visible tips: 2

The example hides the tips with jQuery after adding them, instead of writing style="display:none" into the HTML. The test application has a Content Security Policy that blocks inline style attributes, which is what a secure application should do, so inline styles would simply be ignored.

$x_Remove

Removes one or more elements from the page entirely. Removing an item's container takes the input with it, and the item no longer exists on the page.

$x_Remove(pNd) → Element | Element[]

$x_Remove("P20_TEXT_CONTAINER");
console.log("still on the page:", $x("P20_TEXT") !== false);

Output:

still on the page: false

Disabling Items

$x_disableItem

Disables one or more items when the second argument is true, and enables them when it is false.

$x_disableItem(pNd, pTest)

$x_disableItem(["P20_TEXT", "P20_NUMBER"], true);
console.log(apex.item("P20_TEXT").isDisabled(), apex.item("P20_NUMBER").isDisabled());

Output:

true true

$f_DisableOnValue

Disables one or more items when another item has a given value, and enables them otherwise. It returns whether the value matched.

$f_DisableOnValue(pThis, pValue, pThat) → boolean

console.log("P20_RADIO =", $v("P20_RADIO"));
const matched = $f_DisableOnValue("P20_RADIO", "ONLINE", "P20_TEXT");
console.log("matched:", matched, "- P20_TEXT disabled:", apex.item("P20_TEXT").isDisabled());

Output:

P20_RADIO = ONLINE
matched: true - P20_TEXT disabled: true

Images and Table Rows

These functions come from the days of GIF expand and collapse icons and table-based page layouts. They still run, but most of the problems they solved are now handled by CSS classes and theme styles.

$x_CheckImageSrc

Returns true when an image's src contains a given string.

$x_CheckImageSrc(pNd, pSearch) → boolean

apex.jQuery("#text_items .t-Region-body").append('<img id="flag" src="/i/plus.gif">');
console.log($x_CheckImageSrc("flag", "plus"));
console.log($x_CheckImageSrc("flag", "minus"));

Output:

true
false

$x_SwitchImageSrc

Replaces an image's src when it contains a given string.

$x_SwitchImageSrc(pNd, pSearch, pReplace) → Element | false

apex.jQuery("#text_items .t-Region-body").append('<img id="flag" src="/i/plus.gif">');
$x_SwitchImageSrc("flag", "plus", "/i/minus.gif");
console.log($x("flag").getAttribute("src"));

Output:

/i/minus.gif

$x_ToggleWithImage

Toggles an element and flips an image's src between the words plus and minus, the expand and collapse icons of old reports.

$x_ToggleWithImage(pThis, pNd) → Element

apex.jQuery("#text_items .t-Region-body").append(
    '<img id="toggle_img" src="/i/plus.gif"><div id="details">Details</div>');
$x_ToggleWithImage("toggle_img", "details");
console.log($x("toggle_img").getAttribute("src"), "- details visible:", apex.jQuery("#details").is(":visible"));

Output:

http://localhost:8080/i/minus.gif - details visible: false

The function works with the image's full resolved URL, so the host name appears in the result even though the original src was a relative path. The details panel started visible and is now hidden.

$x_RowHighlight and $x_RowHighlightOff

Set, or clear, the background color of every cell in a table row.

$x_RowHighlight(pThis, pColor)
$x_RowHighlightOff(pThis)

apex.jQuery("#text_items .t-Region-body").append(
    '<table><tr id="row_1"><td>Tents</td><td>12</td></tr></table>');
$x_RowHighlight("row_1", "#fff3cd");
console.log(apex.jQuery("#row_1 td").map((i, td) => td.style.backgroundColor).get());

Output:

["rgb(255, 243, 205)", "rgb(255, 243, 205)"]

apex.jQuery("#text_items .t-Region-body").append(
    '<table><tr id="row_1"><td>Tents</td><td>12</td></tr></table>');
$x_RowHighlight("row_1", "#fff3cd");
$x_RowHighlightOff("row_1");
console.log(apex.jQuery("#row_1 td").map((i, td) => JSON.stringify(td.style.backgroundColor)).get());

Output:

["\"\"", "\"\""]

$x_HideItemRow, $x_ShowItemRow, $x_ToggleItemRow, and $x_ItemRow

Hide, show, or toggle the table row that holds an item and its label. $x_ItemRow does any of the three depending on whether you pass "HIDE", "SHOW", or "TOGGLE".

$x_HideItemRow(pNd)
$x_ShowItemRow(pNd)
$x_ToggleItemRow(pNd)
$x_ItemRow(pNd, pFunc)

$x_HideItemRow("P20_TEXT");
console.log("P20_TEXT visible:", apex.jQuery("#P20_TEXT").is(":visible"));

Output:

P20_TEXT visible: true

The item is still visible. These functions look for a surrounding tr element, which only existed in the table layouts of old themes. Universal Theme uses a grid of div elements, so they find nothing and quietly do nothing. Use apex.item(name).hide() instead, which hides the item and its label in any layout.

Working with Form Controls

$f_CheckAll

Checks every checkbox inside an element when the second argument is true, and unchecks them when it is false. You can also pass an array of checkboxes as the third argument.

$f_CheckAll(pThis, pCheck, [pArray])

$f_CheckAll("P20_CHECKBOX_GROUP", true);
console.log("checked:", apex.item("P20_CHECKBOX_GROUP").getValue());
$f_CheckAll("P20_CHECKBOX_GROUP", false);
console.log("after unchecking:", apex.item("P20_CHECKBOX_GROUP").getValue());

Output:

checked: ["ONLINE", "PHONE", "STORE"]
after unchecking: []

$f_CheckFirstColumn

Given a checkbox in the first column of a table, sets every checkbox in that column to match it. This is the "check all" box of old tabular forms. It returns the checkboxes.

$f_CheckFirstColumn(pNd) → Element[]

apex.jQuery("#text_items .t-Region-body").append(
    '<table id="picks">' +
    '<tr><td><input type="checkbox" id="pick_all"></td><td>All</td></tr>' +
    '<tr><td><input type="checkbox"></td><td>Tents</td></tr>' +
    '<tr><td><input type="checkbox"></td><td>Stoves</td></tr></table>');
const all = document.getElementById("pick_all");
all.checked = true;
const boxes = $f_CheckFirstColumn(all);
console.log(boxes.length, "checkboxes:", boxes.map((box) => box.checked));

Output:

3 checkboxes: [true, true, true]

$f_ReturnChecked

Returns the checked values of a checkbox group or radio group as an array.

$f_ReturnChecked(pNd) → string[]

apex.item("P20_CHECKBOX_GROUP").setValue(["ONLINE", "PHONE"]);
console.log($f_ReturnChecked("P20_CHECKBOX_GROUP"));

Output:

["ONLINE", "PHONE"]

$f_SelectValue

Returns the selected value of a select list, or an array for a list that allows several selections.

$f_SelectValue(pNd) → string | string[]

console.log("department:", $f_SelectValue("P20_DEPARTMENT"));
apex.item("P20_DEPARTMENT").setValue(apex.jQuery("#P20_DEPARTMENT option[value!='']").first().val());
console.log("department:", $f_SelectValue("P20_DEPARTMENT"));

Output:

department: 
department: 1

$f_SelectedOptions

Returns the selected option element itself, which gives you both its value and its visible text. For a multi-select list it returns an array, and when nothing is selected it returns false.

$f_SelectedOptions(pNd) → Element | Element[] | false

apex.item("P20_DEPARTMENT").setValue(apex.jQuery("#P20_DEPARTMENT option[value!='']").eq(1).val());
const option = $f_SelectedOptions("P20_DEPARTMENT");
console.log("value:", option.value, "- text:", option.text);

Output:

value: 6 - text: Climbing

Reading the display text of a select list is a common need; getting the display value from a select list shows other ways to do it.

$f_Hide_On_Value_Item and $f_Show_On_Value_Item

Hide, or show, an element when an item has a given value, and do the opposite otherwise. Both return whether the value matched.

$f_Hide_On_Value_Item(pThis, pThat, pValue) → boolean
$f_Show_On_Value_Item(pThis, pThat, pValue) → boolean

console.log("P20_SWITCH =", $v("P20_SWITCH"));
const matched = $f_Hide_On_Value_Item("P20_SWITCH", "P20_NUMBER", "Y");
console.log("matched:", matched, "- P20_NUMBER visible:", apex.jQuery("#P20_NUMBER").is(":visible"));

Output:

P20_SWITCH = Y
matched: true - P20_NUMBER visible: false

apex.jQuery("#P20_NUMBER_CONTAINER").hide();
const matched = $f_Show_On_Value_Item("P20_RADIO", "P20_NUMBER", "ONLINE");
console.log("matched:", matched, "- P20_NUMBER visible:", apex.jQuery("#P20_NUMBER").is(":visible"));

Output:

matched: true - P20_NUMBER visible: true

A dynamic action with a Show or Hide action and a client-side condition does the same job declaratively, works for every item type, and is easier for the next developer to find.

$f_Hide_On_Value_Item_Row and $f_Show_On_Value_Item_Row

The table-row versions of the two functions above. Like the other row functions, they depend on the table layouts of old themes. In Universal Theme they still return the result of the comparison, but they hide and show nothing.

$f_Hide_On_Value_Item_Row(pThis, pThat, pValue) → boolean
$f_Show_On_Value_Item_Row(pThis, pThat, pValue) → boolean

const matched = $f_Hide_On_Value_Item_Row("P20_SWITCH", "P20_NUMBER", "Y");
console.log("matched:", matched);
console.log("P20_NUMBER visible:", apex.jQuery("#P20_NUMBER").is(":visible"),
    "- inside a table row:", apex.jQuery("#P20_NUMBER").closest("tr").length === 1);

Output:

matched: true
P20_NUMBER visible: true - inside a table row: false

const matched = $f_Show_On_Value_Item_Row("P20_RADIO", "P20_NUMBER", "ONLINE");
console.log("matched:", matched, "- rows found:", apex.jQuery("#P20_NUMBER").closest("tr").length);

Output:

matched: true - rows found: 0

$f_get_emptys

Checks a list of items, gives the empty ones one class and the filled ones another, and returns the empty ones. When none is empty, it returns false.

$f_get_emptys(pNd, [pClassFail], [pClass]) → Element[] | false

const empty = $f_get_emptys(["P20_TEXT", "P20_PASSWORD", "P20_NUMBER"], "is-empty", "is-filled");
console.log("empty items:", empty && empty.map((node) => node.id));
console.log("classes:", $x("P20_PASSWORD").className, "|", $x("P20_TEXT").className);

Output:

empty items: ["P20_PASSWORD"]
classes: is-empty | is-filled

Like $x_Class, it replaces the whole class attribute, so the inputs lose their theme classes. For required-field checks, the item's Value Required setting and apex.item(name).isEmpty() are safer choices.

$f_SetValueSequence

Numbers a list of inputs in steps of a given size: 10, 20, 30, and so on.

$f_SetValueSequence(pArray, pMultiple)

apex.jQuery("#text_items .t-Region-body").append(
    '<div id="steps"><input class="seq"><input class="seq"><input class="seq"></div>');
const inputs = apex.jQuery("#steps .seq").get();
$f_SetValueSequence(inputs, 10);
console.log(inputs.map((input) => input.value));

Output:

["10", "20", "30"]

$f_Swap

Documented to swap the values of two form elements.

$f_Swap(pThis, pThat)

console.log("before:", $v("P20_TEXT"), "|", $v("P20_TEXTAREA"));
$f_Swap("P20_TEXT", "P20_TEXTAREA");
console.log("after: ", $v("P20_TEXT"), "|", $v("P20_TEXTAREA"));

Output:

before: Trailblazer 2-Person Tent | A longer text, over several lines.
after:  A longer text, over several lines. | A longer text, over several lines.

It does not swap. In 26.1 the function copies the second value into the first element, then copies the first element, which by now holds the second value, back into the second. Both end up with the second value and the first is lost. Swap with the item interface instead, saving one value before you overwrite it:

const a = apex.item("P20_TEXT"), b = apex.item("P20_TEXTAREA");
const aValue = a.getValue();
a.setValue(b.getValue());
b.setValue(aValue);
console.log("after: ", $v("P20_TEXT"), "|", $v("P20_TEXTAREA"));

Output:

after:  A longer text, over several lines. | Trailblazer 2-Person Tent

$f_ValuesToArray

Returns the values of the elements with a given class and tag inside a container.

$f_ValuesToArray(pThis, pClass, pTag) → string[]

const values = $f_ValuesToArray("text_items", "text_field", "INPUT");
console.log(values);

Output:

["Trailblazer 2-Person Tent"]

Building and Clearing Elements

$dom_AddTag

Appends a new element with a given tag and HTML content to an element, and returns the new element. The content is treated as HTML, so never pass it text that a user typed.

$dom_AddTag(pThis, [pTag], [pText]) → Element

const note = $dom_AddTag("text_items", "p", "Prices include <b>VAT</b>.");
console.log(note.outerHTML, "in", note.parentNode.id);

Output:

<p>Prices include <b>VAT</b>.</p> in text_items

$dom_AddInput

Appends an input element with a given type, ID, name, and value, and returns it. The type defaults to text.

$dom_AddInput(pThis, [pType], [pId], [pName], [pValue]) → Element

const input = $dom_AddInput("text_items", "hidden", "P20_TOKEN", "P20_TOKEN", "A1B2");
console.log(input.outerHTML);

Output:

<input type="hidden" id="P20_TOKEN" name="P20_TOKEN" value="A1B2">

An input added this way is not a page item, so do not count on its value reaching session state when the page is submitted. When the server needs the value, create a hidden page item in Page Designer instead.

$dom_MakeParent

Moves an element inside another element and returns it.

$dom_MakeParent(pThis, pParent) → Element

const note = $dom_AddTag("text_items", "p", "Moved note");
$dom_MakeParent(note, "choice_items");
console.log("now inside:", note.parentNode.id);

Output:

now inside: choice_items

$d_ClearAndHide

Empties one or more elements and hides them.

$d_ClearAndHide(pNd)

apex.jQuery("#text_items .t-Region-body").prepend('<p id="promo">Free shipping this week</p>');
$d_ClearAndHide("promo");
const promo = document.getElementById("promo");
console.log("content:", JSON.stringify(promo.innerHTML), "- display:", promo.style.display);

Output:

content: "" - display: none

html_RemoveAllChildren

Removes every child of an element, leaving the element itself in place.

html_RemoveAllChildren(pNd)

html_RemoveAllChildren("P20_TEXT_CONTAINER");
console.log("children left:", apex.jQuery("#P20_TEXT_CONTAINER").children().length);

Output:

children left: 0

html_SetSelectValue

Selects the option with a given value in a select list. When no option has that value, it falls back to the first option, which is usually the empty one.

html_SetSelectValue(pId, pValue)

const first = apex.jQuery("#P20_DEPARTMENT option[value!='']").first().val();
html_SetSelectValue("P20_DEPARTMENT", first);
console.log("selected:", $v("P20_DEPARTMENT"));
html_SetSelectValue("P20_DEPARTMENT", "NO_SUCH_VALUE");
console.log("after an unknown value:", JSON.stringify($v("P20_DEPARTMENT")));

Output:

selected: 1
after an unknown value: ""

$tr_AddTD and $tr_AddTH

Append a data cell or a header cell with given content to a table row, and return the new cell.

$tr_AddTD(pThis, pText) → Element
$tr_AddTH(pThis, pText) → Element

apex.jQuery("#text_items .t-Region-body").append('<table><tr id="total_row"></tr></table>');
$tr_AddTD("total_row", "Total");
const cell = $tr_AddTD("total_row", "$1,329.95");
console.log(apex.jQuery("#total_row").html());

Output:

<td>Total</td><td>$1,329.95</td>

apex.jQuery("#text_items .t-Region-body").append('<table><tr id="head_row"></tr></table>');
$tr_AddTH("head_row", "Product");
$tr_AddTH("head_row", "Price");
console.log(apex.jQuery("#head_row").html());

Output:

<th>Product</th><th>Price</th>

Array Helpers

$u_Carray

Returns its argument as an array. A single ID or element becomes an array of one, and an array comes back as it is. The other global functions use it internally so they can accept either one node or many.

$u_Carray(pNd) → Array

console.log($u_Carray("P20_TEXT").map((n) => n));
const nodes = $u_Carray(["P20_TEXT", "P20_NUMBER"]);
console.log(nodes.length, "items:", nodes.join(", "));
console.log($u_Carray($x("P20_TEXT")).length, "element");

Output:

["P20_TEXT"]
2 items: P20_TEXT, P20_NUMBER
1 element

$u_Narray

The reverse of $u_Carray. An array of one becomes its single element, and a longer array comes back as it is.

$u_Narray(pNd) → * | Array

console.log($u_Narray(["P20_TEXT"]));
console.log($u_Narray(["P20_TEXT", "P20_NUMBER"]));

Output:

P20_TEXT
["P20_TEXT", "P20_NUMBER"]

Replacing Global Functions in Old Code

When you modernize an older application, these are the swaps you will make most often:

Each replacement is covered in detail in the guide to getting and setting page items with apex.item, and the namespace those calls live in is explained in using the apex namespace and page events.

Conclusion

The global functions are the oldest layer of the Oracle APEX JavaScript API, and they still run in APEX 26.1. $v and $s remain handy shorthands for reading and setting items, and $x, the $x_ family, the $f_ family, and the $dom_ helpers cover finding, hiding, disabling, and building elements. Three groups need care: the row functions do nothing in Universal Theme because there is no table row to find, $f_Swap overwrites instead of swapping, and $nvl leaves empty strings alone. Several others replace the whole class attribute and strip theme styling. For new work, use apex.item and the other namespaced APIs, which handle every item type, fire change events properly, and work in any layout, and treat the global functions as something to recognize and replace when you meet them in older code.