AngularJS with Bootstrap for Salesforce1 Mobile App Visualforce Page
Author
November 29, 2015
AngularJS is a very popular JavaScript user interface (UI) libraries. It is used for data binding based on MVC pattern. If you need some CSS magic then I recommend using Bootstrap, a very popular CSS library.
Let’s go through the set of steps with sample code for the implementation of AngularJS with Bootstrap 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 <apex:page> tag and include AngularJS and Bootstrap libraries
See below a complete sample code.
<apex:page docType=”html-5.0″>
<apex:stylesheet value=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”/>
<apex:includeScript value=”//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”/>
<script>
angular.module(“ngApp”, []);
</script>
<style>
.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;}
</style>
<div class=”box” ng-app=”ngApp”>
<form>
<label>Name:</label>
<input type=”text” ng-model=”yourName” placeholder=”Enter a name here”/>
<h1>Hello {{yourName}}!</h1>
</form>
</div>
</apex:page>
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 new tab for Salesforce1 mobile App
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 click on Next button there too this will take you on final window Add to Custom Apps click on Save button.
The new tab will be visible on Visualforce Tabs page.
Step 4: Make your Visualforce page available for mobile
Go back on pages edit the Hello page you created, check the Check box 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 be appear so add from available field into selected field and then click on Save button now you are ready to check in your mobile device. Type login.salesforce.com 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.
Pranshu Goyal, Director of Products at Mirekta, states: “We envision DSM to be used by every small to a medium-sized organization dealing with bad data and want to get rid of duplicates easily with no cost. We have faced issues dealing with duplicates in our organization. That inspired us to make a solution that is not only simple to use but can be used widely to make the organization’s data clean to make them more efficient and productive. We want DSM to be a solution for every organization looking for duplicate management capability better than the Salesforce out-of-the-box solution with no additional cost.”
Recent Posts
-
Salesforce 2025 Game-Changing Trends You Need to Know28 Jan 2025 Blog
-
Agentforce 2.0: Everything You Need to Know About the Latest Update22 Jan 2025 Blog
-
The Ultimate Guide to NetSuite Development: Tools and Techniques10 Jan 2025 Blog
-
How Salesforce Nonprofit Cloud Transforms Fundraising Strategies10 Jan 2025 Blog
-
The Impact of Salesforce Development Partners on Small and Medium Businesses08 Jan 2025 Blog
-
Key Questions to Ask When Hiring a NetSuite Development Partner08 Jan 2025 Blog
-
Salesforce Agentforce Demystified: Your Essential Guide08 Jan 2025 Blog
-
Salesforce and NetSuite Integration: Driving Business Efficiency with Precision06 Jan 2025 Blog
-
Everest Group has positioned Mirketa as an Aspirant in the report24 Dec 2024 Press Release
-
Salesforce Einstein20 Dec 2024 E-Book
Categories
Featured by












Office Locations

11501 Dublin Blvd STE 200, Dublin, CA 94568, USA

B-4/5 First Floor, Sector- 63, Noida 201301, India
