AngularJs with Visualforce Page and Remoting – Part 2

Content of the blog

We have seen in Part 1 how to set up AngularJS into VF page and also how to fetch records and display them in a table. In this concluding part I will show you how to add and delete a record from the page as well as from the server (SFDC).

How to delete a record

Added an extra column in the table, in which onclick I am passing the account Id and the index of the table – $index. $index is a standard ng-table variable which gives the current table row index

<td><img src="/img/func_icons/remove12_on.gif" ng-click="deleteAccount(account.Id,$index)" style="cursor:pointer;" /> </td>

In the factory we have to pass an additional parameter which will be the account Id

myapp.factory('DELETE_ACCOUNT',['$q','$log',function($q,$log){
		return function(accId){
			var defer = $q.defer();
			   BlogOneController.deleteAccount(accId,function(result, event){
			   if(event.status) {
		              defer.resolve(result);
		            }
		            else {
		              $log.error(event.message);
		              defer.reject(event.message);
		            }
			    },{escape:false, buffer: false});
				
			return defer.promise;
		}
	}]);

Apex method to delete account :

  
@RemoteAction
    global static void deleteAccount(Id account){
    	try{
    		delete [SELECT Id FROM Account WHERE Id=:account];
    	}catch(Exception e){
    	 system.debug(e.getMessage());
    	}
    } 

Once the record it deleted from the server you have to remove it from the angular scope and in this example from the ng-table as well. To do this remove the element using index from the array then reload the ng-table

// On Success 
data.splice(index,1);
$scope.accountRecords.reload();	

How to add a record

Create a form using ng-model to add the respective object

In Angular controller
$scope.newAccount = {};

In HTML 
<input type="text"  ng-model="newAccount.Name"  placeholder="Enter Name"/>

Make sure to initialize empty object before using it, else it will throw undefined error. Due to two way binding in angular, as soon as the inputs are populated it will be linked to the object in the scope. Now to add the account you just have to pass this object to the factory

	myapp.factory('ADD_ACCOUNT',['$q','$log',function($q,$log){
		return function(acc){
			var defer = $q.defer();
			   BlogOneController.createAccount(acc,function(result, event){
			    if(event.status) {
		              defer.resolve(result);
		            }
		            else {
		              $log.error(event.message);
		              defer.reject(event.message);
		            }
			   },{escape:false, buffer: false});
				
				return defer.promise;
		}
	}]);

Apex method to add account :

    
    @RemoteAction
    global static Id createAccount(Account account){    	
    	      Database.Saveresult sR = Database.insert(account);    	
    	return sR.getId();
    }

On success of addition of the record to server, add the record to the ng-table and reload the table

data.push($scope.newAccount);
$scope.accountRecords.reload();	

This concludes basic AngularJS example with fetching,deletion and creation of record.
Thanks you very much for reading please share your views in comments and subscribe to see future updates.

You can see the working demo HERE

Checkout the git repository for the code
Visualforce Page and Apex Class

Advertisements

2 thoughts on “AngularJs with Visualforce Page and Remoting – Part 2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s