I finally can start on a new mobile Application, for the first time using Oracle APEX 4.2.1 for a productive mobile App.

All my other mobile Applications have been built with previous Versions of APEX and my self made themes.

So apologies for writing that blogpost so late. But better late than never, right?

If you already developed some mobile Apps with APEX 4.2 you might have found the offered functionalities and templates a good start, but still with room for improvement.

So here are my ideas, maybe one or two things are picked up by the APEX Dev team and included in 4.2.2

Review

The first thing i do when using new themes – and in this case its the mobile theme 50 – is reviewing the templates and checking the HTML-Code. For the mobile theme this is a pretty quick task, as there are only 30 templates (APEX Desktop themes come with around 75 templates).

The review showed me a couple things:

• the templates use 5 Swatches (as explained in this blogpost), which makes it hard to change colors and styles, but is totally ok
• there is a single Report template, but this one proves not well suited for mobile devices
• the Page template defines the meta-tag as webapp allowed (that lets you run a special mode without the browser itself) -> unfortunately that has some drawbacks on the iOS platform when using authentication
• List templates are inconsistent, as just some of them support icons and those use different methods (one uses the Image attribut, the other one A01)
• the Popup LOV template isn’t mobile friendly

Hm, yeah, enough reasons to dig in deeper and start improving the templates.

For now we don’t touch the Layout itself and the use of Swatches a-e and just take this for granted, otherwise we would have to change the used CSS as well and that would be too much for this post.

Report

Reports on a Smartphone screen are very tricky, because there is just not enough room to have many columns next to each other. So we have to think of someting different than a column oriented list layout and think of how we want to show the data to the customer and which parts of that are actually important to see in a Report (which is meant as overview, not as analysis Report).

The best method i found is using Listviews. “But hey”, you might say, “there is already a Listview component in APEX”. And you are right, instead of creating a Report you can create a Listview Component. The main difference here is that you have full control over your Report and Report Template, whereas you have only limited settings for the Listview Component and its appearance.

For me the biggest drawback in using the Listview Component is the Pagination. In a Report i have full control over Pagination and also can come back to the same Report Page later.

The Listview simply shows a “Load more” Link to fetch the next set of records, but adds them to the existing records. That means your screen grows longer and longer, which can easily cause problems on mobile devices as soon as you reach a couple hundred records.

Now we create a Template for a Report, that looks like a Listview and behaves like a Report. Fantastic, isn’t it?

At first we create a simple Template which only shows a single line per Record, after that we will use a more complex Layout.

Create a new Report Row Template named “Simple Listview” with the following Definitions:

Report Template Row Template 1

<li>
#1#
</li>

Report Template Before Rows

<ul data-role="listview">

Report Template After Rows

</ul>

The Placeholder #1# will be replaced by the first Column in your Report Query. When we create a Report and try that out it looks like this:

For the complex Layout create a new Report Row Template named “Complex Listview”.

Create a new Report Row Template named “Simple Listview” 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.

Alternatively you can use the numbered Placeholders #1#, #2#, #3# and so on to referer to the first, second, third column of your Report Query. Both ways work, to me the named Placeholders make it easier to get their meaning.

Lets change the Query of the Report to return those additional Columsn:

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

That makes our Report look much better, this way we can show as much data and style it as we want. This gives us even more control than the Advanced option of the Listview Component. Take a look at the jQuery mobile Documentation on Listviews to know what else you could add to the Report Template.

Enough for today, lets take a look at other improvements in the next Part of this Blogpost Series about mobile APEX Development.