Creating a mobile app with APEX - Part 3: Adapting the layout

In this post the general layout of the application will be tweaked:

1. Another Theme Style will be chosen
2. The landing page for the application is changed
3. The menu will be replaced by a top/bottom menu bar. The menu will be adapted to the pages
4. The List View page is set as landing page
5. Unused space will be reclaimed
6. The page title will be shown in the top bar

Theme Style

We will select another Theme Style for the application:

• Run the application from the App Builder
• Select Theme Roller from the Developer Toolbar
• Select Vita - Slate for the Style
• Press the button Set as Current

Now we have other (darker) colors in our application. The dark grey top bar will enable us to use other colors as background in the application. The background color for the date picker region in the List View will be set in the post 'Refining List View'.

Landing page

The default landing page is Page 1. We created our Activity List on Page 10 and this should be the new landing page:

• Open the Shared Components > User Interface Attributes > User Interface > Desktop
• In the tab Attributes:
• Set Home URL to f?p=&APP_ID.:10:&SESSION.

Run the application and you are taken directly to page 10.

Menu

The default left menu is not so very useful for an smartphone app with limited pages. Therefore we will use a top/bottom menu bar:

• Open the Shared Components > User Interface Attributes > User Interface > Desktop
• In the tab Navigation Menu:
• Set Position to Top
• Select Top Navigation Tabs for List Template
• In Template Options set Mobile to Do not display labels
• 
  

With these changes the Left Menu is replaced by a menu bar. This bar is shown just below the top bar on desktop. On mobile it is displayed at the bottom of the screen.

With the last option the Menu Bar will only show icons, thus preserving vertical space. 

Menu items

Now we will add menu items:

• Go to Shared Components > Navigation Menu > Desktop Navigation Menu
• Delete the first menu item Home
• Open the option Activities:
• Set Image/Class to fa-home
• Create new List Entry:
• Image/Class: fa-plus
• List Entry Label: New Activity
• Target > Page: 15
• Target > Clear Cache: 15 Empty the page items for new record
• Conditions > Condition Type: Current Page = Expression 1
• Conditions > Expression 1: 10 Only show on page 10
• Create new List Entry:
• Image/Class: fa-save
• List Entry Label: Save
• Target > Target type: URL
• Target > URL Target: javascript:$('.save_button').click();
• Conditions > Condition Type: Current Page = Expression 1
• Conditions > Expression 1: 15 Only show on page 15

These menu options will be shown in the menu bar. Some options will only be shown on one page.
Run the application and observe the behavior of the menu bar. The Save action will be enabled when the Form page is refined. The Save option will execute the action connected to the button with the class save_button.

JavaScript and CSS

In following steps some JavaScript and CSS code is added. This code is wrapped in files which are loaded into the Static Files. Download the JavaScript and CSS file using the links and upload them to the Application Static Files in the Shared Components. Then create references to these files in order for the code to be available on all pages:

• Open the Shared Components > User Interface Attributes > User Interface > Desktop
• In the Tab JavaScript:
• Set File URLs to #APP_IMAGES#apex_mobile.js
• In the Tab Cascading Style Sheets:
• Set File URLs to #APP_IMAGES#apex_mobile.css

Reclaiming unused space

The Universal Theme regularly uses white space. On the desktop this avoids a clogged interface. 

On mobile however screen space is valuable and should be used as effective as possible.

Therefore we will reclaim unused screen space as much as possible. One of the possibilities is to 

remove the padding of the inner content of the body: 

.t-Body-contentInner { padding: 0; }

With this CSS we remove the white border around the regions. 

The CSS is included in the CSS file apex_mobile.css. As we have loaded this file in the last paragraph

the change is already active. 

In the next posts will reclaim more unused space using the Region Template Options.

Page title in Top Bar

Another space user is the Breadcrumb which is used to indicate which page is shown. This information can also be shown in the Top Bar. 

For this we need to apply some JavaScript. We will place the code in a Page Load Dynamic Action on the Global Page. This way the code will be executed on each page:

• Open page 0 (Global Page - Desktop)
• Goto Dynamic Actions The tab with the Lightning Icon in the Left Pane
• Left Click on Page Load and chose Create Dynamic Action
• For this Dynamic Action change the title to Page Load - General
• Change the True action New:
• Action: Execute JavaScript Code
• Code: TitleInTopbar();

The referenced code gets the page title from the page header and displays it in the Top Bar.