Building public facing websites on SharePoint 2013 – Part 2

Following on from my slides discussion at Building public facing websites on SharePoint 2013 – Part 1, this article will dive into the 4 demonstrations which accompanied the session.

Branding with the Design Manager

Before I started, I had performed the following steps:

  1. Took the home page template, moved all resources into the same directory and adjusted the links (resources could be stored anywhere really, this is how the examples generally have it)
  2. Removed any ‘form’ elements and replaced them with DIVs (these could be made functional later)
  3. Ensured the template was XHTML compliant
  4. Created a new web application with a site collection using the Publishing template

Using the Design Manager to create a custom branded Master Page:

  1. Click on the Design Your Site link on the welcome page or access it via the ‘cog’ which represents site actions and select Design Manager (this page gives you a wizard type interface to complete the process – however a lot of the steps are just information regarding how to carry out a particular step)
  2. The first step we’re interested in is uploading our design files and to achieve this we need to map the network drive
    1. Open File Explorer
    2. Right click on ‘Network’ and click ‘Map network drive’
    3. Connect to the Master Page catalogue (which is linked to on that page)
    4. Copy the entire design folder in there
  3. Once we’ve done that we want to publish all the files in SharePoint either by going to the Master Page gallery in Site Settings or using Manage Content and Structure (which has been removed from the Site Actions, you now have to go to Content and Structure in Site Settings or just type in the address manually)
  4. Back to Design Manager and Convert an HTML file to a SharePoint Master Page (select our html file and click insert)
  5. Click on the link to the new master page to open it up and see if there are any issues – note that the content placeholder is placed at the bottom of the HTML file
  6. Open up the HTML file again via the mapped drive and move the snippet to the right location – we can grab the placeholder main snippet and paste it where we want it to be, removing the temporary display div (you can see that a number of snippets have been inserted into the HTML file so it’s important not to mess around with them if you’re not sure of what you’re doing)
  7. Save the changes – that automatically updates the master page, we can now publish it and assign it to be the master page for our site
  8. View the home page – the master page has been implemented

A few other features I showed but didn’t delve into:

  1. You can create a linked page layout by going to Edit Page Layouts in the Design Manager and clicking on Create a page layout (if we go into our mapped drive we can see that the HTML has been created and can then edit that like we did the master page which will automatically update the layout)
  2. We also have the snippet generator which we can get to by opening one of our master pages and clicking the Snippets link (there’s a bunch of pre-defined snippets which you can customise and copy into your master page or layouts – you can also use the custom ASP.NET Markup snippet to insert pretty much anything you can think of including references to custom controls you’ve deployed)

A couple of things worth mentioning:

When I was first looking into the suitability of the design manager I weighed it up against the starter master pages Randy Drisgill creates (he has 2013 versions). I ended up going down that path for a number of reasons:

  • for highly customised sites the whole snippet generator function didn’t seem efficient
  • the source control and deployment story for the branding elements is less than optimal, even though you can export packages it’s easier to keep everything together in one solution
  • editing the HTML with all the snippets in there seemed more confusing, particularly for page layouts which are generally much more simple in VS
  • my general impressions were that the Design Manager was great for designers and that was its purpose – if you’re a SharePoint developer, the standard VS method of development was more efficient

However later when I was figuring out a bug which existed in an earlier version of the starter master pages (and still appears to be there), it became apparent that the master page generated from that process was almost identical to the starter master page – so in future I would use the Design Manager to create the initial Master Page, bring it into Visual Studio and take it from there.

Another thing worth mentioning is that if you are trying to peel back the Master Page to make it as minimal as possible, you may be tempted like I was to remove the AjaxDelta elements which exist for the Minimal Download Strategy which is unfortunately not available for Publishing Sites. SharePoint however relies on the one surrounding the main content placeholder to insert the web part property editing toolbar so make sure you at least leave that in (that was actually the bug in the early version of the starter master page). I also wouldn’t advise on removing the DIVs with the IDs s4-workspace and s4-bodyContainer unless you want to lose your scrollbars.

Managed Navigation & Friendly URLs

  1. Firstly you need to ensure that the Managed Metadata Service application is available for your web application as it is what drives the friendly URLs
  2. You also need to ensure that a default Managed Metadata Service has been selected – you do this in Central Administration (if this has been done before the web application is created then the site will use managed navigation by default)
    1. Go to Manage Service Applications
    2. Click on the Managed Metadata Service connection (the proxy) and click Properties
    3. Check the ‘This service Application is the default storage location for column specific term sets’ checkbox
  3. If your site is still defaulting to the /Pages/Page.aspx URL then you need to set up Managed Navigation as the default in site settings
    1. Go to Site Settings and the Navigation link
    2. Select the Managed Navigation options and create a term set and click OK (the Add new pages automatically and create friendly URLs automatically are selected by default – this can be changed if desired)
  4. Go back to the site and see that the URL is now in a more friendly fashion
  5. Add a new page from the site actions menu to see that it is automatically given a friendly URL to access the page by
  6. Go back into the Navigation settings where we can open the Term Store Management Tool and configure our managed navigation – if we select our managed navigation term set there are a few useful options which will come in handy for setting up the managed navigation for a site
    1. Custom Sort is particularly useful if you want a navigation order different to the default alphabetical
    2. You can move the terms around if you want a particular navigation structure other than what was created by default
    3. For a term which is acting as a container rather than a page itself you can select the Simple link or header navigation node type
    4. You may also want a particular page to not appear in the navigation – particularly pages like disclaimers and copyright statements etc – you can uncheck the Visibility in Menus options in these cases
    5. You have the ability to customise the friendly URL if you weren’t happy with the default value automatically assigned via the pages title
    6. If you’re creating the navigation structure after the fact for pre-existing pages, or if you create additional duplicate navigation for a page, you can set the Target Page for this Term to associate the term with the relevant page

3 major points I’ve come across when working with Managed Navigation:

  • If you’re creating a custom navigation control or using something like Waldek Mastykarz’ Templated Menu you’ll need to access the Global or Current NavigationTaxonomyProvider rather than the Global or Current NavSiteMapProvider. One issue to consider here as well is that because you can access the page via the friendly URL or the standard structured URL the taxonomy provider will only work if you accessed it via the friendly URL
  • If you’re editing content and want to link to your page, you should no longer use the Link from SharePoint option and browse to the page you want to link to, because it will use the structured URL in the link. Even though the page will load at this URL you lose the friendly URL when you visit the page and you also cause search engines to think there is duplicate content on your site if it can hit the page from 2 different URLs – so unfortunately you should only use the Link from address option
  • The third point is more of an annoyance than anything else, but I’ve noticed a lot if you do particular actions on a page such as editing the page properties, when you’ve finished that task you’re taken back to the structured URL rather than the friendly URL, so I think there are still a few kinks to iron out

Content by Search & Display Templates

In the network connection to the Master Page Gallery set up earlier there is a folder called Display Templates – depending on what sort of template you want to edit or create, in general you’ll find that for content by search web parts you’ll need to edit within the Content Web Parts folder and for search results you’ll need to edit within the Search folder.

You’ll see both HTML and JavaScript files within there – this is similar to the link between the Master Pages and the HTML files we saw before – you only need to edit the HTML file and the JavaScript will automatically be updated. Similarly so if you are creating a new display template then you just need to drop the new HTML file in there and the JavaScript will be automatically created.

The best technique I’ve found to work with these templates is to grab an existing HTML file, edit it to suit your needs then drop it back in to the folder. This will automatically create the JavaScript which you can then take and deploy in your solution.

What is important in this process is how you define the template within the feature – I’ve identified a subset of data that if you happen to leave out then your display template won’t appear for selection in the various web parts (this subset was discovered after some research following reading the thread How to deploy display templates via feature).

 <Module Name="SearchDisplayTemplates" Url="_catalogs/masterpage/display templates/search" Path="Display Templates" RootWebOnly="TRUE">
    <File Url="Item_ETI.js" Type="GhostableInLibrary">
      <Property Name="Title" Value="ETI Item" />
      <Property Name="TemplateHidden" Value="FALSE" />
      <Property Name="TargetControlType" Value=";#SearchResults;#" />
      <Property Name="DisplayTemplateLevel" Value="Item" />
      <Property Name="ManagedPropertyMapping" Value="'Path'{Path}:'Path','Title'{Title}:'SeoBrowserTitleOWSTEXT','ETIDescription'{ETIDescription}:'ETIDescriptionOWSMTXT'" />
      <Property Name="_ModerationStatus" Value="0" />
    <File Url="Control_ETI_HelpAndAdviceSearchResults.js" Type="GhostableInLibrary">
      <Property Name="Title" Value="ETI Help and Advice Search Results" />
      <Property Name="TemplateHidden" Value="FALSE" />
      <Property Name="TargetControlType" Value=";#SearchResults;#" />
      <Property Name="DisplayTemplateLevel" Value="Control" />
      <Property Name="_ModerationStatus" Value="0" />

When taking a look at the elements file snippet above which deploys the templates you can see the subset of data which is required. The target control type and display template level are both quite important fields as they determine where the template is available to select within the web parts, for instance a SearchResults Item template will be available from within the search results web part at the item level. The only difference among these entries is the managed property mapping property which is required if the template is dealing with non-standard fields – anyone familiar with editing XSL for the content query web part to display managed properties will see this as being a fairly familiar process.

Aside from the obvious use cases of determining the display of both content by search and search results web parts the other use I’ve found for editing these templates is to modify the hover over effect from within the search results – for anyone who’s not seen it basically when you hover over a search result you get a hover item come up to preview the document or page similar to how current web search engines respond and then there are some link options available such as open, share, alert and so forth – however on public facing sites it may not make sense to show some of these links, particularly for alerts where the anonymous user won’t be able to sign up for them, so you can create a new template which hides those links and associate the new template with the particular file type via the manage result types interface in site settings.

SEO features in SP2013

This one was nice and quick. As a prerequisite you need the publishing feature activated to access the SEO properties.

For any given publishing page across your site you can edit the page, go to the Page tab in the ribbon, drop down Edit Properties and select Edit SEO Properties.

The main features here are the ability to set a browser title, the meta description and keywords. We also have the ability to exclude a page from the generated XML site map if we don’t want it to be crawled.

Once we’ve entered in those values, we can view the source of the page and see that the page title is the Browser title and the meta description and keywords exist on the page.

Funnily enough the Browser Title feature (which seems almost redundant) had an unintended benefit for a current site I was building – the design included a heading structure whereby the largest title was one reflected on a parent node (could be many levels deep) and the sub-heading was the title of the page – I was able to set the Browser Title to be that of the page and set the page title to be that of the parent’s title which needed to be shown and rendered that through a field control without fear that the incorrect title would affect the Browser bar’s title or have any SEO implications.

The other SEO features are in Site Settings under Search Engine Optimization Settings which allows you to do a couple of things:

  • Firstly, you can enter in other meta fields which will be inserted onto your page
  • Secondly, you can list Canonical URLs which are basically where a given page would display the same content even if the query string was different – you can get the search engines to ignore those query elements

Another SEO feature requires you to activate a Site Collection Feature being the Search Engine Sitemap feature – this ensures SharePoint generates a Sitemap.xml and robots.txt file for the site. That feature exposes another link in Site Settings called Search Engine Sitemap Settings where the robots.txt entries can be customised. Your site is required to have anonymous authentication enabled for the sitemap feature to work.

Building public facing websites on SharePoint 2013 – Part 1

Yesterday I had the great opportunity to present at the Perth leg of SharePoint Saturday for 2013. Overall the event was a resounding success – the turnout was reasonable considering it was the day of the state election and while the numbers may have fluctuated across the entire day, a number of sessions were well attended in all of the time slots. I had roughly 25 in my session which didn’t reach the great heights of my user group session on Harnessing Client-Side Technologies to Enhance your SharePoint Site however seemed a decent turnout considering there were 2 other quality sessions on at the same time and the overall numbers would have been less than the many which attend the monthly UG sessions.

After having some success with my previous session linked above I decided to follow the same presentation format – half an hour dedicated to slides and theory and another half hour dedicated to demonstrations. At the end of the day I probably whipped through the slides a little quicker than I expected which guaranteed I had enough time to finish off the 4 demo’s I had hoped to get through.

This post will run through the background to each slide shown below, then part 2 will give a run through of the steps and comments associated with each demonstration performed.

Building public facing websites on SharePoint 2013

The cover slide gave me an opportunity to thank everyone for supporting SharePoint Saturday in Perth and particularly choosing my session for the time slot – it’s definitely something I appreciate and is worth repeating in this post. I covered off a little bit about myself and explained my public facing website journey on SharePoint starting at Tourism on the now infamous website and various partner sites to my more recent experiences at the Department of Training and Workforce Development on various departmental and TAFE institution web sites – the most recent being developed on SharePoint 2013.


There were 2 main things I wanted to get out of my session – firstly I wanted to generate some excitement on the possibilities that existed around building public facing websites on SharePoint 2013 but also transfer some knowledge around the key areas which are often neglected when building an internet facing site. I wanted to cover off how each version of the platform performed in each area then explore the new and exciting features which exist for web content management on SharePoint 2013, backed up by a number of demonstrations on my favourite features.

Branding & UX

Most people think branding SharePoint is all about slicing and dicing images into Master Pages and Page Layouts – and while this is a large part of it, there are a number of other factors which should be considered for a successful site. Implementing Custom Error Pages is one factor which is often forgotten about and can make the difference between your site looking professional or incomplete. The client-side and search experience is another area which can transform your site from something which looks good to something which performs great.

Search Engine Optimisation

SEO is often neglected or considered as an afterthought once the website has already gone live and traffic is not up to expectations – it is a crucial factor to consider to maximise the number of visitors to your public facing site. The topic is worthy enough of a presentation of its own however I have a 3-part blog series on Search Engine Optimisation for SharePoint Sites and Ian McNeice has written a great global SEO strategy book which cover the details. The main takeaway from this slide was that effective SEO requires a 3-phased approach – identify the keywords and phrases which are most effective to optimise for, optimise your site for those keywords and phrases and finally think outside the box for ways in which you can drive traffic to your site – rating well in the search engines in merely one component to an overall strategy.

Performance Optimisation

If SEO is all about bringing people to your site then Performance Optimisation is all about keeping them there. There are some great statistics and studies on the web which link bounce rates to page performance so it is most definitely an important factor to consider when building a site. There is a common misperception that SharePoint is inherently slow but that’s not a theory I subscribe to – a poorly developed and optimised site will perform badly on any platform – it’s just that SharePoint is easy to blame. Again this is another area in which an entire presentation could be dedicated and while I have another 3-part series on Performance Optimising SharePoint Sites the main takeaway was that while there are a number of generic and SharePoint-specific tasks you can target to optimise a site, there are also a number of great free tools available to benchmark and measure the performance of your pages including, ySlow and Google Page Speed.


From a couple of topics which are often neglected or postponed to one which is often discarded completely. While it’s understandable how accessibility sometimes falls by the wayside due to its at-times difficult and time consuming implementation on SharePoint it’s interesting to note the time often dedicated to cross-browser compatibility for browsers with a lower percentage of use compared to the numbers that would benefit from an accessible site. This is particularly important for WA Government Organisations who have a mandate to ensure all websites are WCAG 2.0 compliant by the end of 2013. Vision Australia has written a great whitepaper on Achieving Accessibility in SharePoint 2010 which should be read for more information.

SharePoint 2007

So how does each version of SharePoint fare in these areas? Before I start it’s important to point out that any discussion on Licensing is generic and ballpark – I’m no licensing expert and the numbers have been taken in US dollars and at the time they were relevant – see the hyperlinks for the source.

Licensing: MOSS was fairly expensive to host public facing sites. At roughly 40k per internet server plus external connector licenses and with best practice guidance recommending a staging server with content deployment to production you can quickly see how even with a small web farm of 2 front end web servers and an application server how costs would add up.

Branding: Nothing to write home about here – we had ASP.NET 2.0 Master Pages and Page Layouts but that’s about it. Guidance was low in the early days, the starter master pages had yet to become mainstream. Custom Error Pages (other than 404) were particularly difficult to implement. jQuery had yet to take hold which left us with the AJAX toolkit and UpdatePanels which unfortunately required a number of manual web.config modifications to get working. MOSS for internet sites required an enterprise license, so at least we had enterprise search.

SEO: Practically non-existent. Even targeting the most basic of generic techniques generally required custom development.

Accessibility: If SEO was bad then accessibility was worse. View source of a MOSS-hosted site and you’ll see table hell – I pity anyone who had the task of getting MOSS 2007 accessible.

SharePoint 2010

Things were a little better in 2010, this is generally how it measured up:

Licensing: While we were no worse of in 2010, we weren’t really much better off either. Enterprise internet servers were still around the 40k ballpark although the external connectors were a bit cheaper. We did have the ability to purchase Standard licenses for internet sites which would be about 25% of the price – however there were a few caveats which often meant this wasn’t feasible, particularly the inability to host multiple domains on the server.

Branding: The Master Page and Page Layout story was the same, however there was far more information available plus the starter master pages had become widely used. jQuery had taken off and there were a number of blog posts regarding how to include it in SharePoint and a number of plugins which could be leveraged, and if you were still stuck with the AJAX toolkit then at least it was supported out of the box. We had the option of using FAST search for internet sites (for an additional license cost) which gave some flexibility around search. The custom error page story was much better – far easier to implement across the board compared to SharePoint 2007.

SEO: Unfortunately much the same – custom development was still required.

Accessibility: Thankfully much better – SharePoint 2010 launched with the goal to being WCAG 2.0 AA compliant and while it didn’t quite get there, the HTML rendered was much cleaner (aside from the tables generated by web part zones) and there was guidance around making 2010 completely compliant via the whitepaper I’ve mentioned above.

SharePoint 2013

Definitely the best of the bunch which is no surprise considering I dedicated an entire presentation to it.

Licensing: While there may be no official licensing details available, a number of sources suggest that the licensing for 2013 will be far more affordable. No longer do we need internet server licenses – an enterprise license with internal CALs will suffice. FAST search is now also inbuilt rather than being an additional licensing requirement.

Branding: Has changed completely in 2013. While we can still use the tried and true method of Master Pages and Page Layouts in our VS solutions, we now have the Design Manager which puts the power into the Designer’s hand and removes the need to have SharePoint developers implementing branding. There is also webdav support to connect to the master page gallery directly with an ability to edit linked HTML files which will automatically update the associated master page. A custom 404 page is provisioned and editable straight out of the box in 2013 and the other error pages are just as easy to implement as 2010.

SEO: Finally the platform has treated SEO with the respect it deserves – a number of generic SEO requirements being available straight out of the box.

Accessibility: The HTML markup is cleaner again, web part zones no longer rendering out tables. I’m unsure if 2013 is completely WCAG 2.0 compliant however if it is not, it would definitely take less effort to ensure that it was.

New Features for WCM in SP2013

A large number of new features exist for web content management in SharePoint 2013 however these are the ones I believe will be the most useful for building public facing sites.

Pasting content directly from word: Previously the experience of pasting content directly from word was a painful one – embedded styles would remain and cause certain pages to look completely different from the rest of the site’s style. This new ability will remove the need to use notepad as a go-between when pasting content from word to SharePoint.

Image renditions: This feature is getting a lot of airplay currently over the web and for good reason – it’s a great new feature. Essentially allowing you to upload one larger image and create different ‘renditions’ of the image at different dimensions, this feature will be great for mobile versions of websites which will allow a smaller file-sized image to be downloaded for rendering. Requires the BLOB cache to be enabled.

Cross-site publishing: Another highly useful feature in SP2013. Allows content to be published from one site collection to another. Many practical uses include separating editing/publishing environments, variations and particularly relevant for myself and government departments who host multiple sites – being able to share content between them while maintaining the individual branding of each department’s site.

Managed navigation / friendly URLs: My favourite feature of the lot – managed navigation is a step away from the structured navigation we’ve grown accustomed to. Allows you to define a taxonomy hierarchy which will drive navigation. Most importantly it allows you to implement friendly URLs which users have been crying out for for some time but also allows you to decouple structure from navigation ensuring you no longer have to create numerous sub-sites just to position a particular page at a given URL.

Search driven content: Used significantly for the purposes of cross-site publishing, it also has other uses including amalgamating content. Similar in theory to the content query web part however uses search as its content source – necessary if you want your friendly URLs to be rendered via the query. The best part is that XSL is no longer required to style the output – we can now use HTML and JavaScript via Display Templates.

Design Manager + Device-specific targeting: While I mentioned the Design Manager previously, another great feature is device-specific targeting. This allows you to use the same pages and content but recognise the device accessing it so you can use different master pages and styles to render that content – highly valuable for mobile sites.

SEO features: Some search engine optimisation techniques are now available out of the box which is fantastic news for those building public facing websites on SharePoint 2013.

WCM Feature Demos

Refer to Building public facing websites on SharePoint 2013 – Part 2 for a run through of the demonstrations which were performed in this session and some of the comments surrounding them.

Questions? Comments? More info..

While no questions were asked on the day it probably had as much to do with the session running its full hour and lunch having already been served rather than the presentation being so comprehensive that no questions were necessary! If anyone has any questions or comments feel free to leave them on this post or get in touch with me directly.

Thanks for listening

And thanks for reading! It was a pleasure being able to present this session on such a great day at such a well organised event, Brian Farnhill and the team did a great job putting everything together, the sponsors came on board to offer a great venue, food and prizes for the day and I look forward to being a part of it sometime again in the future.

Harnessing Client-Side Technologies to Enhance your SharePoint Site

Yesterday I had the privilege of presenting at the Perth SharePoint User Group. The experience was sensational; the session went off without a hitch, the crowd was large, attentive and full of questions. Feedback both immediately after the session and that which filtered through later was very positive. As promised and to wrap up the event I thought it was only fitting that I posted my slides and a summary of the presentation – this is that post.

The day started off with a little milestone – something I’ve yet to see myself previously and which I expect is relatively rare for the PSPUG

100 tickets – the last one snapped up only hours before the event. I’ve been told Microsoft (who I must thank for allowing us to use their excellent facilities every month) was contacted on the day to hunt down some more chairs for the room. At best guess I’d say there was about 70-80 people who made it – evident by the few chairs left empty and the speed at which 15 family sized pizzas were demolished.

But enough with the background, onto the presentation itself. I had set it up to be roughly 30 minutes of slides and discussion and 30 minutes of demo. In the end I cut the demo’s a bit short – I figured it was more important to answer a few questions than explain the detail of what was going on for each one. I’ll fill the blanks in this post pointing off to the resources you’ll need to replicate the demos yourself. Along with posting the slides I’ll also jot down some of the main points I was trying to get across in each one.

Who am I

You may think this slide needs no explanation but I want to stress the point I made in the session again. While i’ve only recently joined twitter, the little gems of information I’ve been able to garner in that time have been extremely valuable. I avoided twitter like the plague, mostly due to an impression it was predominantly noise. It is. But if you can get past that you can get to its true value and keep in touch with what’s going on in the wider SharePoint community.


I was tossing up between deep diving into one of the technologies or doing a broad brush overview of the lot – clearly the latter approach was taken. The goal of the session was to inform and inspire – there is plenty of information out there to read up on at a later date – some of which i’ll outline in this post.


Not much to say here – bit of an obligatory slide to round out the presentation as a whole. We’ll move on.

jQuery & The basics

Aside from the information, the main point I want to highlight is that jQuery really isn’t that scary. It simplifies JavaScript a great deal and the learning curve really isn’t that steep compared to the benefits you’ll gain from using it. It’s quite performant and efficient when compared to some of the .NET based AJAX libraries out there, it’s become one of my favourite technologies to use when creating public facing websites and I hope I impressed at least a few in the audience enough to give it a shot. For a primer on some of the basics and functions jQuery provides, have a read of the documentation.

Tips and Tricks

There was a fair few tips and tricks to cover in the session – rather than explain each one i’ll attempt to link off to a resource which will do the job for me.

Putting jQuery into noConflict mode

Making use of jQuery(document).ready()

Leverage callbacks

Don’t write scripts directly into the Content Editor Web Part

(Keep in mind it may not be suitable for staged environments with content deployment – converts the link to an absolute url!)

Know your options for referencing jQuery

(Although I don’t have a problem with referencing on the master page)

Enable Intellisense in Visual Studio

Know your options for debugging

(Don’t forget about the console window in Firefox! Can be very useful. Also, remember that different browsers can often end up shedding the light on your issue, so don’t discount debugging in multiple browsers)

It would be remiss of me not to give a shout out to Chris O’Brien considering the last 2 links are from his blog. In fact, all the posts of that series are worth a read so I’d definitely encourage you to do just that.


The true power of jQuery lies in the multitude of plugins available to be used. They can be a huge time-saver and with a bit of knowledge you can often customise them to suit your needs. There are hundreds of quality resources out there explaining which plugins are great – i’ll leave it up to you to explore!


Knockout is fantastic. I can’t speak of it highly enough – do yourself a favour and check out the documentation and live examples to get a taste of what it is capable of. I could have done a whole presentation on Knockout itself – John Liu does a great one in his session SSPUG retrospective: Creating Knockout user experiences in SharePoint with JavaScript for those Aussies amongst us, definitely check it out if you get a chance. I hope I did it justice to peak your interest enough to dive deeper into the technology. Keep in mind that Knockout works brilliantly with both the jQuery templating libraries (jquery-tmpl or jsRender) and jQuery itself. I mentioned that while I’ve used jquery-tmpl in the past, it has been discontinued so you may want to look into jsRender instead.


This is another topic that could have had a session to itself. In fact, Christian Heindel already did – it was nice to see myself in someone elses slides half a world away! I didn’t dive too heavily into this, it was more of a primer to spark some interest and simply let the demo do the talking.

Retrieving Data on the Client Side

To date I had only discussed the tools available to present information on the client – this slide was all about how we got that information in the first place. Rather than link to resources here (it should be really easy to search for them yourself) what I’ll do is outline my main points discussed.

Client Object Model: handy tool provided in SP2010. Need to learn the syntax which is different from the standard OM and should definitely know some CAML. Important to consider performance when writing this code.

REST services: absolutely love them. Extremely valuable with their ability to return JSON data simply by structuring the URL with query string. Their ability to return JSON makes them great to combine with Knockout or jQuery.

SPServices: extremely valuable library written by a member of the SharePoint community Mark D Anderson. Perfect for those stuck on SP2007 but also valid for SP2010. Have a read of the debate going on regarding when you should use one or the other.

HTTP Handlers: another tool at your disposal in SP2007. To be honest the main reason I have used these is because I wasn’t truely aware of the power of SPServices. The general premise is you fire off to the HTTP Handler which runs some server side code, serializes the data into JSON and returns it back via Response. Still handy if you simply MUST have JSON in SP2007.

Content Query Web Part: not strictly a client side technology, but it is so powerful out of the box that it deserved a mention. Combined with a bit of XSL it is truely one of if not the best web parts provided to us in SharePoint.


And then it was time for the fun stuff. I considered recording all of the demo’s to place here but it wouldn’t have been as relevant without the accompanying dialogue, and I didn’t really want to record my own voice. I’ve settled for links to the inspiration behind each demo – if you have any questions feel free to ask and I will go into more detail.

Demo 1: Client Object Model & jQuery

This one came from a tweet I noticed a week before my presentation. Take a look at Using the SharePoint Client Model to populate a jQuery AutoComplete box by Douglas Leung. The delay you get before the autocomplete kicks in is because we’re waiting for SharePoint to load the relevant scripts before we bind the event.

Demo 2: SPServices & jQuery

Thankfully I dropped the right name in my presentation! It was Mark Rackley responsible for the inspiration behind An Easy to Use Content Slider. Sure his version isn’t as good as the one which featured some of the best the mighty Fremantle Dockers have to offer, but the general vibe of the slider is the same 😉

Demo 3: Content Query Web Part + XSL + jQuery

I’ve said all I need to say about this one in my post Using the Content Query Web Part and jQuery to create a staff desk locator so if you’re interested pop over to that post and take a look at the nuts and bolts holding it together. One point I did mention in the presentation is that the solution kind of grinds to a halt in the older versions of IE due to the struggles it has with larger-scale manipulation of the DOM.

Demo 4: REST services + Knockout + TMPL + jQuery slider + jQuery validation + jqPlot

Yes, there was a lot to this one. I did create this demo specifically for the session but my post on Applying the MVVM pattern to create SharePoint list-driven interactive tools using Knockout covers the jist of it. If not, just drop me a line.

Demo 5: SignalR

Definitely a topic which gets me pretty excited. The demo I showed was the same one I posted in Harnessing SignalR in SharePoint – complete with video! So check it out if you want a look under the hood at how we made that happen.

And that pretty much covers it. There were some great questions to follow the session, enough so that all of the left over SP Saturday ‘limited edition’ USB key’s were given away. I truely appreciated the opportunity to present again at the user group and was humbled by the turnout. I hope a few people were inspired to go out and try some of the technologies presented in their own SharePoint environments.

I’ll sign off with a couple of tweets I received after the session – one in particular that made the whole session worth while!