Dallas MeetUp -May 27

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 .

Dallas meetup session  on Bootstrap + Angular + Visualforce from Mohitkumar Srivastav

The code samples I have shared on Github

Apex Controller

	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];
	}
	}

view raw MyAccCtrl hosted with ❤ by GitHub

Visualforce Page

	<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"/>&nbsp;
	<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 &amp; 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>

view raw AngularAccounts hosted with ❤ by GitHub

Hopefully this session was helpful .Please let me know how you feel about the whole session .Thanks