When developing mobile applications with APEX 4.2 you’ll find the developer toolbar on the page bottom is missing.

This can be a little bit annoying when investigating misbehaving applications. Oracle recognizes this as Issue 14749955 with the workaround to access the toolbar functions through a desktop page…

Of course this is a bit annoying, so i spend some time and thought of a solution.

Here it is, a simple way to get the developer toolbar for mobile applications.

create a PL/SQL Region on the Global Page for mobile UI

Give the region a very high sequence number, something like 999999, to ensure it will be the last region in the body. As region template we are going to use “No Template”, since you don’t want to see any title for this region.

The region source will construct a nice horizontal button-group in mobile-friendly styling:

BEGIN
    htp.p('<div data-role="controlgroup" data-type="horizontal" data-mini="true" id="apex-dev-toolbar">');
    htp.p('    <a data-role="button" rel="external" href="f?p=4500:1000:'||APEX_APPLICATION.g_edit_cookie_session_id||'" title="Application Express Home">Home</a>');
    htp.p('    <a data-role="button" rel="external" href="f?p=4000:1:'||APEX_APPLICATION.g_edit_cookie_session_id||'::NO:1,4150,RP:FB_FLOW_ID,FB_FLOW_PAGE_ID,F4000_P1_FLOW,F4000_P4150_GOTO_PAGE,F4000_P1_PAGE:&APP_ID.,&APP_PAGE_ID.,&APP_ID.,&APP_PAGE_ID.,&APP_PAGE_ID." title="Application &APP_ID.">Application &APP_ID.</a>');
    htp.p('    <a data-role="button" rel="external" href="f?p=4000:4150:'||APEX_APPLICATION.g_edit_cookie_session_id||'::NO:1,4150:FB_FLOW_ID,FB_FLOW_PAGE_ID,F4000_P1_FLOW,F4000_P4150_GOTO_PAGE,F4000_P1_PAGE:&APP_ID.,&APP_PAGE_ID.,&APP_ID.,&APP_PAGE_ID.,&APP_PAGE_ID." title="Edit Page &APP_PAGE_ID.">Edit Page &APP_PAGE_ID.</a>');
    htp.p('    <a data-role="button" rel="external" href="f?p=4000:336:'||APEX_APPLICATION.g_edit_cookie_session_id||'::NO::FB_FLOW_ID,FB_FLOW_PAGE_ID,F4000_P1_FLOW,F4000_P4150_GOTO_PAGE,F4000_P1_PAGE:&APP_ID.,&APP_PAGE_ID.,&APP_ID.,&APP_PAGE_ID.,&APP_PAGE_ID." title="Create">Create</a>');
    htp.p('    <a data-role="button" rel="external" target="_blank" href="f?p=4000:34:'||APEX_APPLICATION.g_edit_cookie_session_id||':PAGE:NO:34:F4000_P34_SESSION,F4000_P34_FLOW,F4000_P34_PAGE,FB_FLOW_ID:&SESSION.,&APP_ID.,&APP_PAGE_ID.,&APP_ID.">Session</a>');
    htp.p('    <a data-role="button" rel="external"  href="f?p=4000:14:'||APEX_APPLICATION.g_edit_cookie_session_id||'::::FB_FLOW_ID,FB_FLOW_PAGE_ID,F4000_P1_FLOW,F4000_P4150_GOTO_PAGE,F4000_P1_PAGE:&APP_ID.,&APP_PAGE_ID.,&APP_ID.,&APP_PAGE_ID.,&APP_PAGE_ID." title="Caching">Caching</a>');
    htp.p('    <a data-role="button" rel="external" target="_blank" href="f?p=4000:19:'||APEX_APPLICATION.g_edit_cookie_session_id||':::RIR,19:IR_APPLICATION_ID,IR_PAGE_ID:&APP_ID.,&APP_PAGE_ID." title="View Debug">View Debug</a>');
    --
    IF :DEBUG IS NULL OR :DEBUG = 'NO'
    THEN
        htp.p('    <a data-role="button" rel="external" href="f?p=&APP_ID.:&APP_PAGE_ID.:&SESSION.::YES" title="Debug">Debug</a>');
    ELSE
        htp.p('    <a data-role="button" rel="external" href="f?p=&APP_ID.:&APP_PAGE_ID.:&SESSION.::NO" title="Debug">End Debug</a>');
    END IF;
    htp.p('</div>');
END;

Don’t forget to set the Condition to Type “PL/SQL Expression” and APEX_APPLICATION.g_edit_cookie_session_id IS NOT NULL, to guarantee this toolbar will show only for development session.

The end result is pretty slick, i think:

Of course this isn’t the “real” developer toolbar and it doesn’t support all the functions you are used, but it provides the necessary minimum (at least for me, it does).

Please let me know if this was helpful for you.