Creating a Mobile App in Apex 5.0

Creating a Mobile App in Apex 5.0

Since the release of APEX 5.0 EA3 I’ve been looking into the updated mobile theme and what we can produce with it. In this blog I will show you how I created a small demo application on some test data in very little time.

First of all I created one of the new reflow reports based on my customers table, just to show a concatenated name field and the customer status. I also included a column link based on the customer ID and a search bar at the top. Font awesome wasn’t included by default, but I easily added it to my page and incorporated some icons to enhance the look of my app.

reflow_report-320

The reflow report is perfect for use on a mobile device as it arranges columns into a vertical list to avoid scrolling or having to rotate the device. The only issue I can see so far with the reflow report is the lack of pagination options, so if you want to report on a large data set it would be worthwhile implementing your own pagination.

Searching for a user returns the results quickly and the page submit and refresh looks smooth thanks to the in-built animations. Clicking an edit link passes the customer ID over to an edit form which allows me to alter customer details or delete them from the table.

edit_customer-320

If we make a change and save the customer, we are taken back to the report page with the previous search results. Clicking the menu button in the top left of the screen provides us with a navigation bar that contains our tabs.

navigation-320

Selecting the status chart option takes us to a simple chart that I implemented to show the number of customers in each status category.

chart-320

This was created using the page creation wizard and took me about a minute! I was quite surprised at the charting options available to mobile users, with a wide range of 2-D and 3-D charts available through the wizard in HTML5 or Flash format.

Navigating to the Calendar page shows another in-built feature of APEX 5 – a calendar based on a query. My calendar shows the quantity of all orders made on each date.

calendar-320calendar-month-view-320

 

We are shown a calendar view by default, which indicates any days with results. Clicking on a month allows us to drill down to a more detailed month view and from here we can select individual days to see the orders made each day. Clicking on an individual order displays a modal popup containing further order details.

edit_order-320

From here we can alter and save any order details or delete the order from the system.

From quickly experimenting with the new mobile theme, I have managed to create a professional, modern looking mobile application based on existing data in no time at all. I’m really excited about the opportunities that this could create – a lot of the complexity has been taken out of making an accompanying mobile app to go alongside a full application, and finally with the APEX 5 mobile theme it can stand up against apps made in other dedicated mobile frameworks.

 

Craig Sykes Contributor
Senior Oracle Development Consultant , Explorer UK Ltd

Craig is a Senior Development Consultant at Explorer. Craig has an MSc in Computing Science and is an experienced software engineer, utilising development tools such as PL/SQL and APEX to provide bespoke ERP software to both UK and international businesses. Craig has experience developing solutions to connect Oracle systems to a wide range of existing external applications within business environments.

follow me