Last night Dallas meetup was so much fun .I had the chance to present on Angular + Bootstrap + Visualforce with sample code .
I am so glad it went really well and also provided me opportunity to connect with lot of local folks who are excited to be a part of Salesforce Community .
Quickly wanted to share the code sample that I presented at meetup .
A simple responsive page to add Account Card was built using bootstrap and JS remoting along with angular concept of using modules .
The Presentation is at slideshare so that if you missed my session you can go through the same .It covered basics of bootstrap and angular JS and then explained the code snippet of how to use angularJs in salesforce .
I am so glad it went really well and also provided me opportunity to connect with lot of local folks who are excited to be a part of Salesforce Community .
Quickly wanted to share the code sample that I presented at meetup .
A simple responsive page to add Account Card was built using bootstrap and JS remoting along with angular concept of using modules .
The Presentation is at slideshare so that if you missed my session you can go through the same .It covered basics of bootstrap and angular JS and then explained the code snippet of how to use angularJs in salesforce .
Dallas meetup session on Bootstrap + Angular + Visualforce from Mohitkumar Srivastav
The code samples I have shared on Github
Apex Controller
Visualforce Page
Hopefully this session was helpful .Please let me know how you feel about the whole session .ThanksThe code samples I have shared on Github
Apex Controller
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| global class MyAccCtrl{ | |
| @RemoteAction | |
| global static list<Account > myAccounts() { | |
| return [select id, name, Phone,Website from Account where Phone!=null Order By LastModifiedDate DESC LIMIT 50]; | |
| } | |
| } |
Visualforce Page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <apex:page controller="MyAccCtrl" showHeader="false" sidebar="false" standardStylesheets="false" docType="html-5.0"> | |
| <apex:stylesheet value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/> | |
| <apex:includeScript value="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"/> | |
| <apex:remoteObjects jsNamespace="RemoteObjectModel"> | |
| <apex:remoteObjectModel name="Account" jsShorthand="acc" fields="Name,Phone"></apex:remoteObjectModel> | |
| </apex:remoteObjects> | |
| <script> | |
| var app = angular.module("ngApp", []); | |
| app.controller("ContactCtrl", ["$scope", function($scope) { | |
| $scope.accs= []; | |
| $scope.getaccounts= function() { | |
| Visualforce.remoting.Manager.invokeAction( | |
| '{!$RemoteAction.MyAccCtrl.myAccounts}', | |
| function(result, event) { | |
| $scope.accs= result; | |
| $scope.$apply(); | |
| }); | |
| } | |
| $scope.addAccount = function() { | |
| var acctDetails = { Name: $scope.newname, Phone: $scope.newPhone}; | |
| // Call create() | |
| var accnew = new RemoteObjectModel.acc(acctDetails); | |
| accnew.create(); | |
| $scope.newname = ""; | |
| $scope.newPhone = ""; | |
| $scope.getaccounts(); | |
| } | |
| }]); | |
| </script> | |
| <div class="container" ng-app="ngApp" ng-controller="ContactCtrl" ng-init="getaccounts()"> | |
| <div class="page-header"> | |
| <h1> Angular + Bootstrap + Visualforce | |
| <small>Dallas Meet up</small> | |
| </h1> | |
| </div> | |
| <h2> | |
| Create New Account | |
| </h2> | |
| <p> | |
| <input ng-model="newname" size="15" placeholder="Type Account Name" class="form-control"/> | |
| <input ng-model="newPhone" size="15" placeholder="Enter Phone No" class="form-control"/><br /> | |
| <button ng-click="addAccount()" class="btn btn-primary btn-lg btn-block"> | |
| Add & Save New Account | |
| </button> | |
| </p> | |
| <div class="list-group" ng-repeat="acc in accs"> | |
| <a href="/{{acc.Id}}" target="_blank" class="list-group-item"> | |
| <h4 class="list-group-item-heading">{{acc.Name}}</h4> | |
| <p class="list-group-item-text">phone :{{acc.Phone}} | |
| <br/> | |
| {{acc.website}} | |
| </p> | |
| </a> | |
| </div> | |
| </div> | |
| </apex:page> |
