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

<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; 
}
Inline Editing for document libraries

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.

search

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.

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

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. 

Switch views using CSS and jQuery

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.

A Better Annoucements Ticker

A while back I did a post about how to make a vertical news ticker, in the comments several people pointed out problems with the code so I decided to write a better version of the code. Here it is.

New Ticker

For this ticker I started out with a default Annoucements list. Because I wanted to display a thumbnail for each annoucement I added a signle line of text column called Subtitle and a Picture column called Picture. Here are the columns I used.
List Columns

Switch Themes Without a Page Refresh: Part 2

So in part one of this post we got all the CSS and other theme file we needed to stuck them in a document library.

With JavaScript you can change the CSS file a page uses without requiring a page refresh.  I have used this technique many times on non-SharePoint sites but there are some special challenges implementing this in SharePoint.  Most of the scripts I have used in the past use the alternate style sheet method as describred by A List Apart here. That method works fine but I had to find another way because I was already using that script to allow users to change the font size. After some research I found this script from CSS Newbie that worked pretty well without using alternate style sheets.

The problem

While the script works just fine on regular HTML pages it cause problems in SharePoint here is why :

 $("link").attr("href",$(this).attr('rel')); 

This line of code basically finds all the linked CSS files in the page and changes thier value to point to the new style sheet you select.  This is fine on a site that just uses one CSS file but in SharePoint bad things happen.  In most cases we dont want to completely remove the reference to core.css. For most themes many elements don’t need to be changed so we only have to write the CSS to change them and let core.css do the rest.  If you remove core.css its like using a global reset (discussed in more detail here) which means you will have to restyle everything.  So them point is we want to leave core.css in the page and just add our theme.

To do this I had to make some changes to the master page to create to interface users will use to swap themes.

Switch Themes Without a Page Refresh: Part 1

Many sites offer the ability for users to change the color and style of the site to fit their preference.  SharePoint has this feature to some extend through themes but changing themes is not a very simple process and requires browsing to several pages.

With JavaScript you can change the CSS file a page uses without requiring a page refresh.  I have used this technique many times on non-SharePoint sites but there are some special challenges implementing this in SharePoint.  For this solution there were several requirements.

  • Users need to be able to switch themes and have the setting saved
  • No page refresh
  • Should be able to use both out of the box themes and custom themes

So first I needed to get the CSS files and images for the themes I wanted to use.  When you assign a theme to a site all the files for the theme are copied to a folder named _themes in the root of the site.

_themes folder

So what I did was assign each theme I wanted to use to the site one at a time.  With SharePoint designer I copied the files folders for each theme into a document library called Site Styles.  Each folder contains all the resources needed or the theme to work. 

AnythingSlider in SharePoint

Anything Slider in SharePoint – Update

Several people have asked how to change the under of items displayed in the slider and how to change the sort order.

Item Limit

To change the number of items displayed use the code below.

<xsl>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
	<xsl:output method="html" indent="no"></xsl:output>
	<xsl:decimal-format NaN=""/>
	<xsl:param name="dvt_apos">&apos;</xsl:param>
	<xsl:variable name="dvt_1_automode">0</xsl:variable>
	<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
		<xsl:call-template name="dvt_1"/>
	</xsl:template>
	<xsl:template name="dvt_1">
		<xsl:variable name="dvt_StyleName">Table</xsl:variable>
		<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"></xsl:variable>
		<xsl:variable name="RowLimit" select="3"></xsl:variable>
		<xsl:variable name="dvt_RowCount" select="count($Rows)"></xsl:variable>
		<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0"></xsl:variable>
		   <link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
		<script type="text/javascript" src="js/jquery.easing.1.2.js"></script> <script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"></script> <div class="anythingSlider">
			<div class="wrapper">
		<ul>
			<xsl:call-template name="dvt_1.body">
				<xsl:with-param name="Rows" select="$Rows" />
				<xsl:with-param name="FirstRow" select="1" />
				<xsl:with-param name="LastRow" select="$RowLimit" />
			</xsl:call-template>
		</ul>
		</div>
        </div>
	</xsl:template>
	<xsl:template name="dvt_1.body">
		<xsl:param name="Rows"></xsl:param>
		<xsl:param name="FirstRow"></xsl:param>
		<xsl:param name="LastRow"></xsl:param>
		<xsl:for-each select="$Rows">
			<xsl:variable name="dvt_KeepItemsTogether" select="false()"></xsl:variable>
			<xsl:variable name="dvt_HideGroupDetail" select="false()"></xsl:variable>
			<xsl:if test="(position() &gt;= $FirstRow and position() &lt;= $LastRow) or $dvt_KeepItemsTogether">
				</xsl:if><xsl:if test="not($dvt_HideGroupDetail)" ddwrt:cf_ignore="1">
					<xsl:call-template name="dvt_1.rowview" />
				</xsl:if>
			
		</xsl:for-each>
	</xsl:template>
	<xsl:template name="dvt_1.rowview">
		<li>
		<div class="textSlide">
			<h3><a href="/{@FileDirRef}/DispForm.aspx?ID={@ID}" title="{@Title}"><xsl:value-of select="@Title" /></a></h3>
			<xsl:value-of select="@Body" disable-output-escaping="yes" />
		</div>
		</li></xsl:template>
	</xsl:stylesheet>
</xsl>