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

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

First I created a new app and defined some variables

 
<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>  

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.



<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>


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

.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; 
}

Read More

SP Services SPGetCurrentUser Error

function getCurrentUserInfo() {
var thisUsersValues = $().SPServices.SPGetCurrentUser({
fieldNames: ["ID", "Name", "Picture", "Email"],
debug: false
});
var name = thisUsersValues["Name"];
var userPic = thisUsersValues["Picture"];
}

But I was getting this error in Internet Exporer, everything worked fine in Chrome:

SCRIPT438: Object doesn’t support property or method ‘replace’

File: jquery.SPServices-2014.01.js, Line: 2414, Column: 17

In Chrome I looked at the values being returned for the user and I noticed that the ID value always came back empty. In the application I was working on I did not really need to use the users ID because the username/email are enough to find the users profile.  So I removed ID from the list of field names and everything started working again. If I needed to get other information about the user it is possible to just call this spservices function using the username from the code above.

 

Hope this helps someone.

Read More

SharePoint List Driven News Ticker

I have written about making a News Ticker before but it looks like the code is not working anymore so why not make something better. News tickers are a great way to show a lot of information in a small space and they look much better than an annoucements web part. For this example I established a few ground rules.

  • Content will be pulled from a custom SharePoint list.
  • When clicked the items will open in a dialog window
  • The ticker will pause on hover and have controls so users can scroll through the news items

(more…)

Read More

Simple SharePoint Search Box with Radio Buttons

So lets say you want users to be able to selectively search content from 3 (or more) different lists (The lists may or may not be on the same site). Out of the Box there is not an easy way to do this.

  • Having the user browse to each list or library and search it specifically
  • Use the site wide search which will return results from the whole site.

You could setup search scopes for each list but if you manage a large number of sites this could become a lot of work to maintain.

So the plan is to build one search box with radio buttons that will let you choose what list or scope you want to query.  Here is how I did it.  (more…)

Read More

Zoomable Photo Grid

I started on this post back in July and I am just getting around to publishing it.

The out of the box SharePoint image library is nice and offers lots of options for viewing the images. However as more and more sites begin to use jQuery plugins and other methods for presentation the SharePoint views seem limited at best.

A few weeks ago while doing some random browsing I found this photo grid plugin and decided to try to implement it in SharePoint, here is how I did it.

(more…)

Read More

Improving #SharePoint Forms – Watermarks

So I found this cool jQuery plugin that does watermarks for form inputs. Using watermarks is a good way to help make SharePoint forms easier to use. To test the plugin I started with the new item form from same test list I used in my previous posts.

Watermarks

Prerequisites

  • jQuery Library referenced in the page
  • CEWP on the page

(more…)

Read More

Improving #SharePoint Forms

Over the next few weeks I will be writing a series of posts on how to improve the out of the box SharePoint forms by using simple CSS and jQuery solutions.  These solutions will help improve usability as well as enhance the look and feel.  Look for the first post later this week.

As a point of reference this is what we will be starting with.

Standard SharePoint Form

Stay tuned for more soon.

Read More

Displaying a rotating header image with caption

Nothing makes a site look good like nice images. Using a large header graphic on you Sharepoint site can help direct users to some important information or announcement. Many non-SharePoint images use this technique to add interest to their site and attract visitors. Doing something like this in SharePoint will make your site a lot less ‘SharePointy’ (my made up word for sites that look like SharePoint). Here is how I did it.

Rotating images with captions

(more…)

Read More