Share point saturday presentation 9 29-2012-2

Local Touch – Global Reach

www.us.sogeti.com

Javascript-Based Solutionsin SharePoint 2010

Derek GusoffSenior ConsultantSogeti USA

2www.us.sogeti.comLocal Touch – Global Reach

About Me

Derek Gusoff

Senior Consultant with Sogeti USA since 2008

@dgusoff

http://derekgusoff.wordpress.com

derek.gusoff@us.sogeti.com

3www.us.sogeti.comLocal Touch – Global Reach

Agenda

• Why JavaScript?

• A story

• A defense of JavaScript

• jQuery (with demos!)

• Accessing data in SharePoint

– ASMX web services / SPServices

– REST interface

– Client Object Model (with demos!)

• Debugging and Troubleshooting

• The OOB JavaScript files

• Case Study

• Q & A

• The craziest thing I’ve ever done in JavaScript

4www.us.sogeti.comLocal Touch – Global Reach

Why JavaScript?

• SharePoint provides a UI right out of the box

• It doesn’t always meet all our needs

• JavaScript can fill the gap between standard functionality and your organization’s unique business requirements.

http://www.leadersintheknow.biz

5www.us.sogeti.comLocal Touch – Global Reach

A Story

http://www.learningjquery.com/

6www.us.sogeti.comLocal Touch – Global Reach

The trouble with JavaScript

http://blogs.claritycon.com/blog/

7www.us.sogeti.comLocal Touch – Global Reach

jQuery

8www.us.sogeti.comLocal Touch – Global Reach

Three things jQuery does extremely well

• Manipulate the DOM

• Make AJAX calls

• Handle Events

9www.us.sogeti.comLocal Touch – Global Reach

jQuery Selector syntax

Note: the $ function always returns an array

http://api.jquery.com/category/selectors/

10www.us.sogeti.comLocal Touch – Global Reach

jQuery AJAX calls

http://api.jquery.com/jQuery.ajax/

11www.us.sogeti.comLocal Touch – Global Reach

jQuery Events

• A simple, easy-to-use method for subscribing to events in the web page

• The ready() event – executes when the page DOM is loaded

• An example of a click handler

• http://api.jquery.com/category/events/

12www.us.sogeti.comLocal Touch – Global Reach

jQuery

Demo

13www.us.sogeti.comLocal Touch – Global Reach

SharePoint JavaScript APIs

• ASMX web services

– SOAP-based

– Lots of functionality not available anywhere else

– Supposedly deprecated in SP2013 but still supported

– Search

– User Profilles

– Versions

– FBA

– Social Data

– Sites, Webs, Lists, Views, Content Types

http://msdn.microsoft.com/en-us/library/ee705814.aspx

14www.us.sogeti.comLocal Touch – Global Reach

ASMX Web Services

15www.us.sogeti.comLocal Touch – Global Reach

SPServices

• Third-party jQuery-based library for SharePoint

• Available at http://spservices.codeplex.com/

• You can think of it as a wrapper for the ASMX web services but it’s more than that.

16www.us.sogeti.comLocal Touch – Global Reach

SPServices

17www.us.sogeti.comLocal Touch – Global Reach

REST Interface

• A RESTful way to access SharePoint List data

• The REST interface has been completely replaced in SP2013, so any 2010 development will need to be redone after upgrade to 2013.

• URL-based syntax

18www.us.sogeti.comLocal Touch – Global Reach

REST Interface

19www.us.sogeti.comLocal Touch – Global Reach

Client Side Object Model (CSOM)

• Provides a programming interface familiar to .NET developers

• The preferred method for interacting with SharePoint in JavaScript in 2010 and 2013

• Uses a web service called Client.svc under the hood.

• Asynchronous operation

• Limitations

– Unlike REST or ASMX, the CSOM is scoped to a site collection

– Limited to operations within a site collection

20www.us.sogeti.comLocal Touch – Global Reach

Client Side Object Model (CSOM)

21www.us.sogeti.comLocal Touch – Global Reach

Client Side Object Model (CSOM)

Demos

22www.us.sogeti.comLocal Touch – Global Reach

Debugging tools and techniques

• Internet Explorer Developer Tools (F12)

• Visual Studio

• Fiddler

23www.us.sogeti.comLocal Touch – Global Reach

Provisioning JavaScript to SharePoint

“The evolution of a SharePoint Developer”

• Content Editor Web Part

• SharePoint Designer

• Visual Studio Solution package

24www.us.sogeti.comLocal Touch – Global Reach

Referencing JavaScript files in SharePoint pages

• <script> tag in page

• <script> tag in Master page

• <CustomAction Location=“ScriptLink”

• Try to put commonly used functionality in common files referenced across the site

• Try to put page-specific code in files referenced only in that page or pages

25www.us.sogeti.comLocal Touch – Global Reach

OOB SharePoint JavaScript files

• To view debug version of SharePoint’s JavaScript files:

• Modify this element on the web app’s web.config:

• <compilation batch="false" debug="true">

• Interesting files to check out;

• Core.js

• SP.js

– The “SP.*js” files represent the client object model

• Init.js

• Form.js

26www.us.sogeti.comLocal Touch – Global Reach

Reference Implementation: Filtered Lookups

Requirements

• Need a way to filter lookups by user-entered criteria

• Also need a default search filter( only open projects, for example)

• Need to support a variety of search operators(Equal, Not Equal, Contains)

• NO Code allowed

27www.us.sogeti.comLocal Touch – Global Reach

Filtered Lookups – Design considerations

• The list architecture for lookups does not need to change – only the user interface• We only need to change the user interface(manipulate the DOM)

• We need a way to generate (on the fly) a query, merge it with a default query, send it to SharePoint, and process the results

• We can use jQuery to hide the default lookups and replace with our own

• We can launch a form in a dialog to capture the user’s query

• We can use the Client Object model to create our query, fetch the desired results and place them back into the form

28www.us.sogeti.comLocal Touch – Global Reach

Filtered Lookups

Demo

29www.us.sogeti.comLocal Touch – Global Reach

The craziest thing I ever did with JavaScript

http://blogs.claritycon.com/blog/

www.us.sogeti.com

Local Touch – Global Reach

Thank you