Create a mobile Theme for Oracle APEX

This is Article #2 in my series about Oracle APEX on mobile Devices.

If you haven’t read the first one, please do so now.

This Article is based on the current release of Oracle APEX, but should also work on APEX 3.x and 4.1.
With Oracle APEX 4.1 and later there will be more options and possibilities which let you create an even better mobile Application, more to that in a later Article in this series.

This time we’ll start to build an Application which runs and adapts to mobile devices.

Create the Application

At first we create a new Application, pick any Theme you like but make sure that you don’t use Tabs.
The first/starting Page in our Application will consist of a List, which will be the main menu, and two other Pages with a Report and a Form. In my Demo Application I use the Table DEMO_CUSTOMERS which comes with the APEX Sample Application.

Demo Application in the Application Builder

Page 10 (Customers) is a classic SQL Report with that Statement:

, cust_last_name || ', ' || cust_first_name                                  AS TITLE
, cust_city ||', '|| cust_state ||', '|| cust_postal_code                    AS PLAIN_TEXT
from demo_customers

Page 11 (Customer) is a standard APEX-Form based on Table DEMO_CUSTOMERS (simply use the wizard to create it).

Page 1 contains a List-Region. At first create a new List (Main Menue) under Shared Components with a List entry pointing to Page 10. Then you can create the List-Region on Page 1 which uses this new list.

You can run this Application right away, but you’ll see that it isn’t rendered for mobile Devices. At this point it is just a normal APEX Application like all the other Applications you already have created.

create a new Page Template

Telling our Application to do some special rendering for mobile Devices is done with the Page Template. There we include jQuery mobile and define the required HTML5-Structure of the Page, as required per the jQuery mobile Documentation.

Now simply copy one of the existing Page Templates and replace the following code snippets in the respective options:

Page Template Header

<!DOCTYPE html>
<html lang="&BROWSER_LANGUAGE." xmlns=""
xmlns:htmldb="" xmlns:apex="">
<link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<body #ONLOAD#>
<div  data-role="page">

Page Template Body

      <div data-role="header" data-backbtn="false">
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
</div><!-- /content -->

Page Template Footer

      <div data-role="footer">
</div><!-- /footer -->


Page Template Navigation Bar Entry

<a href="#LINK#" rel="external" #ALT#>#TEXT#</a>

Save the Page Template and set it as Default Template in the Theme Definition.
After starting the Application you can see a different Layout than before.
Application with mobile Page Template

create a new Region Template

Create a new and empty Region Template and copy this code:

Region Template Definition

<div data-role="controlgroup" data-type="horizontal">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE#

Again set this new Region Template as Default in the Theme Settings and use it in all already created Regions.
This now takes care of the Region Title and the Region Buttons, both are now rendered for mobile Devices.

create a List Template

The Home Page shall be the main Menu of the Application which is an APEX List. To make this look good and work on mobile Devices we need a new List Template with the following Definitions.

List Template Before Rows

<ul data-role="listview" data-inset="true">

List Template Current

<li><a href="#LINK#" rel="external">#TEXT#</a></li>

List Template Noncurrent

<li><a href="#LINK#" rel="external">#TEXT#</a></li>

List Template After Rows


After setting the new Template as Template for the List on Page 1 it instantly looks great.

Home Page with Main Menu for mobile Devices

create a Report Template

There is a vast variety on mobile Devices with differen Screen Sizes, Screen Resolutions and Capabilities. Standard APEX Reports won’t fit on most of the Screens, so we choose a different approach and create a Report Template for named Columns. This way we have more control over the Layout.

Create a new Report Row Template with the following Definitions:

Report Template Row Template 1

<a href="#LINK#" rel="external">

Report Template Before Rows

<ul data-role="listview">

Report Template After Rows


This Report Template expects that the Report SELECT Statement returns the Columns LINK, TITLE, BOLD_TEXT and PLAIN_TEXT. What you put in these Columns is totally up to you, just create any SELECT Statement and use the expected Column names as alias.

Using this new Template for our Report on Page 10 gives it a nice look.

APEX Report adapted to mobile Devices

As you can see we created a mobile Application with just a few changes on Templates. Of course this is just a first draft and there are some things to polish up and take care of (like Navigation, Buttons, Charts, …). See what’s possible in the mobile Demo Application

More tipps on APEX for mobile Devices in the next Article – so stay tuned!

Also Join me for a webinar on June 20th when I will go through my APEX for mobile project

55 thoughts on “Create a mobile Theme for Oracle APEX

  1. Great Article! It’s really helpful. We are still using 3.0 but it seems to be handling it so far.

    Can’t wait for Article #3, is there an eta? I’m looking forward to the Navigation, Buttons etc part. :-)

    Is there any way to access the demo behind the scenes?

    Thanks again

  2. Hello Peter,

    Thank you very much, Its very help full article, I need to know something, I have a application already created in Apex and I need to make it available in mobile also, is there a way that I can use that same application only to publish on mobile or do I need to create a separate application all together for mobile?

    Eagerly waiting for your reply.


  3. Hi Tauceef,

    sorry to disappoint you, but there is no magic “make my application mobile” function.

    Because: if you want to support a mobile interface, you want to think about special needs for mobile. Maybe you want to display less information than on the desktop version, or have a different approach/workflow in entering data.

    Most of the time a mobile interface for a desktop-web-application is stripped down in information and functionality. You’ll have only the necessary functions in the mobile interface.


  4. Your weblink is offline .. I’ll try your code sameples .. thanks for sharing…


  5. Comes up blank in IE. although view source shows something is gettting passed. Perhaps its not meant to show in IE?

  6. Hello Peter

    Very nice guide :-)

    I have a question to your demo at
    How you style your form?

    My form look crazy:

    Can you give me a hit where I do the styling? I have tried a the “Form region” at my template, but I can’t find where I can change the table the form item are in.

    Best Regard
    Jesper Vels

  7. Peter,
    I’ve hit an error with this using IE 8 and Apex 4.1

    The app itself is working OK, but when I try to use either the ‘Edit Page x’, ‘Application x’ or ‘Home’ builder links at the bottom of the page I get the ‘loading’ spinning image and the following error: –


    Have you come across anything like this before?



  8. Hi Peter,
    Sorry 1 more question, I noticed you’re using the input type = tel, date etc on your page 11, where in Apex have you set those, wherever I put those Apex still seems to override with input type = text?



  9. Peter,
    I would like to use the latest version of JQuery Mobile but when I substitute

    for where you have

    The type, regions and buttons are very small when viewed on a mobile device. What can I do to retain the look of the apps in your article while enjoying the improvements/bug fixes in the latest version?

  10. Peter,
    excellent article! However, I really don’t understand when you say” set WWV_FLOWS.g_mobile_mode := TRUE;”. Where would I set that in my application?


  11. Andy,

    put that into a PL/SQL Process before Header and you should be fine. This setting influences APEX rendering of the developer toolbar.

  12. Peter,
    it seems to be WWV_FLOW.g_mobile_mode := TRUE; and not WWV_FLOWS.g_mobile_mode := TRUE;. However it also changes the layout fairly dramatically if you set this. For example I have a page with 3 Select Lists in 2 columns if I am trying to describe it:
    Label — List
    Label — List
    Label — List
    Changes into this format where the List takes 100% of the scrren

    Not sure what this flag really does but it deosn’t seem to be documented.


  13. Andy,

    you are right. This flag is used for mobile templates and influences the rendering of regions. Seems that it corresponds with the region-template-setting “Form Items in Tables”

  14. Dear Peter,

    I have been read your article in the blog and also download your webinar, But it still doesn’t give me comprehensive information about how to connecting my Apex with JQuery, could you give me more reference like picture by picture or step by step way to connecting it. Because I can not get it how to exactly create the same interface like you have in your apex, like Where I can get the page template for the Apex to modify ?


  15. Pingback: Interesting jQuery Mobile Tutorials

  16. Thanks Peter,

    Great article. I have try steps and it really look cool on my iphone. I have question when I run my app from apex developer tool and if I click on apex toolbar at bottom (Home, Application nnn or Edit Page nn) to goback to my current app or page. Its display Lodaing image. I can not goback to my app or current page. Other toolbar option like Session, view debug works fine.

    On Firefox error: View error using fire bug. Error message is:
    pg4150Init is not defined
    …oLowerCase()===”input”&&”password”===a.type},submit:function(a){var b=a.nodeName…

    On IE 8 error is
    Message: ‘pg4150Init’ is undefined
    Line: 2
    Char: 1
    Code: 0
    URI: http://localhost:8080/apex/f?p=104:1:273703005569609:::::
    Message: Could not complete the operation due to error 80020101.
    Line: 16
    Char: 12145
    Code: 0
    URI: http://localhost:8080/i/javascript/apex_4_1.min.js

    Is some this wrong with jquery-mobile and apex toolbar? If i used one of existing theme page template all apex toolbar works fine.
    Any suggestion?


  17. Hi !

    Great article !

    Is it possible to download this apex application ?

    Regards Ola

  18. Thank you Peter for taking the time to make this available. Can you share your template wizardry behind you Login page?


  19. Peter, disregard my last response; dumb question; I figured it out.


  20. Peter,
    I’ve build this application following your steps but still wanted to view your application. Anyhow thanks for your reply.

  21. Peter:
    Find this Blog will be truly helpful for me and the new project ideas I have in mind.
    I was wondering how to do somethings I want it to do, (and still I don’t know how) but now I know it can be possible with APEX.
    I will like to contact you to clarify some issues I have and i know you are the perfect person to help me.

    Best regards,

  22. Hi Peter,
    When I open the webversion in my normal browser on my laptop with the developer bar showing, pressing on the edit page link just makes the page load and thats it. Did I forget to set something?


  23. Raoul,

    if you are on APEX 4.1 you can set WWV_FLOWS.g_mobile_mode := TRUE; this creates the Developer-Bar Links with rel=”external” .

    This is needed to tell jQuery mobile to avoid using AJAX page loading on these links (because that just doesn’t work in this combination).

  24. Tnx Peter,
    Turned it of for my forms. It really messes up the page.
    But it works.


  25. Hi Peter,
    you don’t have a date input in your example.
    The date picker works, but the calender does not disappear when you click outside. So you once you chose to enter a date you can’t enter nothing. you must pick something.
    Got any suggestions?

    (experimenting with mobile apex)

  26. Hi Peter,

    I am also working on a jQuery Mobile Template for Apex at the moment.

    The only problem I have is the login page. Clicking the login button opens a site with 400 Error “The request could not be understood by server due to malformed syntax”.

    Can you help me please?

    Where can I set this command in Apex backend?

    WWV_FLOWS.g_mobile_mode := TRUE;


  27. Hallo Christian,

    what is the exact request sent to the server? (URL, Parameters, …).

    WWV_FLOWS is a Package, g_mobile_mode is a global variable within that Package. PL/SQL, that is. You can set this in a PL/SQL Process, but as described before it doesn’t change much except the links in the developer toolbar.

  28. Hi Peter !

    From my native Android app I am loading your example site se below


    The login page shows up and I enter demo/click and everything is fine but when I choose an menu item on the Main Menu (e.g customers)
    the webbrowser redirects me to the login page again. Do you know why ?

    Regards Ola

  29. Hi Peter,

    the login page is working now, sorry for the question.

    I had some manually created HTML input fields in my Apex form and Apex responded with an error message.

    Nice tutorial :-)


  30. Hi
    this is my application user/password demo/demo

    I don’t understand how I can add two button on navigationbar (show menu–>clienti–> pag 2) two button:
    right (logout) and left (Ritorna=Back), but now I would like add a icone set data-icon=”arrow-l” only for left button.

    But When I add the data-icon=”arrow-l” on navigation bar, I put data-icon on both buttons (left and right)

    same suggest

    thanks in advance

  31. Hi Peter,

    Thanks for a very helpfull guide. I am trying it be creating a little test application which is a replication of what you have done. Bellow is my reports sql statement

    select ‘f?p=’||:APP_ID||’:3:’||:APP_SESSION||’::::P3_CUSTOMER_ID:’||CUSTOMER_ID AS LINK,
    cust_last_name || ‘, ‘ || cust_first_name AS TITLE,
    cust_city ||’, ‘|| cust_state ||’, ‘|| cust_postal_code AS PLAIN_TEXT

    I created a report template as you described in the guid, but when I get to the customers list it displayes 28 Items instead of 7 and it does not display the database information instead it displays the text that is inserted in the Column Template 1
    without the tags
    Do you know the reason for that.

    Thanks in advance

  32. Which type of Report Template did you create?
    As described above you need a Row Template (named columns). From the information you gave me i think you created a generic column template.

  33. Hi Peter,

    Thanks for the quick reply that was actually the problem I had created a column template instead of a row template.
    Thanks again

  34. Pingback: Oracle Apex - What´s next? | Daniel´s IT-Blog

  35. Hi Peter,

    Thanks for Good Template code which helped me in creating a mobile application.

    But i am facing a small problem is that radio buttons and normal buttons are not adjusting in the page size in mobile application…

    Is there any way to reduce the size of radio buttons can be fit in the mobile view…

    It will grateful if you can reply on this…


  36. Great info!

    I did download jQuery Mobile library file from “” and i uploaded jQuery Mobile library file to my APEX instance.
    I able to create Mobile App, but i failed to display icon or button on my mobile app.

    Can you provide jQuery Mobile installing steps?


  37. Hi, i try to do the mobile app, all work fine, but when i clicked the save or apply changes button in master detail form, does nothing and in the error console of the browser appears this error

    TypeError: document[b.options.form].submit is not a function
    Source File:
    Line: 18

    Please Help me!!..


Leave a Reply

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