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 4.0.2.00.07, 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.
Page 10 (Customers) is a classic SQL Report with that Statement:
SELECT 'f?p='||:APP_ID||':11:'||:APP_SESSION||'::::P11_CUSTOMER_ID:'||CUSTOMER_ID AS LINK , cust_last_name || ', ' || cust_first_name AS TITLE , CUST_STREET_ADDRESS1 || decode(CUST_STREET_ADDRESS2, null, null, ', ' || CUST_STREET_ADDRESS2) AS BOLD_TEXT , cust_city ||', '|| cust_state ||', '|| cust_postal_code AS PLAIN_TEXT from demo_customers ORDER BY CUST_LAST_NAME, CUST_FIRST_NAME
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="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com"> <head> <title>#TITLE#</title> <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"> #HEAD# <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body #ONLOAD#> <div data-role="page"> #FORM_OPEN#
Page Template Body
<div data-role="header" data-backbtn="false"> <h1>#TITLE#</h1> #NAVIGATION_BAR# </div><!-- /header --> <div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div> <div data-role="content"> <ul data-role="listview"> #REGION_POSITION_01# #REGION_POSITION_02# #REGION_POSITION_03# #REGION_POSITION_04# #REGION_POSITION_05# #REGION_POSITION_06# #REGION_POSITION_07# </ul> #BOX_BODY# </div><!-- /content -->
Page Template Footer
<div data-role="footer"> <h4>#REGION_POSITION_08#</h4> </div><!-- /footer --> #FORM_CLOSE# </div> </body> </html>
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.
create a new Region Template
Create a new and empty Region Template and copy this code:
Region Template Definition
<div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#> <h2>#TITLE#</h2> <div data-role="controlgroup" data-type="horizontal">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE# #CREATE2##EXPAND##COPY##HELP#</div> <div> #BODY# </div> </div>
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
</ul>
After setting the new Template as Template for the List on Page 1 it instantly looks great.
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
<li> <a href="#LINK#" rel="external"> <h3>#TITLE#</h3> <p><strong>#BOLD_TEXT#</strong></p> <p>#PLAIN_TEXT#</p> </a> </li>
Report Template Before Rows
<ul data-role="listview">
Report Template After Rows
</ul>
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.
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
Good notes, it is very useful for mobile applications
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
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.
Thanks
Tauceef
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.
brgds,
Peter
Your weblink is offline .. I’ll try your code sameples .. thanks for sharing…
Daryl
The Demo is online again. My Server Provider had some issues…
Comes up blank in IE. although view source shows something is gettting passed. Perhaps its not meant to show in IE?
Alas it shows up just fine in firefox .. :-)
Well, this is a demo of an Oracle APEX Application enhanced for mobile devices.
It is meant to be shown on mobile devices ;-)
Doing a little testing on the playbook :-)
Hello Peter
Very nice guide :-)
I have a question to your demo at apex.oracle.com
How you style your form?
My form look crazy: http://www.gratisimage.dk/image-9ED9_4E9C883F.jpg
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
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: –
[IMG]http://i40.tinypic.com/2ajxf6o.jpg[/IMG]
Have you come across anything like this before?
Thanks,
Mike
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?
Thanks,
Mike
Mike,
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” .
Regarding the input items i created new plugins for HTML5 number/input types, see http://apexlib.oracleapex.info/plugins.html
Thanks Peter.
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?
Hi Tony,
the latest versions of jQuery mobile doesn’t set the viewport meta-tag, you need to include this one yourself. See Section “Viewport” in the JQM Documentation (Anatomy of a Page): http://jquerymobile.com/demos/1.0rc2/docs/pages/page-anatomy.html
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?
Cheers,
–Andy
Andy,
put that into a PL/SQL Process before Header and you should be fine. This setting influences APEX rendering of the developer toolbar.
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
Label
List
Label
List
Label
List
Not sure what this flag really does but it deosn’t seem to be documented.
Cheers,
Andy
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”
Is there a fix for the issue of Jesper? It seems that the templates do not t work for IE8 and Safari for the Maintain form. Check my site at http://81.206.120.151:8080/apex/f?p=114 un/pw= a/a
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 ?
regards
Pingback: Interesting jQuery Mobile Tutorials
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?
Thanks
RK
Hi !
Great article !
Is it possible to download this apex application ?
Regards Ola
Thank you Peter for taking the time to make this available. Can you share your template wizardry behind you Login page?
Jeff
Peter, disregard my last response; dumb question; I figured it out.
Jeff
Peter,
Thanks for your post.
From where I can download this application.
Sabir
Sabir,
The Application itself is not for download, but most of the things are described in the blog how i build them.
Peter,
I’ve build this application following your steps but still wanted to view your application. Anyhow thanks for your reply.
Sabir
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,
Abdel
Hi Abdel,
sure, don’t hesitate to contact me.
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?
Tnx,
Raoul
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).
Tnx Peter,
Turned it of for my forms. It really messes up the page.
But it works.
Raoul
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?
Raoul
(experimenting with mobile apex)
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;
regards,
Christian
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.
Hi Peter !
From my native Android app I am loading your example site se below
mWebView.loadUrl(“http://www.click-apex.at/apex/f?p=25425004:1”);
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
Hi Ola,
that sounds like a problem with session cookies. Are those activated?
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 :-)
Christian
Hi
this is my application http://apex.oracle.com/pls/apex/f?p=43575 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
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_STREET_ADDRESS1 || decode(CUST_STREET_ADDRESS2, null, null, ‘, ‘ || CUST_STREET_ADDRESS2) AS BOLD_TEXT,
cust_city ||’, ‘|| cust_state ||’, ‘|| cust_postal_code AS PLAIN_TEXT
from “#OWNER#”.”DEMO_CUSTOMERS”
ORDER BY CUST_LAST_NAME, CUST_FIRST_NAME
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
“#TITLE#
#BOLD_TEXT#
#PLAIN_TEXT#”
without the tags
Do you know the reason for that.
Thanks in advance
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.
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
Pingback: Oracle Apex - What´s next? | Daniel´s IT-Blog
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…
Thanks
Manoj
Great info!
I did download jQuery Mobile library file from “http://jquerymobile.com/download/” 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?
Thanks!
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: http://www.apex-outsource.com/i/javascript/apex_4_1.min.js
Line: 18
Please Help me!!..
Regards.