images

Sort and Filter SharePoint List Data with Angular JS

Angular JS is a Javascript that extends HTML with new attributes and allows you to create declarative templates and do data-binding. If you want to learn more about Angular go here.  I have heard a lot about Angular and wanted to try it out so here is how I got it working on a SharePoint 2010 site.

Fist I included all my dependencies on the page

[sourcecode] <script src="/SiteAssets/jquery-1.12.0.min.js"></script>
<script src="/SiteAssets/angular.min.js"></script>
[/sourcecode]

First I created a new app and defined some variables

[sourcecode] <script type="text/javascript">
// make a new app and give it a new
angular.module(‘spApp’,[])

.controller("contactController", function($scope){
GetListItems($scope, "ContactList"); // calling this function to get items from my list and add them to my scope
$scope.sortType = ”; // set the default sort type
$scope.sortReverse = true; // set the default sort order
$scope.searchFish = ”; // set the default search/filter term

});

function GetListItems($scope, listName){ //this function gets all the items from the list
$.ajax({
url: "/_vti_bin/listdata.svc/"+listName+"?select=FullName", // this is specific to SP2010 the URL is different for 2013
method: "GET",
async: false,
headers: { "Accept": "application/json;odata=verbose" },
success: function(data){
$scope.items = data.d.results; // assigning the data from the list to the scope so I can use it
// console.log(data.d.results);
},
error: function(sender,args){
console.log(args.get_message());
}
});
}
</script>
[/sourcecode]

Next we need to get some data to work with.  In this example I am using a contacts list.  I used some of the code from this article to get it working but I had to tweak it to work with SharePoint 2010.

Ok so now that we have the items from the list we need to display them on the page, for this I built a simple table and added some code to allow for sorts and filters. I have included comments in the code to help it make sense. This article explains in more detail how the sort and filter works.

[sourcecode language=”html”]

<div ng-app="spApp" ng-controller="contactsController" >
//the app name and controller name here should match what you defined in the js code

<input type="text" class="form-control" placeholder="Search" ng-model="searchContact" id="rosterSrchBx"> //search box angular uses the value entered in this box to filter the table

<table class="rosterTbl">

<thead>

<tr>

<td>
<a href="#" ng-click="sortType = ‘FullName’; sortReverse = !sortReverse"> //sort order code
Name
<span ng-show="sortType == ‘FullName’ && !sortReverse" class="fa fa-caret-down"><img src="/_layouts/images/ARWDOWN.GIF"/></span>
<span ng-show="sortType == ‘FullName’ && sortReverse" class="fa fa-caret-up"><img src="/_layouts/images/ARWUp.GIF"/></span>
</a>
</td>

<td>
Phone Number
</td>

<td>
Cubicle
</td>

<td>
Email
</td>

</tr>

</thead>

<tbody>

<tr ng-repeat="item in items | orderBy:sortType:sortReverse | filter:searchContact" > //this is basically a repeater that spits out all the items in the list

<td class="ms-vb">
{{ item.FullName }} // this is how you display a column from the list, you have to use the internal name of the column
</td>

<td class="ms-vb">
<img src="/_layouts/images/gbwcawpt.gif" align="absmiddle"/>
{{ item.Phone }}
</td>

<td class="ms-vb">
{{ item.Cubicle }}
</td>

<td class="ms-vb">
<a href="mailto:{{ item.Email }}">
{{ item.UFOUOEmail }}
</a>
</td>

</tr>

</tbody>

</table>

</div>

[/sourcecode]

To make it look a bit better I also added some CSS

[sourcecode language=”html”] .rosterTbl {
padding:7px;
}
.rosterTbl td {
padding:9px;
}
.rosterTbl thead td{
background-color:#bfe8ff;
border:1px solid #90c6e5;
}
.rosterTbl tbody tr:hover {
background-color:#edf8ff;
}
.rosterTbl tbody td {
border-bottom:1px solid #eee;
}
#rosterSrchBx{
padding:7px;
padding-left:25px;
font-size:1.7em;
margin:5px 0px;
background:url(‘/_layouts/images/magnify.gif’) no-repeat 3px;
border:1px solid #ccc;
}
[/sourcecode]

Add a Comment

Your email address will not be published. Required fields are marked *