Apex Code Development You need to sign in to do that
Don't have an account?
Brandon Barb 4 Search/Sort Object in Visualforce
I am trying to create a visualforce page that displays an object and allows searching/sorting of the list.
I am following a youtube tutorial that shows how this can be done using AngularJs. I was successful in getting it to work with the Contacts object. But now I would like to try to tweak the code that is can be used with my custom object.
The object is con_AppCatalog__c and the fields I want to display are Name, Description__c, Branch__c, and Primary_POC__c.
Which parts do I need to tweak in the following code to get it to work for my custom object?
Thank you for any help you can provide!
<apex:page applyHtmlTag="false" applyBodyTag="false" showHeader="false" sidebar="false" standardStylesheets="false">
<html>
<head>
<title>Testing</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<apex:remoteObjects >
<apex:remoteObjectModel name="Contact" fields="Name,AccountId,LastName" jsShorthand="dbContacts"/>
</apex:remoteObjects>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sortType = 'Name'; // set the default sort type
$scope.sortReverse = false;
$scope.contacts=[];
$scope.searchText='';
$scope.fetchContacts = function() {
var dbCon = new SObjectModel.dbContacts();
console.log(dbCon);
dbCon.retrieve({where: {
or:{
Name: {
like: '%'+$scope.searchText+'%'
},
LastName: {
like: '%'+$scope.searchText+'%'
}
}
},
limit: 10
},
function(err, records, event){
$scope.$apply(function () {
if(err) {
alert(err.message);
}
else {
$scope.contacts.splice(0,$scope.contacts.length);
records.forEach(function(record) {
$scope.contacts.push({"Name" :record.get("Name"),"AccountId":record.get("AccountId")}); // it was % in place of $ with scope earlier
});
}
});
});
};
});
</script>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="myCtrl" ng-init="fetchContacts()">
<div class="well well-sm">
<h3>Contacts list with search</h3>
</div>
<div class="col-sm-4 pull-right">
<div class="col-sm-2">
<label for="searchText">Search:</label>
</div>
<div class="col-sm-10">
<input class="form-control" type="text" ng-model="searchText" id="searchText" ng-change="fetchContacts()"/>
</div>
</div>
<table class="table table-bordered table-striped">
<thead><tr>
<th>
<a href="#" ng-click="sortType = 'Name'; sortReverse = !sortReverse">
FIRST NAME
<span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'AccountId'; sortReverse = !sortReverse">
Account ID
<span ng-show="sortType == 'AccountId' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'AccountId' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in contacts | orderBy:sortType:sortReverse">
<td>{{ c.Name }} </td>
<td>{{ c.AccountId }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
</apex:page>
Try to replace the contact object with your custom pbject API name and with it fields.
Best Regards,
Sandhya