AnglarJS ,Visualforce And Javascript Remoting
A Little Background About This Post:
In my
previous AngularJS posts ,we have gone through AngularJS setup and AngularJS
Data Search with dummy data .
Here is the
next step to display salesforce data instead of dummy data with angularJS.
Below are
the components of it.
1. AngularJS
MVC framework in Visualforce Page.
2. Javascript
Remoting to query salesforce data
The main
idea here is to display accounts and related contacts and opportunities in a
console form to display related contacts and opportunities as soon as we click
on accounts using angularJS ,javascript remoting in visualforce page .
Apex
Class :
public class
AccountsWithContactsController {
@RemoteAction
public
static List<accountsWithContacts> getAccountsWithContacts(){
List<accountsWithContacts> accountWithContactWrapperList = new
List<accountsWithContacts>();
for(Account accInstance:[select id,name,phone,(select id,name from
contacts),(select id,name,StageName,Amount,CloseDate from opportunities) from
account ]){
accountWithContactWrapperList.add(new
accountsWithContacts(accInstance,accInstance.contacts));
}
return accountWithContactWrapperList;
}
public class
accountsWithContacts{
public account acc;
public List<contact> contactList;
public accountsWithContacts(Account acc,List<contact>
contactList){
this.acc = acc;
this.contactList = contactList;
}
}
}
<apex:page sidebar="false"
applyHtmlTag="false" applyBodyTag="false"
showheader="false"
controller="AccountsWithContactsController">
<html
ng-app="accountApp" lang="en">
<apex:includeScript value="{!$Resource.AngularJS}"/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<script>
function getAccountsWithCOntacts(callback){
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.AccountsWithContactsController.getAccountsWithContacts}',
callback,
{escape: false}
);
}
</script>
<script>
var accountApp
=angular.module('accountApp',[]).
factory("accountAndContactsFactory",function($q,$rootScope){
var factory={};
factory.getAccountsAndContacts = function(){
var deferred = $q.defer();
getAccountsWithCOntacts(function(result){
$rootScope.$apply(function(){
deferred.resolve(result);
});
});
return deferred.promise;
}
return factory;
});
accountApp.controller('MainController',function($scope,accountAndContactsFactory){
$scope.number = 5;
$scope.accountAndContacts = {};
$scope.contactsRelatedToThisAccout={};
$scope.opportunitiesRelatedWithThisAccout ={};
$scope.opportuityDetail ={};
$scope.opportuityDetailReder = false;
$scope.selected = 0;
$scope.oppSelected = 0;
accountAndContactsFactory.getAccountsAndContacts().then(function(result){
$scope.accountAndContacts = result;
});
$scope.getCotactsForAccout = function(accountId,index){
$scope.selected = index;
$scope.opportuityDetailReder = false;
angular.forEach($scope.accountAndContacts, function(value , key) {
if(value.acc.Id ==
accountId){
$scope.contactsRelatedToThisAccout =
$scope.accountAndContacts[key].contactList;
$scope.opportunitiesRelatedWithThisAccout = $scope.accountAndContacts[key].acc.Opportunities;
}
});
};
});
</script>
<body>
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a
href="#">Accouts</a></li>
<li ><a href="#">Contacts</a></li>
<li><a href="#">Opportunities</a></li>
</ul>
<div class="container-fluid" ng-controller="MainController">
<div class="row">
<div class="col-md-4">
<ul class="list-group">
<li
class="list-group-item" ng-repeat="acct in
accountAndContacts" ng-class="{active: $index == selected}">
<div
ng-click="getCotactsForAccout(acct.acc.Id,$index)" >
{{acct.acc.Name}}
</div>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-group">
<li
class="list-group-item" ng-repeat="cont in
contactsRelatedToThisAccout">{{cont.Name}}</li>
</ul>
</div>
<div class="col-md-4">
<ul
class="list-group">
<li
class="list-group-item" ng-repeat="opp in
opportunitiesRelatedWithThisAccout" ng-class="{active: $index ==
oppSelected}">
<div
ng-click="pushOpportunityDetail(opp.Id,$index)">
{{opp.Name}}
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
</apex:page>
Please see below link to see demo page whicj lists accounts ,contacts and opportunities.
Click each account to see related contacts and opportunities.
Hi Ashish,
ReplyDeleteYou have just given all the necessary code for angularjs, but you didn't specified any path for the static resource file. Could you post the static resource file here.
Hi,
DeletePlesee refer my previous post to setup angularJS in visualforce page.
http://ashishsharmadevsfdc.blogspot.ae/2014/09/angularjs-in-visualforce-pages-setup.html?view=magazine
The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface. friv jogos online
ReplyDeletejogos online 2019
friv jogos 4 school online