Creating a mobile app with APEX - Part 5: Refining the Form page

After refining the List View now the form will be improved for mobile use:

• screen space usage will be optimized
• the buttons will be reorganized
• default values will be provided
• success messages will be made to disappear after a few seconds
• validations for time items are created

Bugfix for trigger

There was an error in the original trigger on the view. Download a new create script here and run the script to replace the trigger.

Screen space optimization

The previous actions to improve the use of screen space also have effect on the form page. The only thing that remains to be done here is to hide the region title:

• Open region Activity
• Hide header by settting Appearance > Template Defaults > Header to Hidden

Buttons

For this step a new version of the CSS file is needed. Download apex_mobile.css and upload to the Application Static Files.

Below the form are three buttons, the Cancel, Delete and Create/Apply Changes button. 

The Cancel button is not needed because the List View can be reached using the Menu Bar. So this button can be Deleted.

• delete the Cancel button

The Create/Apply Changes button will be replaced by the Save action in the Menu Bar. The CREATE and SAVE buttons are mutually exclusive. The CREATE button is shown for a new rows, the SAVE button for existing rows. 
The connect the Menu Bar Save action to the buttons a CSS save_button class is applied:

• select the SAVE button
• set Appearance > CSS Classes to save_button
• select the CREATE button
• set Appearance > CSS Classes to save_button

The action on Menu Option Save is defined as: javascript:$('.save_button').click();

This means that the element with class save_button is selected and the click action associated with this element is performed. This way either the SAVE or the CREATE button action is executed depending on which one is present on the page. 

So only the Delete button remains. This buttons will be styled in a more mobile fashion:

• select DELETE button
• change Layout > Button Position to Below Region
• set Appearance > Template Options:
• Size: Large
• Type: Danger White font on red background
• Width: Stretch Makes button use full width
• set Appearance > CSS Classes: delete_button

Run the application and notice the changes. Save a new or existing activity using the Menu Bar Save option. 

Default values

Entering data on the on-screen keyboard is not easy or fast, so it is an advantage when data is prefilled. We will provide some defaults for the items.

We will use functions from the package ttm_alg. For this functionality a new version of the package ttm_alg is needed. Download the create file ttm_alg.sql and execute this file on the schema.

The first one is the date. The obvious default for this is the current date:

• open P15_ACT_START_DATE
• in the Default section:
• Type : PL/SQL Expression
• PL/SQL Expression: sysdate

The Project of the last entered Activity can serve as default value for Project:

• open P15_ACT_PRJ_ID
• in the Default section:
• Type : PL/SQL Expression
• PL/SQL Function Body: ttm_alg.last_used_project

The Start time can be filled with the last End time of today, or a default value like 9:00 if this is your usual starting time. 

• open P15_ACT_START_TIME
• in the Default section:
• Type : PL/SQL Expression
• PL/SQL Function Body: ttm_alg.default_start_time

Run the application and enter a new activity. 

We will review the possibility to use the GPS location to determine a default value for Location in a coming post. 

Success message

Standard the APEX success messages that are displayed at the top of the page must be removed manually. On mobile this is not logical. The success message indicates that there were no errors so after a short time the message can disappear.  

For this function a new version of apex_mobile.js must be uploaded to the Application Static Files. After this:

• open Page 10
• add to JavaScript > Execute when Page loads: set_success_message_fade();

Now if an activity is created or changed the success message will show for 2 seconds and then disappear.

Checking input

Of course the user input has to be checked.

The date value will be checked automatically.
Because the project is implemented as a select list it need not be checked.
The Description and Location are character items and need not be checked.

That leaves us both the Time items. They should be filled with a string in the form hh24:mi. Furthermore the End Time should be after the Start Time.

After this the validations can be created:

• Open the Processing column on page 15
• Right click on Validating > Validations and select Create Validation
• Change the Validation:
• Name: Check start time
• Validation > Type: PL/SQL Function (returning Error Text)
• Validation > PL/SQL Function returning Error Text: 
• return(ttm_alg.check_time(:P15_ACT_START_TIME,'Start time'));
• Right click again on Validating > Validations and select Create Validation
• Change the Validation:
• Name: Check end time
• Validation > Type: PL/SQL Function (returning Error Text)
• Validation > PL/SQL Function returning Error Text: 
• return(ttm_alg.check_time(:P15_ACT_END_TIME,'Start time'));
• Right click another time on Validating > Validations and select Create Validation
• Name: Check Start Time before End Time
• Validation > Type: PL/SQL Function (returning Error Text)
• Validation > PL/SQL Function returning Error Text: 

begin if ttm_alg.time2date(sysdate,:P15_ACT_START_TIME) > ttm_alg.time2date(sysdate,:P15_ACT_END_TIME) then return('Start time "'||:P15_ACT_START_TIME ||'" must be before End time "'||:P15_ACT_END_TIME||'".'); end if; return(null); exception when others then null; end;

Now the format of the time items and the relation between start and end time are checked. If an invalid value is entered on a meaningful error message is displayed.