Dynamic Modal Dialog Titles in APEX5

Modal Dialogs in APEX5 use the Modal Page Title attribute as the Title of the dialog.

Standard Dialog Title
Standard Dialog Title

Often, I wish this valuable area of the page could convey more information. So, I thought I could use a Substitution String in the page title, but this doesn’t work that well because the value cannot be changed dynamically. To truly make it dynamic you need to use JavaScript.

Thanks to the awesome blog post from John Snyders I was able to take this example:

$("body").on("dialogcreate", ".ui-dialog--apex", function(e) {
    $(this).children(".ui-dialog-content")
        .dialog("option", "hide", {effect: "slideUp", duration: 1000})
        .dialog("option", "show", {effect: "slideDown", duration: 1000});
});

That enhances the dialog to open and close with a sliding effect. Into this:

$("body").on("dialogcreate", ".ui-dialog--apex", function(e) {
    $(this).children(".ui-dialog-content")
        .dialog("option", "title", $v("P50_DIALOG_TITLE"));
});

When “dialogcreate” event fires, we override the dialog “title” option with the title we want.
A Dynamic Action, on Click of our link, will grab the text of the link (via this.triggeringElement.innerText and save it on P50_DIALOG_TITLE. Looks something like this:

daclicksavetitle
this.triggeringElement.innerText

The end result:

Dynamic Title
Dynamic Title

DEMO Here

Now, I was wondering if I could simply set the attribute via the Dialog Attributes, and you can! Notice that the Dialog is a different page, but the attribute is from an item on the calling page. This means that if you call a dialog from many pages you may want to use a JavaScript variable with the same name.

dialog_attribute

Finally, there is one more use case to consider. What if you navigate within the dialog to a different record, for example with Next and Previous buttons? In this case, this code may come in handy:

apex.util.getTopApex().jQuery(".ui-dialog-content").dialog("option", "title", $v("P55_TITLE"))

Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm an APEX Tech Lead DRW. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

9 Comments on “Dynamic Modal Dialog Titles in APEX5

    • You rarely worry about that. “u0026” is an ampersand and “p_dialog_cs” is the checksum required by the destination page.
      If your link is a standard report link, the checksum is calculated and added automatically.
      If you’re building your own links, call `apex_util.prepare_url` or `apex_page.get_url` and it will add a checksum if required.

  1. This would be even better if you wrote which page and which field to populate with the provided code…

  2. I added this code on Execute on Page loads for the Modal page and gave me the desired output

    apex.util.getTopApex().jQuery(“.ui-dialog-content”).dialog(“option”, “title”, ‘Process_Detail_id_&P3_PROCESS_ID.’ );

I love comments, write me a line