Salesforce Developer Community

Brandon Barb 4
NEWBIE
40 Points
Member since 2017

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
9

Questions
23

Replies

Default Refiner on Global Community Search

I am using the Global Search in a Customer Service Community. I would like for the search to return only a certain set of records in a custom object based on a picklist value.

Is it possible to set a default refiner on the search, so that, for example, only records with Status__c = Final are returned?

Brandon Barb 4
February 01, 2019
Like
0

0 replies

Custom Related Files Component

I have a component and apex controller that calls/displays all the related files on a record.

How can I filter the returned files by a field that is set on ContentVersion?

ie. only show files if Document_Type__c = Supporting Document

Apex controller:

    public class SimplyfyFilesCntrl {
       @AuraEnabled
       public static List<ContentDocument> getFiles(string recordId){
         List<ContentDocument> DocumentList = new List<ContentDocument>();
         Set<Id> documentIds = new Set<Id>(); //store file ids
         List<ContentDocumentLink> cdl=[select id,LinkedEntityId,ContentDocumentId from ContentDocumentLink where LinkedEntityId=:recordId];
         for(ContentDocumentLink cdLink:cdl){
           documentIds.add(cdLink.ContentDocumentId); // Document ids
         }
         DocumentList = [select Id,Title,FileType,ContentSize from ContentDocument where id IN: documentIds];
         return DocumentList;
       }

     }

Brandon Barb 4
January 24, 2019
Like
0

SOLVED

20 replies

Filter a column with Angular?

I am creating a VF page that displays an object and allows searching of the list with Angular.

What I would like to do now is add the capability to filter on a column before searching. For example - A dropdown menu for "Department" that lists the different departments, upon selection the list filters every record with DepartmentA, then search.

How would I go about doing this?

I will eventually integrate this with custom objects, but I am using the Contact object for now until I can figure it out.

Thank you for any help you can provide.

Controller:

public with sharing class con_Test {

         public static String getContacts() {
       return JSON.serialize([select id, name, department
           from contact ]);
   }
}

VF:

apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="con_Test">  
<head>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>

   <script>

     var App = angular.module('myApp', []);

     App.controller('myctrl', function ($scope) {   

         $scope.contacts = {!contacts}
     });
   </script>

</head>


 <form class="form-inline">
        <div class="form-group">
            <label >Search: </label>
            <input type="text" ng-model="search" class="form-control" placeholder="Search"></input>
    </div>
</form>

<body ng-app="myApp" class="container" ng-controller="myctrl">
   <table class="table table-bordered">
     <tr>
       <th>Name</th>
       <th>Department</th>
       <th>Id</th>
     </tr>

     <tr ng-repeat="contact in contacts | filter:search">          
       <td>{{contact.Name}}</td>
       <td>{{contact.Department}}</td>
       <td>{{contact.Id}}</td>
     </tr>

   </table>
</body>

</apex:page>

Brandon Barb 4
April 04, 2018
Like
0

SOLVED

7 replies

Default Sort Order with Angular?

I'm creating a VF page that allows searching/sorting of a custom object using AngularJS.

I was able to get the sorting to work, but is there a way for me to set one column to be sorted when the page is loaded?
ie. I want my Name column to be in alphabetical order when the page loads.

<script>
      
     var App = angular.module('myApp', []);
  
     App.controller('myctrl', function ($scope) {   
     
              $scope.contacts = {!contacts}
                  $scope.sort = function(keyname){
                  
             $scope.sortKey = keyname;   //set the sortKey to the param passed
        $scope.reverse = !$scope.reverse; //if true make it false and vice versa
    }
    
                
     });
     
   
   </script>

Brandon Barb 4
March 26, 2018
Like
0

7 replies

Incorporating Code for Pagination

I have created a visualforce page that displays an object and allows searching/sorting of the list with AngularJS and now I am trying to add pagination.

Here is a perfect example of what I'm looking for - http://plnkr.co/edit/81fPZxpnOQnIHQgp957q?p=preview

How would I incorporate this code into my own (below)?

<apex:page applyHtmlTag="false" applyBodyTag="false" showHeader="false" sidebar="false" standardStylesheets="false">
<style>
body { font-size: 12px !important; }
</style>
<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="con_AppCatalog__c" fields="Name,Branch__c,Id,Functional_Area__c,Description__c" 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+'%'
                            },
                            Branch__c: {
                                like: '%'+$scope.searchText+'%'
                            }
                        }
                    },
                                    limit: 500
                                   },
                                   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"),"Id" :record.get("Id"),"Functional_Area__c":record.get("Functional_Area__c"),"Description__c":record.get("Description__c"),"Branch__c":record.get("Branch__c")}); // 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="col-sm-4 pull-left">
<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 = 'Branch__c'; sortReverse = !sortReverse">
Branch
<span ng-show="sortType == 'Branch__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Branch__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Functional_Area__c'; sortReverse = !sortReverse">
Functional Area
<span ng-show="sortType == 'Functional_Area__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Functional_Area__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Description__c'; sortReverse = !sortReverse">
Description
<span ng-show="sortType == 'Description__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Description__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in contacts | orderBy:sortType:sortReverse">
<td><a href="https://toolingorg-cbpoit--toolingsand.cs32.force.com/s/detail/{{ c.Id }}"> {{ c.Name }} </a></td>
<td>{{ c.Branch__c }}</td>
<td>{{ c.Functional_Area__c }}</td>
<td>{{ c.Description__c }}</td>
</tr>
</tbody>
</table>
</div>
</body>


</html>
</apex:page>

Brandon Barb 4
March 24, 2018
Like
0

3 replies

Pagination for Remote Object?

I have created a visualforce page that displays an object and allows searching/sorting of the list with AngularJS and remote objects.

How would I go about adding pagination to my list? My code is below.

Thanks for any help you can provide!

<apex:page applyHtmlTag="false" applyBodyTag="false" showHeader="false" sidebar="false" standardStylesheets="false">
<style>
body { font-size: 12px !important; }
</style>
<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="con_AppCatalog__c" fields="Name,Branch__c,Id,Functional_Area__c,Description__c" 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+'%'
},
Branch__c: {
like: '%'+$scope.searchText+'%'
}
}
},
limit: 500
},
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"),"Id" :record.get("Id"),"Functional_Area__c":record.get("Functional_Area__c"),"Description__c":record.get("Description__c"),"Branch__c":record.get("Branch__c")}); // 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="col-sm-4 pull-left">
<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 = 'Branch__c'; sortReverse = !sortReverse">
Branch
<span ng-show="sortType == 'Branch__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Branch__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Functional_Area__c'; sortReverse = !sortReverse">
Functional Area
<span ng-show="sortType == 'Functional_Area__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Functional_Area__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Description__c'; sortReverse = !sortReverse">
Description
<span ng-show="sortType == 'Description__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Description__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in contacts | orderBy:sortType:sortReverse">
<td><a href="https://toolingorg-cbpoit--toolingsand.cs32.force.com/s/detail/{{ c.Id }}"> {{ c.Name }} </a></td>
<td>{{ c.Branch__c }}</td>
<td>{{ c.Functional_Area__c }}</td>
<td>{{ c.Description__c }}</td>
</tr>
</tbody>
</table>
</div>
</body>

</html>
</apex:page>

Brandon Barb 4
March 24, 2018
Like
0

SOLVED

5 replies

Link to Record's Details/ID not showing

I am creating a visualforce page that display an object and allows searching/sorting of the list with AngularJS.
My code is below - I am trying to link the {{ c.Name }} field to the record's details page by using <a href="/{{ c.id }}"> {{ c.Name }} </a>
However, it doesn't seem to pull the ID into the URL.
What am I doing wrong?
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="con_AppCatalog__c" fields="Name,Branch__c,Id,Functional_Area__c,Description__c" 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+'%'
},
Branch__c: {
like: '%'+$scope.searchText+'%'
}
}
},
limit: 500
},
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"),"Functional_Area__c":record.get("Functional_Area__c"),"Description__c":record.get("Description__c"),"Branch__c":record.get("Branch__c")}); // 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 = 'Branch__c'; sortReverse = !sortReverse">
Branch
<span ng-show="sortType == 'Branch__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Branch__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Functional_Area__c'; sortReverse = !sortReverse">
Functional Area
<span ng-show="sortType == 'Functional_Area__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Functional_Area__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Description__c'; sortReverse = !sortReverse">
Description
<span ng-show="sortType == 'Description__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Description__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in contacts | orderBy:sortType:sortReverse">
<td> <a href="/{{ c.id }}"> {{ c.Name }} </a> </td>
<td>{{ c.Branch__c }}</td>
<td>{{ c.Functional_Area__c }}</td>
<td>{{ c.Description__c }}</td>
</tr>
</tbody>
</table>
</div>
</body>

</html>
</apex:page>

Brandon Barb 4
March 23, 2018
Like
0

SOLVED

9 replies

Link to Record's Detail Page

I am creating a visualforce page that display an object and allows searching/sorting of the list with AngularJS.

My code is below - How can I get the {{ c.Name }} field to hyperlink to the record's detail page?

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="con_AppCatalog__c" fields="Name,Branch__c,Functional_Area__c,Description__c" 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+'%'
},
Branch__c: {
like: '%'+$scope.searchText+'%'
}
}
},
limit: 500
},
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"),"Functional_Area__c":record.get("Functional_Area__c"),"Description__c":record.get("Description__c"),"Branch__c":record.get("Branch__c")}); // 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 = 'Branch__c'; sortReverse = !sortReverse">
Branch
<span ng-show="sortType == 'Branch__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Branch__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Functional_Area__c'; sortReverse = !sortReverse">
Functional Area
<span ng-show="sortType == 'Functional_Area__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Functional_Area__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Description__c'; sortReverse = !sortReverse">
Description
<span ng-show="sortType == 'Description__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Description__c' && 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.Branch__c }}</td>
<td>{{ c.Functional_Area__c }}</td>
<td>{{ c.Description__c }}</td>
</tr>
</tbody>
</table>
</div>
</body>

</html>
</apex:page>

Brandon Barb 4
March 23, 2018
Like
0

1 replies

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>

Brandon Barb 4
March 22, 2018
Like
0

SOLVED

20 replies

Filter a column with Angular?

I am creating a VF page that displays an object and allows searching of the list with Angular.

How would I go about doing this?

I will eventually integrate this with custom objects, but I am using the Contact object for now until I can figure it out.

Thank you for any help you can provide.

Controller:

public with sharing class con_Test {

         public static String getContacts() {
       return JSON.serialize([select id, name, department
           from contact ]);
   }
}

VF:

apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="con_Test">  
<head>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>

   <script>

     var App = angular.module('myApp', []);

     App.controller('myctrl', function ($scope) {   

         $scope.contacts = {!contacts}
     });
   </script>

</head>


 <form class="form-inline">
        <div class="form-group">
            <label >Search: </label>
            <input type="text" ng-model="search" class="form-control" placeholder="Search"></input>
    </div>
</form>

<body ng-app="myApp" class="container" ng-controller="myctrl">
   <table class="table table-bordered">
     <tr>
       <th>Name</th>
       <th>Department</th>
       <th>Id</th>
     </tr>

     <tr ng-repeat="contact in contacts | filter:search">          
       <td>{{contact.Name}}</td>
       <td>{{contact.Department}}</td>
       <td>{{contact.Id}}</td>
     </tr>

   </table>
</body>

</apex:page>

Brandon Barb 4
April 04, 2018
Like
0

SOLVED

7 replies

Default Sort Order with Angular?

I'm creating a VF page that allows searching/sorting of a custom object using AngularJS.

I was able to get the sorting to work, but is there a way for me to set one column to be sorted when the page is loaded?
ie. I want my Name column to be in alphabetical order when the page loads.

<script>
      
     var App = angular.module('myApp', []);
  
     App.controller('myctrl', function ($scope) {   
     
              $scope.contacts = {!contacts}
                  $scope.sort = function(keyname){
                  
             $scope.sortKey = keyname;   //set the sortKey to the param passed
        $scope.reverse = !$scope.reverse; //if true make it false and vice versa
    }
    
                
     });
     
   
   </script>

Brandon Barb 4
March 26, 2018
Like
0

7 replies

Incorporating Code for Pagination

I have created a visualforce page that displays an object and allows searching/sorting of the list with AngularJS and now I am trying to add pagination.

Here is a perfect example of what I'm looking for - http://plnkr.co/edit/81fPZxpnOQnIHQgp957q?p=preview

How would I incorporate this code into my own (below)?

<apex:page applyHtmlTag="false" applyBodyTag="false" showHeader="false" sidebar="false" standardStylesheets="false">
<style>
body { font-size: 12px !important; }
</style>
<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="con_AppCatalog__c" fields="Name,Branch__c,Id,Functional_Area__c,Description__c" 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+'%'
                            },
                            Branch__c: {
                                like: '%'+$scope.searchText+'%'
                            }
                        }
                    },
                                    limit: 500
                                   },
                                   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"),"Id" :record.get("Id"),"Functional_Area__c":record.get("Functional_Area__c"),"Description__c":record.get("Description__c"),"Branch__c":record.get("Branch__c")}); // 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="col-sm-4 pull-left">
<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 = 'Branch__c'; sortReverse = !sortReverse">
Branch
<span ng-show="sortType == 'Branch__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Branch__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Functional_Area__c'; sortReverse = !sortReverse">
Functional Area
<span ng-show="sortType == 'Functional_Area__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Functional_Area__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Description__c'; sortReverse = !sortReverse">
Description
<span ng-show="sortType == 'Description__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Description__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in contacts | orderBy:sortType:sortReverse">
<td><a href="https://toolingorg-cbpoit--toolingsand.cs32.force.com/s/detail/{{ c.Id }}"> {{ c.Name }} </a></td>
<td>{{ c.Branch__c }}</td>
<td>{{ c.Functional_Area__c }}</td>
<td>{{ c.Description__c }}</td>
</tr>
</tbody>
</table>
</div>
</body>


</html>
</apex:page>

Brandon Barb 4
March 24, 2018
Like
0

3 replies

Pagination for Remote Object?

I have created a visualforce page that displays an object and allows searching/sorting of the list with AngularJS and remote objects.

How would I go about adding pagination to my list? My code is below.

Thanks for any help you can provide!

Brandon Barb 4
March 24, 2018
Like
0

SOLVED

5 replies

Link to Record's Details/ID not showing

Brandon Barb 4
March 23, 2018
Like
0