You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Building Location-Aware Salesforce One Native Applications


By: Radha

Introduction

Salesforce Classic gives you mobile access to your Salesforce data, tasks calendar, and integrates the data with your email and mobile phone. Salesforce Classic downloads standard Salesforce objects such as Accounts, Contacts, Opportunities, Tasks, Events, and Leads and also Custom objects. You can also connect with your data when you are not online. Besides, you can search records that are not synced with the device and add them to your device. Salesforce Classic can be accessed based on the configuration you have in your salesforce account. Salesforce Classic will prompt you to set up a five-digit passcode when you first time log in from your mobile device, and this passcode is required for the subsequent logins. Salesforce Classic is built on classic user interface which does not include Chatter or other recent enhancements.

Salesforce Touch

Salesforce Touch is a HTML5-based version of Salesforce that is specifically designed for touch screen mobile devices. It provides access to most of our salesforce functionalities with certain limitations, and downloads all automatic updates and enhancements. Customer portal and partner portal users are not able to access the Salesforce Touch.

Salesforce1

Salesforce1 is used to connect with the customers in a whole new way. With this mobile development platform, developers can create mobile applications by leveraging the existing skill sets like declarative programming, Visualforce, JavaScript and HTML, and deploy the web applications instantly across any device. Most importantly, your innovative ideas can be transformed into a classic mobile-enabled enterprise application.

Advantages of Salesforce1

• Chatter publisher actions are provided in Salesforce1.
• We can slide the records to view the details and related objects.
• Compact layout is one of the main advantages of Salesforce1. Using this layout, we can view important details of the record at a glance.

mob1.PNG

Enabling Salesforce1

To enable Salesforce1 Go to Setup > Mobile Administration > Salesforce1, and select the ‘Enable the Salesforce1 mobile browser app’ checkmark, so the users can access the Salesforce1 mobile applications from their mobile phones.

mob2.png

Creating a Salesforce1 Application

In this article, we will walk you through how to create a map application using Salesforce1 to identify the nearby contacts in the map based on a selected location. For example, if the specified location is Oakland, when you run the application, the contacts live nearby Oakland are pointed out in the map. You can click on the map marker to view the contact details. If you click the name of the contact, you will view the record of that contact. For building any map features, first, we need to integrate Google Map with Salesforce application.

To create an application for Salesforce1, first you need to do create a Visualforce page with ‘Available for Salesforce Mobile Apps’ permission enabled as shown in the following image.

mob3.png

While creating an application for mobile, we should keep in mind a few UI design considerations. Normally, you develop an applcation in Salesforce for a Desktop or Laptop view, but the same view will not align or work properly when viewed in a mobile device So, we should use HTML5 and CSS3 to enhance the mobile compatibility for the application. Some of the supporting technologies for mobile development are BootstrapJS, AngularJS , and etc.

Bootstrap is a free collection of tools for creating websites and web applications. It can make your development easier and faster by providing the JS,CSS and IMG files. The Bootstrap includes three folders: CSS, JS, and IMG. For simplicity, add these to the root of your project. You can refer the website for downloading and using bootstrap in your web applications.

AngularJS is an opensource Javascript framework. It allows us to develop mobile supporting applications quickly and easily. It also prevents page reloading, and provides dynamic data binding to the view and rich user experience. You can vist the following website to further understand how AngularJS adds value to web development for mobile devices.

Coming back to the topic of Salesforce1 application creation, once you have created the Visualforce page, next create a Visualforce Tab for the Visualforce page you have developed. After creating the Visualforce tab, go to Setup > Mobile Administration > Mobile Navigation. Now, Select your VisualforceF tab that should be accessed from mobile. The following image shows how the tab is added to the mobile navigation menu.

mob4.png

Adding Google Maps support into the application

To use the Google map in our application, we can use the Gmap3. Gmap3 is a JQuery plugin for google maps, and requires both jQuery and Google Maps libraries. You need to include the Google Maps library as below:

<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"/> 

To integrate the google map with your application, include the following JavaScript file in your page:

<script type="text/javascript" src="/admin/gmap3.min.js"></script>

Once you have included all necessary libraries, you need to add a DIV target to display a map. Then, by using JQuery, you can display the map along with the geolocation, according to your application logic

<div id="gmap3" class="span5"></div>

One important thing about Google Map is that it needs a non-null height and width div values. So you need to define the “HEIGHT” and “WIDTH” of your div element either using JQuery or by CSS. Do not declare the width and height in the div tag itself. It’s a bad idea!

$("#gmap3").width("600px").height("350px").gmap3();

Make the application location aware

Once the google map support has been added to the applications, the gmap3 should have the CSS selector for the location your map needs to display. In our example, we are going to display contact details in a map according to their geolocation.

First, we send the Latitude and Longitude values to the controller to get back the result. Then, we need to write controller logic to get the list of contacts based on their location.

$('#gmap3').gmap3({
map: {
   options:{
           center: [position_coords_latitude , position_coords_longitude],
           zoom: 12
   }
 },
 marker:{   
           values:markerList,
           options:{
                  draggable: false
           },
           events:{
               click: function (marker, event, context) {
                         
               //Redirect to the Contact Info Page.
                var map2 = $(this).gmap3("get")    
                infowindow.setContent(context.data.htmltext); 
                infowindow.open(map2,marker);
                selectCity(context.data.index, true);                                        
         }
      }
   }
});

function selectCity(index, updateAccordion) {
$('#gmap3').gmap3({
    //Logic to get the location details
});
}

//Size of the popup that shows the contact details
var infowindow = new google.maps.InfoWindow(
{ 
     size: new google.maps.Size(150,50)
});

Using Geolocation and Distance API with Maps

Salesforce has introduced a new data type called ‘Geolocation’. This automatically allows us to store latitude and longitude of a location in our database. Also, it provides us with the Distance API to calculate the distance between set of origins and destinations within the geolocation.

Geolocation function is to be used along with the geolocation fields Latitude and Longitude. Please note that the Geolocation is a single field that has the two separate properties for Latitude and Longitude along with the field API name that ends with suffix “latitudes” or “longitudes” to the field name.

DISTANCE(geolocation__c, GEOLOCATION(37.775,-122.418), 'mi') 

The above formula calculates the distance between two geolocations in miles.

List<Contact> contacts = [Select Name, mailingcity, mailingstreet from contact 
                                            where 
  DISTANCE(geolocation__c, GEOLOCATION(37.95120,-122.32242), 'mi') < 20]; 

The above list will contain the contacts within the 20 miles of specified Latitude and Longitude. So that this list of Contacts can be sent to a page to display as markers and show the popup with the details of contacts.

To view more details about geolocation field with Distance API, please refer the following links:

help.salesforce.com , salesforce.com

Screenshots for the Steps to Run the Salesforce1 Application on IPhone

1) Download the Salesforce1 application to mobile phone through App Store. Click the application to login.mob5.PNG

2) Demo Map App will be in the ‘App’ section. Click it to view the map. The map is displayed along with the contacts shown in the marker.mob6.PNG

3) Green marker shows your current position and the red markers show the Contacts in the surrounding areas.mob7.PNG

4) If you click the name of a contact, for example ‘Lisa Tran’, it will go to the contact record as shown below. You can either edit or delete the record as per the object permission.mob8.PNG

Conclusion

Salesforce1 is a powerful mobile application development platform that allows developers quickly and easily develop mobile applications, and deploy them to any mobile devices instantly. It also enables Salesforce users to collaborate with their customers in an intuitive way, by improving the productivity of the users as well as the efficiency of the organizations that want to retain existing customers, increase employees’ productivity, and in turn increase their revenue.