Oracle APEX: How to update Page Title in Copied Pages

 Prerequisites

Before following this make sure you have the following in place:

•        An existing APEX application with at least one page

•        A Master region already created an Interactive Grid that displays a list of records (e.g., Accessories PO Followup)

•        A Dynamic Action for Title.

 Issue: When you copy an Oracle APEX page and try to update the visible page or region header title using a Dynamic Action with JavaScript, the change often does not work. A common attempt looks like this when copy page it get old page Title:

Figure 1: Copied Title

 Dynamic Action

// In Dynamic Action > Execute JavaScript Code

document.title = "Accessories PO Followup";

The browser tab may briefly update, but the visible heading on the page stays unchanged or reverts back to the old title.

 

Figure 2: Dynamic Action

 Why It Happens

There are three root causes for this behavior:

1.  APEX Overwrites document.title After Your JS Runs

Oracle APEX uses the page template to generate the <title> tag dynamically. When a page loads, APEX sets the browser title to:

Page Name + Application Name

This happens after your Dynamic Action fires on Page Load, which means your JavaScript change gets silently overwritten.

2.  The Copied Page Still Has the Old Page Name

When you copy a page in APEX, the new page inherits the original page's name, template, and breadcrumb entries. Simply adding JavaScript does not update any of these underlying settings  the old name is still being pushed into the title by APEX's rendering engine.

 Solution:

Option 1: Page Designer

Steps: Update the Page Title

1.      Open your copied page in Page Designer.

2.      Click on the page background (not inside any region) to open Page Properties in the right panel.

3.      In the Page section, find the Name field and update it to your new title (e.g., "Accessories PO Followup").

 

Figure 3: Page Title

4.      Save the page. APEX will now render the correct title automatically.

Option 2: Browser inspect method

Steps: 

1.      Run your copied page in the browser.
2.      Right-click on the region heading text you want to change.
3.      Select Inspect (or Inspect Element) from the context menu.

Figure 4: Inspect

4.      In the DevTools panel, look at the highlighted HTML element. Note the exact id attribute, for example:

<h2 id="R2633640849493530307_heading">Test Fuel Consumption Summary</h2>

Figure 5: Copy Attribute id

 5.      Use that exact ID in your Dynamic Action JavaScript:

// Replace with the ID you found in DevTools

$("#R2633640849493530307_heading").text("Accessories PO Followup");

 

Figure 6: Final Change Title

Caution: The numeric portion of this ID (e.g. R2633640849493530307) is generated at runtime and will change when you export and import the page to another environment. Do not use this approach in Test or Production.

 Key Point

 When you copy an APEX page, always update the Page Titles directly in Page Designer first. Only reach for JavaScript when the title must change dynamically at runtime — and when you do, always use a Static ID on the region for stability across environments.