harnessing client-side technologies to enhance your sharepoint site
Post on 10-May-2015
4.387 Views
Preview:
DESCRIPTION
TRANSCRIPT
© 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
top related