Implementing Recent Search History in your Appcelerator apps

One of my favorite app features is Google Maps Recent History. This subtle feature shows up in the desktop browser as well on all my mobile devices. When I click in the search field to enter a search term, a list of recently found locations is displayed below the search field (see screenshot below).

This is convenient as I often look up the same locations.

But, what makes this feature really great is that when I am in my car and bring up the Google Maps app on my phone, the same list is displayed (see screenshot below). In other words, a search on any device (desktop browser, iPhone or android), shows up on all my devices!

Having a list of recently searched items is crucial on my phone since typing on the small screen is tedious.

So, now, if I know I will be away from my desktop computer and will need to lookup Google Maps locations on my phone, I will first look them up on my desktop browser, knowing that when I get to my phone all those searches will be displayed. Then I can get directions and use my phone as a navigation device.

The Appcelerator MBaaS/ACS enables me to add this powerful feature to any application. Imagine if you can enable search history synced across your employee’s devices for your CRM or Field Service Application without the need to add this feature in your back end applications, which might not even be possible. This post will describe how easy this is to achieve with the Appcelerator MBaaS without any back end changes required at all.

Appcelerator MBaaS/ACS

The Appcelerator MBaaS contains a set of predefined services, known as ACS – Appcelerator Cloud Services, that includes over 20 services such as file storage, photo storage, Push Notification, Checkins, Likes, Reviews and Custom Objects. The full list of services are described here.

In order to implement the Recent History feature described above, we can leverage the CustomObject service. The CustomObject service lets you define your own object types with arbitrary fields and is described in detail here.

So, the basic idea is as follows:

• When the app starts, retrieve the list of prior searches from the CustomObject and store in a local array
• When the user clicks in the search field, display the list of prior searches from the local array
• If the user types some text and performs a search, store the selected search item in the CustomObject and update the array

Note that as in the case of Google Maps, in order for the search to be synchronized across devices the user must be logged in with the same account. In the case of the Appcelerator MBaaS, the Users service is used to log in a user to the Appcelerator MBaaS. This service is described here. The Enterprise login username can be used to log in the user to the Appcelerator MBaaS so the user does not require a separate login UI and credentials.

Initialize Local Array

As described above, the first step is that when the app starts and after the user is logged into the MBaaS, to retrieve the Search History and initialize the local array. The following code snipet accomplishes this and is shown below. The CustomObject in this example is called “history” and we are requesting the last 5 items from the history.

var historyRows =[];
//
function readHistory() {
    //
    Cloud.Objects.query({classname:"history", page: 1, per_page: 5, where: {user_id: userID}}, function(e){
        if(e.history.length>0){
            _.each(e.history, function(item) {
                historyRows.push({Name: item.Name, Symbol: item.Symbol});
            }
        }
    });
}

Display Search History

You now have the search history that can be loaded into a ListView or a TableView. For example, the following screenshot shows the search history (displayed in red) along with the search results (displayed in black) when the user enters ‘G’ in the search field.

Append to the Search History

The last step is to append new searches to the search history. In this example, when the user selects an entry in the search results that is not from the search history, we will add it to the search history. This is illustrated in the following code snipet:

$.companyTV.addEventListener('click', function(e) {
    //update search history
        if(!e.row.history) {
            Cloud.Objects.create({
                classname: 'history',
                fields: {
                    Name:  e.row.name,
                    Symbol:  e.row.symbol
                }
            }, function(e) {
                if (e.success) {
                    readHistory(); // get updated search history
                }
            });
        }
    // Do something with data from clicked row
});

 
In the screen shot below, you can see the recent search history displayed when the user clicks on the search field. You can also see the data synched between the iPhone and Android devices.

By leveraging the Appcelerator MBaaS pre-built services such as Users and CustomObjects, you can add a very powerful Recent History feature to any application such as a CRM app or a Field Service application. By adding a recent history feature to your app, your users will find it much easier to use the app and increase their productivity with the mobile app.

The code from this post can be downloaded here.