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, 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 **

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.

App Framework

Using CORE for app management

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