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:

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

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:

Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm a Senior APEX Consultant with Insum Solutions, a consulting firm specialized in Oracle databases and the APEX development tool. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

Posted in APEX, JavaScript, Modal Dialogs, Oracle
4 comments on “Dynamic Modal Dialog Titles in APEX5
  1. Gemma Wood says:

    Great article Jorge. Love the $v in the dialog attributes

  2. Furby says:

    Hi Jorge, I’m looking at the demo app (https://apex.oracle.com/pls/apex/f?p=46011:50) and couldn’t figure out HOW to fill the “u0026p_dialog_cs” value, where can I get that parameter? Thanks!

    • 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.

I love comments, write me a line