© Ignia Pty Ltd 1

Presented by:

Harnessing client-side technologies to enhance your SharePoint site

Matt Menezes

© Ignia Pty Ltd 2

Who am I

Matthew MenezesSenior Solutions Consultant at Ignia

E: matt.menezes@ignia.com.auT: @spmatt_menezesB: http://spmatt.wordpress.com

7+ years .NET / Microsoft technologies4+ years SharePoint

MCTS: Application DevelopmentMCTS: WSS Configuration & DevelopmentMCTS: MOSS ConfigurationMCTS: SharePoint 2010, Application DevelopmentMCPD: SharePoint Developer 2010

© Ignia Pty Ltd 3

Agenda

• JavaScript• jQuery• Knockout• SignalR• Client Object Model• REST services• SPServices• HTTP Handlers• Content Query Web Part

© Ignia Pty Ltd 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 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 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 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 8

Plugins!

• Accordion menu• Image sliders• Lightbox• Tooltips• Auto Extenders• Pagination• A-Z lists• Charts and graphs

© Ignia Pty Ltd 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 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 11

Retrieving Data on the Client Side

• Client Object Model• REST Services• SPServices• HTTP Handlers• Content Query Web Part

© Ignia Pty Ltd 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