In this Oracle Apex tutorial, I will show you how to change dialog title dynamically using JavaScript. Dynamically means, you want to change the page title by referencing a page item on page load or on a button click, etc. Even there is a way, that you can specify a page item using &P1_EXAMPLE. in the Title property of the dialog page, but this method does not work properly and on-page refresh it goes away. So the better way is to set a dialog title is using JavaScript. The following are the examples:
1. Change Dialog Title Using Dynamic Action on Page Load in Oracle Apex
In the below example, it will change the dialog page title on the page load event using the Dynamic Action of Execute JavaScript code type.
Open your dialog page in page designer in Oracle Apex, then click on the Dynamic Actions tab and then do the right-click on the Page Load node and select the option Create Dynamic Action from the shortcut menu. Then set the following properties (also shown in the below image):
- Identification > Name: da_page_load
- When > Event: Page Load (this will be set by default because you created the dynamic action on page load node.)
- Action: Execute JavaScript Code
- Fire on Initialization: Yes
- Code: Add the following JavaScript Code here:
apex.util.getTopApex().jQuery(".ui-dialog-content").dialog("option", "title", "Employee &P8_FIRST_NAME.");NOTE: In my dialog page I have an item P8_FIRST_NAME, which I referred to the above JavaScript code. You change it to your page item to display in the dialog title.
Now save the changes and run the page. The dialog title will change on the page load as shown in the below image:
2. Change Dialog Title Using Page Property JavaScript > Execute When Page Loads
Another way is to add the same JavaScript code in the Page Property Execute when Page Loads in the JavaScript section. To do this, click on your page, then scroll down properties pane to JavaScript > Execute when Page Loads and then add the following code:
apex.util.getTopApex().jQuery(".ui-dialog-content").dialog("option", "title", "Employee &P8_FIRST_NAME.");
The functionality and output would be the same as shown for the first example.
3. Change Dialog Title Using Any Event in Oracle Apex
As we have created a dynamic action on page load event to execute JavaScript code in the first example. Similarly, you can create the dynamic action to execute the JavaScript code to change dialog title on any event. In the following example screenshot, it is changing the dialog title on a button click event by executing the same JavaScript code:
Now when the user will click on the Button the dialog title will change. You can add more fields in JavaScript code, below is the example:
apex.util.getTopApex().jQuery(".ui-dialog-content").dialog("option", "title", "Employee &P8_FIRST_NAME. &P8_LAST_NAME.");These examples have been tested in Oracle Apex 19.1 and 19.2. Reference JavaScript API documentation.
Related tutorials:
- Oracle Apex: Format Number with Comma and Decimal Using JavaScript
- How to Show Alert Messages in Oracle Apex?
