AngularJS with Bootstrap for Salesforce1 Mobile App Development

AngularJS is a very popular JavaScript user interface (UI) libraries. It is used for data binding based on the MVC pattern. If you need some CSS magic then I recommend using the Bootstrap mobile app, a very popular CSS library.

salesforce 1 mobile app development

Let’s go through the set of steps with sample code for the implementation of AngularJS with Bootstrap mobile app on a Visualforce page.

Step 1: Create a new visualforce page

Setup (on top)> Develop (on left side menu)> Pages> new give page name in label field.


Step2: Add DocType=”html-5.0 under tag and include AngularJS and Bootstrap libraries

See below a complete sample code.

<apex:page docType=”html-5.0″>

<apex:stylesheet value=”//”/>

<apex:includeScript value=”//”/>


 angular.module(“ngApp”, []);



.box{width: 100%; margin:4% auto 0;}

.box input[type=text]{ padding: 10px 20px; border: solid 1px #ccc; font-size: 18px; color: #333;}

.box label{ font-size: 18px; color: #333;}

.box h1{ font-size: 18px; color: #333;}


<div class=”box” ng-app=”ngApp”>



<input type=”text” ng-model=”yourName” placeholder=”Enter a name here”/>

<h1>Hello {{yourName}}!</h1>




salesforce 1 mobile app development

Once you are done with the code, click on the save button to save it. After that you can see the preview by clicking on the preview button this will show a page (screen shot attached) start writing a name into text box. This will show Hello Amit together. We have Salesforce Visulaforce working page, let’s go for Salesforce1 mobile App in the next step.

Step 3: Create a new tab for Salesforce1 Mobile App Development

Click on Create> Tabs in the left side menu this will take you on Custom Tabs page select Visualforce Tabs and click on New Button this will take you on New Visualforce Tab page there you can select Visualforce page name from the drop-down menu, give the tab label name and click on Next button at the right side bottom, Now next window Add to Profiles will appear to click on Next button there too this will take you on final window Add to Custom Apps click on Save button.

Salesforce 1 developer guide

The new tab will be visible on the Visualforce Tabs page.

Step 4: Make your Visualforce page available for mobile

Go back on pages edit the Hello page you created, check the Checkbox Available for Salesforce mobile apps.

Step 5: Optimize your mobile app

One last step for Salesforce1 mobile optimization go to Mobile Administration (left side menu)> Click on Mobile Navigation, Now Navigation Menu Items screen will appear so add from the available field into a selected field and then click on Save button now you are ready to check in your mobile device. Type in your mobile browser and put your login credential, click on top left side hamburger menu scroll down little bit see the Test tab you have created click on that now you are good to go on final output.

bootstrap mobile app
salesforce1 mobile app development

Amit Tiwari

I am a senior front end developer at Mirketa Inc. I love converting great UX designs into great web and mobile interfaces. Ping me if you want to talk about anything on front end UI development - Cross browser scripting, CSS, multi-device CSS, Visualforce, JS -- you get the point. :)
Posted in salesforce development.

Leave a Reply

Your email address will not be published. Required fields are marked *