Oracle APEX - Set Modal Dialog Title Based Upon Substitution Strings

For more details, check out APEX Instant Tips episode 179.

In APEX Instant Tips episode 31 we discussed how to navigate the APEX DOM, specifically highlighting how to set a modal dialog title. That episode has one missed feature—with un-chained dialogs the solution set the title of all of the dialogs, not just the new dialog. It also required that you put JavaScript code on every page that required this feature.

A much better solution would be to have the page function like just about everything else in APEX—allow the title to simply use substitution strings. If the title is defined as

Details for &P123_FIRST_NAME.

Then when you open the modal dialog for Marwa Chouchene the page title should be

Details for Marwa

Of course, it does not behave this way by default. And Marwa didn’t like that at all. So what does an APEX expert do when APEX lacks a feature? She writes a plug-in!

Below is a link to Marwa’s plug-in.

https://github.com/ainielse/set-modal-title/

All you have to do is install the plug-in in your application and add it to Page 0 as an on-load dynamic action. Then, whenever you have a modal dialog title with a substitution string the plug-in will do take care of it.

The code for the plug-in is simple:

function f_render (
    p_dynamic_action   in   apex_plugin.t_dynamic_action,
    p_plugin           in   apex_plugin.t_plugin
) return apex_plugin.t_dynamic_action_render_result as

    l_result            apex_plugin.t_dynamic_action_render_result;
    l_title             varchar2(4000);
    l_title_after_subs  varchar2(4000);
    l_page_mode         varchar2(500);

begin

    select page_title, page_mode
      into l_title, l_page_mode
      from apex_application_pages aap
      where application_id = :APP_ID
        and page_id = :APP_PAGE_ID;

    if l_page_mode != 'Normal' then

        -- Do substitutions. 
        -- NOTE: Modal dialog titles automatically escape HTML. Hence, we need to set p_escape to FALSE.
        l_title_after_subs := apex_plugin_util.replace_substitutions(p_value => l_title, p_escape => false); 

        -- see if page title has a substution string
        if l_title != l_title_after_subs then

            l_result.javascript_function := 'function () { 
                                                      apex.util.getTopApex().jQuery(".ui-dialog-content").last().dialog("option", "title", ' ||
                                                        apex_javascript.add_value( p_value       => l_title_after_subs,
                                                                                   p_add_comma   => false
                                                        ) ||
                                                       '); }';
        end if;
    end if;

    if l_result.javascript_function is null then
        l_result.javascript_function := 'function () { null; }';
    end if;

    return l_result;
exception
    when others then apex_debug.message('Unexpected error in SET_DIALOG_TITLE_SS: %s', sqlerrm);
        return l_result;
end;

The part that we missed in episode 31 related to un-chained dialogs is here:

apex.util.getTopApex().jQuery(".ui-dialog-content").last().dialog

We added .last() to ensure that we only change the title for the last dialog that was opened.

Really, though, adding this as a plug-in on your global page (page 0) is all it takes.