Home

Corporate Directory Mobile Application for iOS and Android

Working with as many customers as we do here at Appcelerator, we consistently see companies starting their journey into mobility by building internal applications to help their employees get access to information, or increase productivity.

One of the most popular use cases is the Corporate Directory. As it turns out getting access to the up to date corporate contact list isn't as easy as it may seem. Sure you can sync your phone with Microsoft Exchange, but the local contacts application isn't always the easiest to use. Plus if your leveraging 3rd party email clients and calendar applications it can be even more of a problem. These applications can become even more valuable utilities as well as you can start to tie in additional capabilities such as Push Notificaitons, Geolocation based features and many more.

This example application, is designed to help teach some of the basics of mobile application development with Appcelerator Titanium and the Alloy MVC Framework, while also acting as useful template for starting your own directory project.

Features & Design

Every mobile app starts off with a good design. For this project, I set out with a few key goals in mind that would help define and regulate the scope of the project.

• This is a corporate directory app, so first and formost I should be able to get acces to employee information, and do something productive with that information
• The app will be cross platform, and I want to make sure to leverage a platform specific features.
• The design should be simple and intuitive

With the above goals in mind, I started work on coming up with a basic feature list and screen outline.

Screen 1 - Directory List

The main screen of the application is the Directory listing. The Directory will provide a complete list of the employees in a easy to navigate, searchable list.

** SHOW PICTURE OF iOS / ANDROID SCREEN **

Its important to note that this view is also repurposed for the Bookmarks view as the UI is exactly the same, it just shows limited contacts.

Key Features

• Navigation / Action Bar

• Directory List Scrollable list of all employees, grouped into appropriate sections

• Search Bar Allows the user to easily search through the directory

• Bookmark Button Accesses the Bookmarks View

As mentioned above, I wanted to make sure that we were leveraging platform specific design / behavior best practices so we took that into consideration for this screen.

• NavigationWindow - The standard controller for master detail applications on iOS

• List Index - This is a feature of iOS to allow quickly search through a TableView or ListView. In iOS 7, they updated the UI for this, and in my opinion, not for the better. So while i implemented the feature, i hide it by default and allow a swipe on the list to enable it.

** SHOW ANIMATED GIF FOR ACCESSING THE DIRECTORY INDEX **

• Bookmark Button - The search bar for iOS has a prebuilt feature for accessing bookmarks, so we leveraged this capability

** SHOW PICTURE OF THE SEARCHBAR FOR IOS **

• ActionBar - The standard UI for Android Applications Titles and Menus

• Bookmark Button - For Android, this is typically a behavior that would exist within the Action Bar as a menu item, so I went ahead with that pattern.

We'll see how these were implemented when we actually talk about the application Architecture and pages in the next section.

Screen 2 - Profile View

The second screen focuses on providing the user with the inforamtion associated with the contact as well as additional capability to email or call the contact directly from the application, as well as to bookmark the contact directly.

The challenge here is how to display a large amount of information on a small screen, while still providing an appealing UI and still display all the information. We want the user to have ready access on the most important information immediately, but they shouldn't have to navigate to secondary screens to get access to the rest of the information.

** SHOW ANIMTED GIF OF PROFILE SCREEN - SWIPING SCROLLABLE VIEW **

To solve the problem above for this app, I elected to take advantage of a ScrollableView to hold all of the majority of information, making it easy for the key functions (call, email, bookmark) to remain visible, while allowing the user to easily swipe to get access to the information.

Key Features

• Profile Picture - Image of the Contact based on information provided by the data source

• Email Contact - UI element to open and send an email to the contact

• Call Contact - UI element to call the contact directly

• Add As Bookmark - button to add that contact to your bookmarks list

• Information Viewer

  • Contact Information - displays most important information about the contact (e.g. Phone Number email, IM etc)

  • About - A text area for displaying notes

  • Location Map - Displays the contacts location on the map

  For this app, we're leveraging the latest Map Module from Appcelerator. This allows us to have access to Google's latest version of Maps on the Android operating systems. See the documentation on Appcelerator's website for leveraging Google Maps v2 on Android

App Framework

So lets get started with

Core

Navigation Strategies

iOS

NavigationWindow

Android

Action Bar & Menu

Styles & Themes

Global Styles

About Alloy Bootstrap

Android Themes

Icon Fonts

The Directory List

Getting the Data

Local Storage vs Remote Data Sources

Setup the Listview

The XML Tree

Adding Logic

Making it pretty

Adding Search