Angular JS & SObject Remote : Part 2 Updating Data from Page #NoControllers

Monday, June 22, 2015

So finally the Part 2 of the #NoController series , In this part we will try to update the records that were retrieved from the Salesforce using SObject Remote.

If you haven't gone through the Part 1 of this , you can have a look here

http://blogforce9.blogspot.in/2015/04/angular-js-sobject-remote-part-1.html

Updating Records

• Will be using update method of sObject Remote
• Records will be updated as soon as the input elements losses focus (blur)

	<apex:page >
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"/>
	<c:sObjectRemote />
	<script>
	var vfApp = angular.module('vfApp',[]);
	vfApp.controller('vfappController',function($scope){
	$scope.accounts = []
	$scope.getAccounts = function(){
	sObject.query('SELECT Id,Name,Site,Type,Phone FROM Account LIMIT 100',function(result){
	$scope.accounts = result;
	$scope.$apply();
	})
	}
	$scope.update = function(a){
	/*remove angular added properties e.g. $$hashKey*/
	var temp = angular.copy(a);
	sObject.update(temp,function(result,event){
	if(!event.status){
	alert("Update Failed!");
	}
	});
	}
	$scope.getAccounts();
	});
	</script>
	<div ng-app="vfApp" ng-controller="vfappController">
	<apex:sectionHeader title="AngularJS" subtitle="AngularJS & SObject Remote #2 Update Records"/>
	<apex:pageBlock >
	<!-- Borrow some styling from Pageblock table -->
	<table class="list" border="0" cellpadding="0" cellspacing="0" id="contactsTable">
	<thead class="rich-table-thead">
	<tr class="headerRow ">
	<th class="headerRow">Name</th>
	<th class="headerRow">Site</th>
	<th class="headerRow">Type</th>
	<th class="headerRow">Phone</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="a in accounts" class="dataRow" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}">
	<td class="dataCell">
	<input type="text" ng-model="a.Name" ng-blur="update(a)"/>
	</td>
	<td class="dataCell">
	<input type="text" ng-model="a.Site" ng-blur="update(a)"/>
	</td>
	<td class="dataCell">
	<input type="text" ng-model="a.Type" ng-blur="update(a)"/>
	</td>
	<td class="dataCell">
	<input type="tel" ng-model="a.Phone" ng-blur="update(a)"/>
	</td>
	</tr>
	</tbody>
	</table>
	</apex:pageBlock>
	</div>
	</apex:page>

view raw VFAngularSRemoteUpdate.page hosted with ❤ by GitHub

After all this was not that complicated :-)

Demo : https://blogforce9dev-developer-edition.ap1.force.com/VFAngularSRemoteUpdate