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

SPServices Retreiving and Filtering Data

I could not find a good example of how to do this so here is my solution. Hopefully it will be helpful to someone. Here is a quick example of how to retreive data from a list with SP services and then filter the results before displaying them. In my example I needed to get the data from a list but display part of it in two different places on the page

// normal sp spervices call to the list 
function getFooterLnks() {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Links",
completefunc: function(xData, Status) {
// this function runs on the data we get back    
    getDataFooter(xData, Status,colArray);
}
});
}

function getDataFooter(xData, Status) {

// putting the data into a Json object 

var myJson = $(xData.responseXML).SPFilterNode("z:row").SPXmlToJson({
mapping: {
ows_Title: {mappedName: "Title", objectType: "Text"},
ows_Column: {mappedName: "Column", objectType: "Text"},
ows_Url: {mappedName: "Url", objectType: "Text"},
ows_Cat: {mappedName: "Category", objectType: "MultiChoice"}
},
includeAllAttrs: false
});

// now we need to filter the Json object the col variable holds the term I want to filter by

var col = "Category 1";

// check if the value appears in the Json

myJsonResults = $(myJson).filter(function(){
return this.Category[0].indexOf(col) !== -1;
});

// put each of the results in an object with html formatting

var items = [];
$.each(myJsonRes, function() {
items.push("
<ul>
	<li><a title="" href="&quot; + this[">" + this['Title'] + "</a></li>
</ul>
&nbsp;

");
});

");
});
$('#linksWrapper').append(items);

}

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

Inline editing in a dataview web part.

inline editing in a DVWP SharePoint 2010
Inline Editing Options in SharePoint Designer

When you create a list view dataview web part in SharePoint 2010 you have the option of enabling inline editing. Once enabled users can edit and create list items without leaving the page. This is nice but by default SharePoint Designer does not style the interface the same way as it is when done in a standard list view. See the example below.

This is not difficult to fix, here is how I did it.

Here is what the standard inline editing interface looks like

default inline editing SharePoint

default inline editing SharePoint
When you use a data view web part it looks like this by default

data view web part inline editing SharePoint
data view web part inline editing SharePoint

Now this interface may look fine to you but I wanted it to look more like the standard interface. To get it looking better requires adding some code to the data view using SharePoint desiger. (more…)

Read More

Visual Best Bets in SharePoint 2010 without FAST

Using visual best bets is a very simple way to make your best bets stand out, if you don’t have Fast Server setup on your SharePoint environment this is not available out of the box. If you have FAST this is a good article on how to setup visual best bets.  For those of us without FAST here is how I did it.

To show best bests on the search results page you will either need to use a search center or create a custom search page and add the best bets web part to it. Here is what best bets look like out of the box.

SharePoint 2010 Visual Best Bets

Visual Best Bets without FAST

  1. Put the page in edit mode and then edit the best bets web part
  2. Click on the XSL Editor button
    SharePoint Edit XSl Button
  3. You can either or the little editor window or copy the code into an editor like Dreamweaver or Notepad
  4. On line 45 you will see this code
    <xsl:value-of select="Description"/>
  5. We are going to change the code to render the description field as HTML and not just plain text. Change the code on line 45 to this:
    <xsl:value-of disable-output-escaping="yes" select="Description"/>
  6. Save the changes to the web part and save the page.
  7. Now we need to setup our best bets to show images. If you dont already have best bets setup you can follow the steps outlined here
  8. Once you have a best bet setup edit it and in the description use HTML to show the image you want to display.
    <img src="URLofImage" alt="description of image"/>

    SharePoint 2010 search best bets setup

  9. Save the best bet and run a test search.

SharePoint 2010 Search best bets with images and no FAST

Visual best bets not only look better than the other results but can allow you to show more detailed information about the result without them having to click. Using this same solution you could include other HTML to show multiple image, the top pages from a site or other information useful to the person searching.

Read More

SharePoint Featured Content Slider

SharePoint Featured Content Slider for 2010

SharePoint Featured Content Slider

So I rewrote this web part to work a little better in SharePoint 2010. I made a few minor changes and improvements. If you can think of other improvements put them in the comments. Here is the older version.

Whats new

  • Added an order field to the List template to allow more control of the display order. In the list template this field is setup to require unique values.
  • Re-wrote the CSS to include some new CSS3 enhancements. If you are using a newer browser the slider will look better.
  • Tested across muliple browsers. See screenshots below.

Read More

Block multi-document uploads in SharePoint

Block multi-document uploads in SharePointIn SharePoint 2007 when a document library has required columns for metadata or other information the user is prompted to complete the information when a new document is added. However if the user chooses the ‘Upload Multiple Files” option they are not required to populate required columns. After the files are load and a user goes in to edit they will be prompted to fill in the information.

In some cases this may not be an issue but if the library has workflows triggered by column values or views sorted or filtered based on those metadata columns there could be problems. So of course there is use training that can be done to ensure documents are always properly populated with metadata but sometimes that is not enough.

(more…)

Read More