Interacting with SharePoint Lists Using AngularJS

christineDevelopment, SharePointLeave a Comment

angular js pagination sharepoint list

I’m a total beginner at Javascript and AngularJS, piecing together some tutorials from around the web to learn how things work… but this seemed kind of cool, so I wanted to document the process. The end goal is to strip away the SharePoint list view to access and manipulate the list (add/edit/remove list items, sort and filter) via AngularJS. You can do this by inserting the script links and HTML right on a page, but in this case I’m going to use Napa Development Tools in O365 to make a SharePoint-hosted app instead.

Step 1: Get the list displayed

For the first half of this, I followed the instructions in this blog article, which were actually quite good (THANK YOU to you people who write stuff like this, seriously…). Overall, this was quite a bit easier than I expected – the blog linked above includes a zip file with all the scripts in it, you can unzip and upload the files to your Napa project. It worked on the first try, which honestly doesn’t happen super-often in SharePoint.

I created a list with the same list name and column names as they described for simplicity’s sake, then edited the scripts to add an extra choice column just to test it out. Later on, when I got to sorting and filtering, I was having trouble with the CategoryID column (which was the renamed Title column in the list) not updating properly. I believe most of this development stuff uses the original column names (part of the tutorial has you rename a column), and something wasn’t quite right with the code so I swapped CategoryID back to Title, and did a find and replace in the scripts to do the same there, and that fixed it.

Here’s v1 of the list (highlighting the sample choice column I added), next step is to add sorting and filtering:

angularjs-sharepoint-list

Step 2: Add a default sort order

For sorting and filtering, this is a really excellent tutorial. Following this, I was able to add a toggle sort to the column headers in SharePoint. I switched out a few of the fishy names to work with my test list from the previous tutorial. Here’s the snippet I added to controller.js in the first function section to set the default sort and add a few variables:

$scope.sortType = 'ID'; // cp set the default sort type, create variable
$scope.sortReverse = false; // cp set the default sort order, create variable
$scope.searchQuery = ''; // set the default search/filter term

I added this here, choosing to sort by ID number by default:

sort-angularjs-sharepoint-list

Then in the default.aspx page, I modified the ng-repeat line to use the sort:

<tr ng-repeat="Cat in Categories|orderBy:sortType:sortReverse">

Step 3: Font-Awesome link for carets

While trying to get the sorting and filtering by column to work I was having particular trouble with getting the caret icons to display… until I started using the CDN link instead of an internally-hosted link to the Font-Awesome CSS. I think this is because SharePoint doesn’t interpret the relative URLs to the font folder inside the stylesheet properly – replacing them with absolute URLs would probably work too, but using the CDN is easier. Here’s what I added to the header section of default.aspx (you should also have the angular and bootstrap links in there at this point if you’re following the other article’s instructions):

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 

Step 4: The click-to-sort headers

Still following the scotch.io tutorial, I added the anchor tags and ng-click spans to a couple of the column headers. Here’s the code for the whole table:

<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="c1"><a href="#" ng-click="sortType = 'ID'; sortReverse = !sortReverse">RecordId
<span ng-show="sortType == 'ID' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ID' && sortReverse" class="fa fa-caret-up"></span>
</a></th>
<th class="c1"><a href="#" ng-click="sortType = 'Title'; sortReverse = !sortReverse">Title
<span ng-show="sortType == 'Title' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Title' && sortReverse" class="fa fa-caret-up"></span>
</a></th>
<th class="c1"><a href="#" ng-click="sortType = 'CategoryName'; sortReverse = !sortReverse">CategoryName
<span ng-show="sortType == 'CategoryName' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'CategoryName' && sortReverse" class="fa fa-caret-up"></span>
</a></th>
<th class="c1">ChoiceColumn</th>
<th class="c1"></th>
<th class="c1"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Cat in Categories|orderBy:sortType:sortReverse | filter:searchQuery"><!--cp - sorting by variables, search filter in controller.js -->
<td>{{Cat.ID}}</td>
<td>{{Cat.Title}}</td>
<td>{{Cat.CategoryName}}</td>
<td>{{Cat.ChoiceColumn}}</td>
<td>
<button class="btn glyphicon glyphicon-pencil"
ng-click="loadRecord(Cat,$event)"/>
</td>
</tr>
</tbody>
</table>

Here’s what the table looks like now, note the caret (clicking the column header does toggle the sort order):

sortable sharepoint list angularjs

Sweet, onto the search box!

Step 5: The search box

You should have already configured the first half of the search in the controller.js file. Now we just need paste the code for the search box above the table in the default.aspx page (note I replaced the word fish with query in the controller and HTML, because I have no fish).

<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>

<input type="text" class="form-control" placeholder="Search" ng-model="searchQuery">

</div>
</div>
</form>

Then we modify the ng-repeat section again to add the search filter:

<tr ng-repeat="Cat in Categories|orderBy:sortType:sortReverse | filter:searchQuery">

Tested it out, it worked (I’ll admit I was kind of surprised):

search box angularjs sharepoint list

Step 6: Pagination

For me, the easiest way to do this was to add a new pagination library (dirPagination). To do that, upload the dirPagination JS file to your scripts folder, and link it along with the rest of your scripts in default.aspx:

<script src="../Scripts/dirPagination.js"></script>

Next move down to your table. Replace ng-repeat with dir-paginate, and add itemsPerPage:#

Example:

Before:  <tr ng-repeat="Cat in Categories|orderBy:sortType:sortReverse | filter:searchQuery">

After:  <tr dir-paginate="Cat in Categories|orderBy:sortType:sortReverse | filter:searchQuery|itemsPerPage:5">

Then add the dirPaginate dependency to your module.js file. Here’s what I have before/after:

Before:

//var app;
(function () {
angular.module('spsmodule', []);
})();

After:

//var app;
(function () {
angular.module('spsmodule', []);
angular.module('spsmodule',['angularUtils.directives.dirPagination']);
})();

Here’s what it looks like!

angular js pagination sharepoint list

This is still pretty rudimentary as all of the columns edit in open-text regardless of their column type… and no delete button yet, but it’s a start!

Leave a Reply

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