Creating a mobile app with APEX - Part 1: Introduction and design

Coming back from my 5 month sabbatical in South East Asia I am refreshed and ready to resume blogging ;-). 

The first task is have assigned to myself is to write a series of blogposts about mobile development with APEX 18.1 (and up). Since this version support for mobile applications is included in the Universal Theme which makes it even easier to develop small screen applications.

I have a number of personal productivity apps like registering expenses and keeping track of working hours. These apps are (of course) built using APEX and targeted for large screen/keyboard use. 

In a series of blogposts I will describe the process of building a client smartphone app for an existing time registration application. 

The report and data entry screen for the desktop app is shown below:

I want to have access this data also on my phone. I also want to enter a new activity or change existing activities.

The desktop pages are not suitable for use on a smartphone. They take up to much screen space or when zoomed the text is too small and the text boxes can not be handled. 

I want to have access this data also on my phone. I also want to enter a new activity or change existing activities.

The design of forms and especially reports needs to take into account the small size of the screen. I have the need to have an overview of activities and a form page to enter or edit an activity. 

Using the mockup tool Balsamiq the layout of the pages is created:

The Activities page will serve as the Home page. It shows a list of all the activities for one week. The activities are grouped by day, ordered by time. The days are ordered descending, meaning the most recent day is shown on top.  

The date picker at the top of the screen is default set to today. Another week can be accessed by changing the date by entering another date, using the date picker or the arrows to move to the previous or next week. 

Each activity is shown as a list item with project name and location as main text and time and description as details. 

The Activity page can be used to enter a new activity or update an existing one. 

The projects can be chosen from a list. 

The date can be entered using the date picker. 

The time fields can be entered using the format HH24:MI. 

The location will be implemented with Autocomplete functionality. 

Coming blog posts in this series

1. Introduction and design
2. The basic app
3. Refining the layout
4. Refining the List View
5. Refining the Form
6. How to prevent auto-zoom on iOS
7. Input and processing of time items
8. Autologin
9. Create app icon on smartphone
10. Using your GPS location