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

    }

}

Visualforce Page :

<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 here to see demo
Click each account to see related contacts and opportunities.

Comments

  1. Hi Ashish,
    You 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.

    ReplyDelete
    Replies
    1. Hi,
      Plesee refer my previous post to setup angularJS in visualforce page.

      http://ashishsharmadevsfdc.blogspot.ae/2014/09/angularjs-in-visualforce-pages-setup.html?view=magazine

      Delete
  2. 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
    jogos online 2019
    friv jogos 4 school online

    ReplyDelete

Post a Comment

Popular posts from this blog

A Quick Salesforce OAuth 2.0 Usage Demonstration

Salesforce To Authorize.Net Integration

Charts in Lightning component