SharePoint Saturday presentation, Detroit, Sept 29, 2012

1. Local Touch – Global Reach
Javascript-Based Solutions
in SharePoint 2010
Derek Gusoff
Senior Consultant
Sogeti USA
www.us.sogeti.com

2. About Me
Derek Gusoff
Senior Consultant with Sogeti USA since 2008
@dgusoff
http://derekgusoff.wordpress.com
derek.gusoff@us.sogeti.com
www.us.sogeti.com 2
Local Touch – Global Reach

3. 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
www.us.sogeti.com 3
Local Touch – Global Reach

4. 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
www.us.sogeti.com 4
Local Touch – Global Reach

5. A Story
http://www.learningjquery.com/
www.us.sogeti.com 5
Local Touch – Global Reach

6. The trouble with JavaScript
http://blogs.claritycon.com/blog/
www.us.sogeti.com 6
Local Touch – Global Reach

7. jQuery
www.us.sogeti.com 7
Local Touch – Global Reach

8. Three things jQuery does extremely well
• Manipulate the DOM
• Make AJAX calls
• Handle Events
www.us.sogeti.com 8
Local Touch – Global Reach

9. jQuery Selector syntax
Note: the $ function always returns an array
http://api.jquery.com/category/selectors/
www.us.sogeti.com 9
Local Touch – Global Reach

10. jQuery AJAX calls
http://api.jquery.com/jQuery.ajax/
www.us.sogeti.com 10
Local Touch – Global Reach

11. 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/
www.us.sogeti.com 11
Local Touch – Global Reach

12. jQuery
Demo
www.us.sogeti.com 12
Local Touch – Global Reach

13. 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
www.us.sogeti.com 13
Local Touch – Global Reach

14. ASMX Web Services
www.us.sogeti.com 14
Local Touch – Global Reach

15. 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.
www.us.sogeti.com 15
Local Touch – Global Reach

16. SPServices
www.us.sogeti.com 16
Local Touch – Global Reach

17. 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
www.us.sogeti.com 17
Local Touch – Global Reach

18. REST Interface
www.us.sogeti.com 18
Local Touch – Global Reach

19. 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
www.us.sogeti.com 19
Local Touch – Global Reach

20. Client Side Object Model (CSOM)
www.us.sogeti.com 20
Local Touch – Global Reach

21. Client Side Object Model (CSOM)
Demos
www.us.sogeti.com 21
Local Touch – Global Reach

22. Debugging tools and techniques
• Internet Explorer Developer Tools (F12)
• Visual Studio
• Fiddler
www.us.sogeti.com 22
Local Touch – Global Reach

23. Provisioning JavaScript to SharePoint
“The evolution of a SharePoint Developer”
• Content Editor Web Part
• SharePoint Designer
• Visual Studio Solution package
www.us.sogeti.com 23
Local Touch – Global Reach

24. 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
www.us.sogeti.com 24
Local Touch – Global Reach

25. 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
www.us.sogeti.com 25
Local Touch – Global Reach

26. 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
www.us.sogeti.com 26
Local Touch – Global Reach

27. 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
www.us.sogeti.com 27
Local Touch – Global Reach

28. Filtered Lookups
Demo
www.us.sogeti.com 28
Local Touch – Global Reach

29. The craziest thing I ever did with JavaScript
http://blogs.claritycon.com/blog/
www.us.sogeti.com 29
Local Touch – Global Reach

30. Local Touch – Global Reach
Thank you
www.us.sogeti.com