get the Developer Toolbar back for mobile APEX Applications

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:

    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>');
        htp.p('    <a data-role="button" rel="external" href="f?p=&APP_ID.:&APP_PAGE_ID.:&SESSION.::YES" title="Debug">Debug</a>');
        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;

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.

4 thoughts on “get the Developer Toolbar back for mobile APEX Applications

  1. Thank you for providing the steps and code. I wasn’t sure how I was going to complete my mobile development without the developer’s toolbar.

  2. Tnx, even this solution did not work me untill I set the compatibiliy mode to pre 4.1.

Leave a Reply

Your email address will not be published. Required fields are marked *