SharePoint developers are often far too quick to jump into Visual Studio to solve every problem they face. It’s easy to get stuck in the .NET 2.0 way of thinking and get shielded from the latest technology and trends absorbing the web. SharePoint 2010 opened the door to client side technologies by introducing the Client Object Model and REST services – it’s only right that we as developers learn to embrace it. Curious to see how simple it is to combine the Client Object Model with jQuery? Create out of the box solutions with the Content Query Web Part and XSL? Explore the power of REST services with Knockout? Or perhaps see what all the fuss is about regarding SignalR? This session is not just for developers. Rather than deep dive into a particular client side technology we’ll explore this range of tools at our disposal to deliver interactive user experiences. Learn how to harness these client side technologies to rapidly deliver solutions for your organisation, whether you’re an architect, developer or power user there will be something here to get your imagination running wild.

1. Harnessing client-side technologies
to enhance your SharePoint site
Presented by: Matt Menezes
© Ignia Pty Ltd 1

2. Who am I
Matthew Menezes
Senior Solutions Consultant at Ignia
E: matt.menezes@ignia.com.au
T: @spmatt_menezes
B: http://spmatt.wordpress.com
7+ years .NET / Microsoft technologies
4+ years SharePoint
MCTS: Application Development
MCTS: WSS Configuration & Development
MCTS: MOSS Configuration
MCTS: SharePoint 2010, Application Development
MCPD: SharePoint Developer 2010
© Ignia Pty Ltd 2

3. Agenda
• JavaScript
• jQuery
• Knockout
• SignalR
• Client Object Model
• REST services
• SPServices
• HTTP Handlers
• Content Query Web Part
© Ignia Pty Ltd 3

4. JavaScript
• JavaScript is a dynamic scripting language
• Primarily used for client-side scripting
• Supported by web browsers
• Requires JavaScript to be enabled within the browser
© Ignia Pty Ltd 4

5. jQuery
• jQuery is a cross-browser JavaScript library
• Designed to simplify client-side scripting
• As it is based on JavaScript, also requires JavaScript to be enabled
• Requires a reference to the jQuery library
• So popular now, the libraries are hosted on multiple content delivery networks
• http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
• http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js
• http://code.jquery.com/jquery-1.6.4.min.js
© Ignia Pty Ltd 5

6. The basics
The old way:
var elem = document.getElementById(“id1");
The jQuery way:
$(‘#id1’) // get by id
$(‘.class1’) // get by class
$(‘a’) // get by element type
Large array of built in functions to make scripting easier:
• Selectors
• Attributes
• Traversing
• Manipulating the DOM
• CSS
• Events and more
© Ignia Pty Ltd 6

7. Tips and Tricks
• Use jQuery.noConflict()
• Use jQuery(document).ready()
• Leverage callbacks
• Don’t write scripts directly into the CEWP
• Know your options for referencing jQuery
• Enable Intellisense in Visual Studio
• Know your options for debugging
© Ignia Pty Ltd 7

8. Plugins!
• Accordion menu
• Image sliders
• Lightbox
• Tooltips
• Auto Extenders
• Pagination
• A-Z lists
• Charts and graphs
© Ignia Pty Ltd 8

9. Knockout
• Is a JavaScript library which uses ‘observers’ to sync the UI with a data model
• Dependency is tracked throughout the view model
• You declaratively bind properties in the view model to elements
• Can data-bind to templates, nested templates and loop through data
• Can use jquery-tmpl or jsRender for templating
• Works particularly well with the MVVM (model-view, viewmodel) pattern
© Ignia Pty Ltd 9

10. SignalR
• Real-time client/server communication over the web
• Runs on the .NET 4.0 framework
• Can support cross-domain calls
© Ignia Pty Ltd 10

11. Retrieving Data on the Client Side
• Client Object Model
• REST Services
• SPServices
• HTTP Handlers
• Content Query Web Part
© Ignia Pty Ltd 11

12. References
• Auto Extender:
http://sharepointsix.blogspot.com.au/2012/05/
sharepoint-2010-using-sharepoint-client.html?spref=tw
• Image Slider:
http://sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=6
• Enable Intellisense
http://www.sharepointnutsandbolts.com/2010/12/
sp2010-ajax-part-5-enable-intellisense.html
© Ignia Pty Ltd 12