Creating a mobile app with APEX - Part 4: Refining the List View

After having taken care of the general layout this post will focus on the refining of the List View page. The following actions will be performed:

• loading a new version of the CSS file
• adding a date picker to filter the activities
• changing the List View query to react on the date picker
• adding a Dynamic Action to synchronize the List View
• optimizing screen space
• removing the create button
• applying advanced formatting on the List View elements

Loading new version CSS

A new version of the apex_mobile.css file should be downloaded here and uploaded to the Application Static Files.

Adding the date picker

We will create a new region and add a date picker item. The background color of the date picker region will be green. 

• open Page 10
• right click on Content Body and select Create Region
• change the region:
• Name: Parameters
• Appearance > Template Options:
• check Remove Body Padding
• set Header to Hidden
• Advanced > Static ID: parameters this will style the region
• drag this region above the Activities region
• right click on the region Parameters and chose Create Page Item
• make the following changes to the new item:
• Name: P10_DATE
• Type: Date Picker
• Label: Date in week
• Default:
• Type: PL/SQL Expression
• PL/SQL Expression: sysdate
• Warn on unsaved changes: Ignore Prevent warning when leaving page

Changing the List View query

The source query of the List View should be changed to reflect the values of the date item. 

Add the following where-clause to the query:

from   ttm_activities_vw     act

where  trunc(act_start_date,'iw') = trunc(to_date(:P10_DATE,'dd-mm-yyyy'),'iw')

order by trunc(act_start_date) desc, act_start_time

With this where clause only activities in the same week as P10_DATE are shown.

Dynamic Action to synchronize List View

When at this point the date is changed there is no effect on the List View.
We will need to define this behavior with a dynamic action:

• Right click on the item P10_DATE
• Pick Create Dynamic Action
• Change the Name of the DA to P10_DATE change
• Change the first True Step:
• Action: Execute PL/SQL Code
• PL/SQL Code: null;
• Items to Submit: P10_DATE this is needed to load the value into session state
• Right click on this step and chose Create Action
• Change the new action:
• Action: Refresh
• Affected Elements > Selection Type: Region
• Affected Elements > Region: Activities

Now a change of the date item results in a requery of the Activities region.

Optimizing screen space

There still is some screen space that is not used effectively. We do not need the region title as it shows in the Top Bar. The Create button can be deleted as this function is provided in the Menu Bar. And there still is excess of white space...

So let's get going:

• Open the region Activities:
• Edit Template Defaults:
• Check Remove Body Padding
• Set Header to Hidden
• Set Style to Remove borders
• Edit the region's Attributes
• Uncheck Settings > Inset List 
• Delete the Create button

You can clearly see the difference between the page now and before:

Even though the date item has been added the vertical space taken up by the List View is less than before.

Advanced formatting

In the design in Part 1 of this series we have defined that the List View elements should have a colored bar left of the text. 

Also the Location should be part of the information shown, behind the Project name. But location is not as important as the Project, so we need to decrease the emphasis on Location, or increase it on Project. 

Increasing emphasis can be done by using Bold text, decreasing can be accomplished by a lighter font color, usually a grey tone or a smaller font size.

To apply this on one line we need to use Advanced Formatting within List View.

The base query for the List View has to change because we need separate elements which were combined in the previous view:

select act.act_id
     , to_char(act_start_date,'fmDay, fmMonth fmddth yyyy ')    
                                     as  start_date
     , act_prj_name                  as  project_name
     , case act_prj_id
           when 1 then 'cornflowerblue'
           when 2 then 'green'
           when 3 then 'yellow'
       end                           as  project_color
     , act_location                  as  location
     , act_start_time
       || ' - ' ||act_end_time       as  period
     , act_description               as  description
from   ttm_activities_vw     act
where  trunc(act_start_date,'iw') = trunc(to_date(:P10_DATE,'dd-mm-yyyy'),'iw')
order by trunc(act_start_date) desc, act_start_time

To apply the advanced formatting:

• Open the Activities region
• Apply the new query
• Go to Attributes
• In Settings:
• check Advanced Formatting You see that the available items change
• Fill in the values from the table below:

List Entry Attributes	style="margin-left:15px; border-left:5px solid &PROJECT_COLOR."
Text Formatting	<span>&PROJECT_NAME.</span> <span style="color:#999999; font-size:12px;">&LOCATION.</span>
Supplemental Information Formatting	<span style="font-size:13px;color:rgba(0,0,0,.75);">&PERIOD.</span> <span>&DESCRIPTION.</span>

The columns from the query are referenced by name preceeded by an ampersand and with a trailing dot, like &PROJECT_NAME.. For clarity the styling is done in-line, normally you would CSS classes. 
When running the application you can notice the difference between the various parts of the List View elements.
The colored bar is created by the List Entry Attributes. Note that you can also reference query columns here.

The List Divider has been styled. In order to provide more contrast with the elements it has received a white font on a dark grey background. This is done by applying CSS in the apex_mobile.css file:

li.a-ListView-divider.ui-bar-inherit {
    background-color: rgba(0,0,0,.55);
    color: white;
}

The Universal Theme classes are used to reference the List Divider. 

The List View page now looks and functions according to the specifications:

In the next Episode we will refine the Form page.