ABSI - far beyond system integration

On 01 April 2016     By Dinesh Wickramasinghe      Cloud , Salesforce

Developing mobile applications using your existing knowledge of HTML and Javascripts is an awesome experience in Salesforce platform. HTML5 is often used for mobile websites and mobile applications. It provides developers with tools such as Offline Web Storage, GeoLocation API, Canvas Drawing, CSS3, and many more.

There are several open source Javascript libraries available for web application development. Force.com platform is an ideal environment for next generation mobile application development. This blog gives you a step by step guide to warm up your existing SalesForce and web development knowledge to build a simple and robust mobile web application on Force.com platform using HTML5, JQuery Mobile.

What should I know?

To continue this tutorial, you should have a basic knowledge about Force.com platform, HTML and JavaScripts.

Which JavaScript Library should I choose?

As I mentioned earlier, there are several Javascript libraries such as JQuery mobile, AngularJS, BackboneJS, KnockoutJS which are freely available to develop HTML5 mobile applications. In this demo, I will use JQuery mobile with VisualForce to build a simple mobile web application.

JQuery Mobile

jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices. This framework provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions.
jQuery mobile has following advantages.

  • Wide browser and device coverage.
  • Touch-friendly form inputs and UI widgets.
  • Responsive web design ready.
  • Layout and theming engine.
  • Ajax page navigation model.

What are we going to build?

In this tutorial, we are going to build a simple mobile application which helps you to manage employee details. You should have a Salesforce organization to continue with this tutorial. It is easy, you can create a Salesforce developer organization totally free.

Here are some screenshots of the completed application.

Mobile Dev 1

As I mentioned earlier, to continue with this tutorial, you should have a basic knowledge of SalesForce development environment. Knowledge of jQuery mobile will be an added advantage.

I have written this tutorial as a step by step guide and you can follow the steps while developing.

Creating a Custom object and Custom Fields

Step 1 - Creating the Employee Custom object

Click the setup link on the top right corner of your Salesforce developer environment to proceed to the setup area.

Mobile Dev 2

Step 2 - Click on Objects link to create a new custom object

Mobile Dev 3

Step 3 - Provide the details as on the below screenshot to create Employee custom object

Mobile Dev 4

Step 4 - Add three custom fields to the Employee custom object as on the screenshot below

(Make sure to set the First Name and Last Name fields as required fields)

Mobile Dev 5

You can learn more about custom fields and custom objects watching this tutorial.

Creating a VisualForce page and installing Mobile Pack for jQuery Mobile into your development environment

Step 1 - Install the Mobile Pack for jQuery Mobile

In this step, we are going to install the Mobile Pack for jQuery mobile. This package contains all the CSS files, images and JS libraries used in the tutorial.

Install the package.

(Sometimes, you may need to provide username and password of your developer account again)

Click the option 'install' for all users and click the install button. See the screenshot below.

Mobile Dev 6

Click the done button once the installation completed.

Mobile Dev 7

Step 2 - Creating a new VisualForce page

Click Visualforce Pages from the develop menu.

Mobile Dev 8

Create the page like on the screenshot below.

Mobile Dev 9

Adding Required Libraries and Components

Now we are ready to do the interesting part of this tutorial. let’s complete the source code of our application. We are going to step by step change the code of our newly created VisualForce page.

Step 1 - Changing the page definition

Change the page tag of your visualforce as below code. This code will enable HTML5 and reference the custom object Employee. And also this will disable the default header and sidebar of the VisualForce page.

Step 2 - Adding required libraries and components

Add the references for below set of Javascript libraries and css files to your page.

Add the below meta tag to set the page width as the device width.

Add head and Body tags to your page and remove the default contents of your page.

Now the code of your VisualForce page should looks like the screenshot below.

Mobile Dev 10

Step 3 - Adding RemoteTK Component

This step is very important. We are going to add a VisualForce component to our VisualForce page. This component is already added to your developer environment while you installed the Mobile Pack for jQuery Mobile.

RemoteTK is a variation of the ForceTK library that provides a JavaScript abstraction very similar to the REST API, but without consuming API calls.

Here you can find the GitHub URL for ForceTK library.

The RemoteTK library implements all the REST API resources (e.g. query, insert, update, upsert etc.) in an Apex class and then exposing them via JavaScript Remoting. This is available as a simple Visualforce Component and developers can include this component in VisualForce page and make calls in JavaScript code.

Add the code below right after the meta tag line of your code.

This line of code will add the RemoteTK VisualForce component to your VisualForce page.

Adding the first User Interface of the page

When the user logs in to the mobile application, it will load a list of all the employees available in the system as on the screenshot below. Now we are going to add the code for this interface.

Mobile Dev 11

Step 1 - Adding the front end code for Employee names list

Add the below code snippet to the body of your VisualForce page.

Save and click the preview button to see how your page looks like.

Step 2 - Adding the JavaScript functionality to load Employee details

In this step, we are going to add some JavaScript functions to execute a SOQL query and load employee details to the first screen our mobile application. We will add JavaScript functions step by step.

First of all add the script tag just after the RemoteTK reference.

Then we will add JavaScript code snippets one by one inside this script tag.

Ok, first add the below lines of codes. Please read the comment to get an idea what the code does.

Now let’s add the familiar JQuery page load function and inside this function, add a method call as ‘getAllEmployees()’, Next we will complete this function.

The next task is to write a JavaScript function to load Employee details. Let’s write this function. Please note that we are going to execute a SOQL query inside this function to retrieve employee details. (SOQL - SalesForce Object Query Language) Here is the function.

You can see, we’ve called another function named ‘showEmployees’ inside the above function. This function is used to display the employee details on the HTML segment that we added on Step 1, using the data we’ve already retrieved. Now let’s complete ‘showEmployees’ function.

Well Done! You’ve successfully completed the first part of our Employee Data mobile application. Click the Preview button to view the page.

Mobile Dev 12

If you’ve successfully followed the above steps, you will see the employee details loaded into the mobile interface as on the screenshot below. (If you have no data on the Employee custom object, add some dummy data first.)

Mobile Dev 13

Adding Add, Edit Functions and Complete the Application

The second step of this tutorial is to add a new interface to add new employees and edit existing employee details.

As I mentioned earlier, using JQuery mobile, we can create touch friendly user interfaces. Now let’s add the HTML code of the second user interface.

When the user touch on an employee name from the first screen, then it will load the second interface with a nice flip animation and load the selected employee data into second interface.

The screenshot below shows the flip animation.

Mobile Dev 14

Please add the below HTML code snippet just after the first div section of your page.

Now we need to complete the JavaScript functions to add the functionality of the newly added HTML code.

First, replace your ‘showEmployees’’ method with below set of code.

This code will load data into the second user interface to update and delete existing employee details.

Also we need to add JavaScript functions for Add, Update, Delete functions and for button click event handlers.

Please add below JavaScript functions to your code to complete the application.

To display possible error messages, add below line (bold line) just after the Employees variable.

And also make sure you call the regBtnClickHandlers() method on page load. See the below code.

Now you are done with your application. Preview the VisualForce page to see the completed application.

Mobile Dev 15

You can perform below functions using this mobile application.

  • Add new employees.
  • View all employees.
  • Search employees.
  • Update existing employee details.
  • Delete employees.

Conclusion

This tutorial is a quick demo of developing mobile web applications using HTML5, JQuery Mobile and SalesForce RemoteTK library. We didn’t go deep into the code explanations since it will go beyond the scope of this post. You can search and learn more about codes we’ve used in this demo.

You can learn more about mobile application development on the Salesforce platform.

You can also find a good Trailhead about “Build Cordova-based hybrid mobile apps using HTML5 and Salesforce Mobile SDK”.