Friday, 19 June 2015

Paging using AngularJS and Bootstrap in Salesforce


AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs.
Want to know more and learn about angularJS Click here this is a re-post of the blog written by Vivek Deepak

Here is the page how its looks, the awesome thing about this page is angular the functionality in too much less coding, that what I just loved about AngularJS
Take a look at this


Here is the small controller class using remote Action to fetch the account records.

1:  global class BlogOneController {  
2:    @RemoteAction  
3:    global static List<Account> getAllAccounts() {    
4:      return [SELECT Id,Name,BillingStreet,BillingCity,BillingState FROM Account];  
5:    }  
6:  }  

Here is the code of the page using AngularJS to show the data on the page, using AngularJS and Bootstrap

1:  <apex:page showHeader="false" sidebar="false" docType="html-5.0" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" controller="BlogOneController" >  
2:  <html ng-app="SampleApp" lang="en">  
3:    <apex:stylesheet value="{!URLFOR($Resource.bootstrap,'/boostrapStyle/css/bootstrap.css')}"/>  
4:    <apex:stylesheet value="{!URLFOR($Resource.bootstrap,'/boostrapStyle/css/ng-table.min.css')}"/>  
5:    <head>  
6:    <!-- Add CSS Files HERE -->     
7:    <script type="text/javascript">  
8:    var myapp = angular.module('SampleApp',['ui.bootstrap','mgcrea.ngStrap','ngTable']);  
9:      myapp.factory('FETCH_ACCOUNTS', ['$q','$log', function($q,$log){  
10:    var handleReq = function(remoteCall) {  
11:      var defer = $q.defer();  
12:        remoteCall(  
13:         function(result, event) {  
14:          if(event.status) {  
15:           defer.resolve(result);  
16:          }  
17:          else {  
18:           $log.error(event.message);  
19:           defer.reject(event.message);  
20:          }  
21:         },  
22:         {escape:false, buffer: false}  
23:        );  
24:        return defer.promise;  
25:       }  
26:    return {  
27:        getAllCustomers: function() {  
28:          return handleReq(BlogOneController.getAllAccounts);  
29:        }  
30:      }  
31:  }]);  
32:  myapp.controller('MainController',['$q','$log','$scope','FETCH_ACCOUNTS','ngTableParams',function($q,$log,$scope,FETCH_ACCOUNTS,ngTableParams){  
33:        $scope.loadingH = true;  
34:        var data = [];  
35:        var promise = FETCH_ACCOUNTS.getAllCustomers();  
36:        $scope.account_list = [];  
37:        promise.then(function(response){  
38:          data = response;  
39:              $scope.accountRecords.reload();  
40:          $scope.loadingH = false;      
41:        },function(error){  
42:          $log.error('ERROR' + JSON.stringify(error));  
43:          $scope.loadingH = false;  
44:        });  
45:        $scope.accountRecords = new ngTableParams({  
46:                 page: 1,      // show first page  
47:                 count: 5  
48:                           // count per page  
49:              }, {  
50:                 counts:[],  
51:                 total: data.length, // length of data  
52:                 getData: function($defer, params) {  
53:               params.total(data.length);  
54:                 $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));  
55:              }  
56:            });  
57:      }]);  
58:    </script>  
59:    </head>  
60:    <body ng-controller="MainController" >  
61:    <div class="panel panel-primary">  
62:       <div class="panel-heading">  
63:        <h3 class="panel-title">Account Information</h3>  
64:       </div>  
65:       <div class="panel-body">  
66:          <table ng-table="accountRecords" class="table table-striped table-hover">  
67:           <thead>  
68:            <tr>  
69:             <th>#</th>  
70:             <th>Account Name</th>  
71:             <th>Street</th>  
72:             <th>State</th>  
73:            </tr>  
74:           </thead>  
75:           <tbody>  
76:            <tr ng-repeat="account in $data">  
77:             <td>{{$index+1}}</td>  
78:             <td>{{account.Name}}</td>  
79:             <td>{{account.BillingStreet}}</td>  
80:             <td>{{account.BillingCity}}</td>  
81:            </tr>  
82:           </tbody>  
83:          </table>    
84:       </div>  
85:      </div>  
86:      <apex:includeScript value="{!URLFOR($Resource.bootstraptpls, 'bootrapangular/angular.min.js')}"/>  
87:    <apex:includeScript value="{!URLFOR($Resource.bootstraptpls, 'bootrapangular/angular-strap.min.js')}"/>  
88:    <apex:includeScript value="{!URLFOR($Resource.bootstraptpls, 'bootrapangular/angular-strap.tpl.min.js')}"/>  
89:    <apex:includeScript value="{!URLFOR($Resource.bootstraptpls, 'bootrapangular/ng-table.min.js')}"/>  
90:    <apex:includeScript value="{!URLFOR($Resource.bootstraptpls, 'bootrapangular/ui-bootstrap-tpls-0.11.0.js')}"/>  
91:  <!-- Add JS Files HERE -->  
92:  </body>  
93:  </html>  
94:  </apex:page>  

For the Angular and Boostrap files please click here

Happy coding!!



2 comments:

  1. Salesforce Developer Training | 21cssindia
    www.21cssindia.com/Salesforce-Developer-TrainingSalesforce Developer Training Click Here For Enquiry Force.com Code (Apex)

    ReplyDelete
  2. This post is so helpfull and informative.keep updating with more information...
    Angularjs Software
    Angularjs Jobs For Freshers

    ReplyDelete