What should I know?
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.
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.
Step 2 - Click on Objects link to create a new custom object
Step 3 - Provide the details as on the below screenshot to create Employee custom object
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)
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.
Click the done button once the installation completed.
Step 2 - Creating a new VisualForce page
Click Visualforce Pages from the develop menu.
Create the page like on the screenshot below.
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 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.
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.
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.
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.
First of all add the script tag just after the RemoteTK reference.
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.
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.
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.)
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.
Please add the below HTML code snippet just after the first div section of your page.
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.
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.
You can perform below functions using this mobile application.
- Add new employees.
- View all employees.
- Search employees.
- Update existing employee details. Delete employees.
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”.