SalesforceVenkat81215

Smart Table using AngularJS in Visualforce page

AngularJS provide functionality through which we can display records in table and can perform sorting, searching, pagination etc on client side (on Visualforce page). Previously we have to write sorting, searching logic in apex controller and need to call controller methods to perform operation and then rerender the page. AngularJS makes this job easy.

Below is sample angularJS code present in visualforce. This page display Account and its related cases. User can sort cases and search cases from related cases.

<apex:page standardStylesheets="false" sidebar="false"   showHeader="false" applyBodyTag="false" applyHtmlTag="false"   docType="html-5.0" controller="smartTableAngularJSController">
<html lang="en" ng-app="demoApp">
<head>
  <!-- <meta charset="utf-8"/>-->
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title>Angular Demo</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
    
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
   <script>
     // define the app
     var demoApp = angular.module('demoApp', []);
     // add the controller
     demoApp.controller('DemoCtrl', function ($scope) {
         $scope.account = {!account}
         $scope.cases= {!Cases}
         $scope.sortType     = 'CaseNumber'; // set the default sort type
          $scope.sortReverse  = false;  // set the default sort order
          $scope.query = '';     // set the default search/filter term
     });
     
          
   </script>
</head>
<body class="container" ng-controller="DemoCtrl">
   <h1 style="color:Green">{{account.Name}}</h1>
   <p class="lead" style="color:Gray">
   {{account.BillingStreet}}<br/>
   {{account.BillingCity}}, {{account.BillingState}}
   {{account.BillingPostalCode}}
   </p>
    <b>Search</b>&nbsp;&nbsp;&nbsp;<input ng-model="query" /><br/><br/>
    

    
   <table class="table table-bordered">
   <tr>
        <td>
          <a href="#" ng-click="sortType = 'CaseNumber'; sortReverse = !sortReverse">
            CaseNumber
            <span ng-show="sortType == 'CaseNumber' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'CaseNumber' && sortReverse" class="fa fa-caret-up"></span>
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'Subject'; sortReverse = !sortReverse">
          Subject
            <span ng-show="sortType == 'Subject' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'Subject' && sortReverse" class="fa fa-caret-up"></span>
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'Status'; sortReverse = !sortReverse">
          Status 
            <span ng-show="sortType == 'Status' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'Status' && sortReverse" class="fa fa-caret-up"></span>
          </a>
        </td>
      </tr>
     
     <tr ng-repeat="case in cases|orderBy:sortType:sortReverse | filter:query ">          
       <td>{{case.CaseNumber}}</td>
       <td>{{case.Subject}}</td>
       <td>{{case.Status}}</td>
     </tr>
   </table>
</body>
</html>
</apex:page>

view rawsmartTableAnguarJs VF Page hosted with ❤ by GitHub

global  class smartTableAngularJSController{
   
   global static String accountId;
   global smartTableAngularJSController(){
       accountId = ApexPages.currentPage().getparameters().get('id');
       system.debug('********accountId :'+accountId );
   }
 
   global static String getAccount() {
       return JSON.serialize([select name, billingstreet,
           billingcity, billingstate, billingpostalcode
           from account where id = :accountId][0] ); //where id=:accountId
   }    
 
   global static String getCases() {
       return JSON.serialize([select id, CaseNumber, Subject, Status  from case where accountId = :accountId]);
   }
}

view rawsmartTableAngularJSController apex class hosted with ❤ by GitHub

Please see below snaphot. In order to test this code, pass account id in url as below URL
https://ap1--skforce.ap1.visual.force.com/apex/smartTableAnguarJs?id=0019000000ld4kN

SalesforceVenkat81215

Thursday, July 6, 2017

Smart Table using AngularJS in Visualforce page

No comments:

Post a Comment

	<apex:page standardStylesheets="false" sidebar="false" showHeader="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0" controller="smartTableAngularJSController">
	<html lang="en" ng-app="demoApp">
	<head>
	<!-- <meta charset="utf-8"/>-->
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<title>Angular Demo</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
	<script>
	// define the app
	var demoApp = angular.module('demoApp', []);
	// add the controller
	demoApp.controller('DemoCtrl', function ($scope) {
	$scope.account = {!account}
	$scope.cases= {!Cases}
	$scope.sortType = 'CaseNumber'; // set the default sort type
	$scope.sortReverse = false; // set the default sort order
	$scope.query = ''; // set the default search/filter term
	});


	</script>
	</head>
	<body class="container" ng-controller="DemoCtrl">
	<h1 style="color:Green">{{account.Name}}</h1>
	<p class="lead" style="color:Gray">
	{{account.BillingStreet}}<br/>
	{{account.BillingCity}}, {{account.BillingState}}
	{{account.BillingPostalCode}}
	</p>
	<b>Search</b>   <input ng-model="query" /><br/><br/>



	<table class="table table-bordered">
	<tr>
	<td>
	<a href="#" ng-click="sortType = 'CaseNumber'; sortReverse = !sortReverse">
	CaseNumber
	<span ng-show="sortType == 'CaseNumber' && !sortReverse" class="fa fa-caret-down"></span>
	<span ng-show="sortType == 'CaseNumber' && sortReverse" class="fa fa-caret-up"></span>
	</a>
	</td>
	<td>
	<a href="#" ng-click="sortType = 'Subject'; sortReverse = !sortReverse">
	Subject
	<span ng-show="sortType == 'Subject' && !sortReverse" class="fa fa-caret-down"></span>
	<span ng-show="sortType == 'Subject' && sortReverse" class="fa fa-caret-up"></span>
	</a>
	</td>
	<td>
	<a href="#" ng-click="sortType = 'Status'; sortReverse = !sortReverse">
	Status
	<span ng-show="sortType == 'Status' && !sortReverse" class="fa fa-caret-down"></span>
	<span ng-show="sortType == 'Status' && sortReverse" class="fa fa-caret-up"></span>
	</a>
	</td>
	</tr>

	<tr ng-repeat="case in cases\|orderBy:sortType:sortReverse \| filter:query ">
	<td>{{case.CaseNumber}}</td>
	<td>{{case.Subject}}</td>
	<td>{{case.Status}}</td>
	</tr>
	</table>
	</body>
	</html>
	</apex:page>

	global class smartTableAngularJSController{

	global static String accountId;
	global smartTableAngularJSController(){
	accountId = ApexPages.currentPage().getparameters().get('id');
	system.debug('********accountId :'+accountId );
	}

	global static String getAccount() {
	return JSON.serialize([select name, billingstreet,
	billingcity, billingstate, billingpostalcode
	from account where id = :accountId][0] ); //where id=:accountId
	}

	global static String getCases() {
	return JSON.serialize([select id, CaseNumber, Subject, Status from case where accountId = :accountId]);
	}
	}