Skip to content

Instantly share code, notes, and snippets.

@Sunil02kumar

Sunil02kumar/smartTableAnguarJs VF Page

Created November 23, 2016 05:01
Show Gist options
  • Save Sunil02kumar/ff8cfc89b1543e894ca64a9b47ee541a to your computer and use it in GitHub Desktop.
Save Sunil02kumar/ff8cfc89b1543e894ca64a9b47ee541a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
smartTableAnguarJs VF Page
<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>
Raw
smartTableAngularJSController apex class
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]);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment