1. Facebook Like Solution in SharePoint Using JavaScript Amie Seisay www.seisayitsolutions.com amie@seisayitsolutions.com @AmieSeisay

2. Background – Where It All Began in 2003…

3. @AmieSeisay Background – What I Enjoy Now LOTS of JavaScript and CSS!

4. @AmieSeisay Background - Certifications SharePoint 2010 Administration CIW v5 Associate MCTS 70-667: Microsoft SharePoint 2010, Configuration Certified Technical Trainer Macromedia Dreamweaver 8 ITIL Foundation

5. @AmieSeisay Background – Leadership Duties International Association of Microsoft Channel Partners

6. @AmieSeisay Business Problem  An organization wants to encourage employee use of their SharePoint Intranet with content that will entice people to use it.  Business Translation: We spent money on this system, people need to use it!  Everyone strongly disliked the previous Intranet… Failure was not an option.

7. @AmieSeisay Bigger Business Problem  An organization wants to capture suggestions on:  Business process improvement  Internal culture dynamics  Improving services provided to customers

8. @AmieSeisay Business Solution  People like to eat! A solution should be developed in SharePoint where employees can post their favorite food truck that regularly stop near the office building.

9. @AmieSeisay The Solution Should…  Allow anonymous submissions  Allow people to like submissions  Allow admins to see who liked submissions  Show top five rated submissions  Show most recent submissions  Allow people to comment on submissions

10. @AmieSeisay Technical Limitations  No deployed solution  No developing solutions to a SharePoint server where Visual Studio installed.  Requestor is unsure of final product. Technical Translation: They will change their minds…a lot! Lots of re-development will occur.

11. @AmieSeisay Software Limitations  SharePoint 2010 out-of-the-box  “I Like It” feature: A tag on a user profile tag  Rating feature: 5 star rating system  Discussion Board: Ridiculously hard to customize  SharePoint 2013 out-of-the box  Like feature: Doesn’t show who liked the submission

12. @AmieSeisay The Solution  Two lists: lookup field to tie lists together  List views: filter list items to show top, most recent, and single submissions along with comments  JavaScript/Client Side Object Model: update list with tally of “Likes” and captures anonymous submissions  JavaScript: auto select lookup value  XSL: Style list data

13. @AmieSeisay Gotchas!  For the column to capture users who Like a submission  Don’t add a single line of text field; Limited to 255 characters  Do add multiple lines of text field as the column type  Don’t allow people to like submissions more than once  Be sure to give all users at least Contribute permissions  Don’t require pages to be checked out

14. @AmieSeisay Client Side Object Model (CSOM)  Client object model is used to retrieve, update, and manage data.  SharePoint makes the client object model available in a number of variations:  In SharePoint 2010,  JavaScript Object Model (JSOM) .NET assemblies  Silverlight assemblies  In SharePoint 2013,  All of the above from 2010  REST/OData endpoints  Windows Phone assemblies

15. @AmieSeisay JavaScript Object Model (JSOM)  JavaScript Client Side proxy objects are located in sp.js  Proxies conduct communication through Client.svc  Client.svc communicates with the Server Object Model  Server Object Model grabs data from the SharePoint content database  The results are then sent back to the client’s browser in JSON

16. @AmieSeisay Demo @AmieSeisay

17. Establishing a CSOM Connection  ClientContext  Acts as the proxy between the code (Javascipt/.NET assemblies) and Client.svc (WCF web service)  sp.js needs to load first before ClientContext!  These functions assist with order of loading: executeOrDelayUntilScriptLoaded(functionName, sp.js) SP.SOD.executeFunc('sp.js', 'SP.ClientContext', functionName)

18. @AmieSeisay Flow of CSOM

19. @AmieSeisay Benefits of CSOM in 2010  Improved security  Does not impact the farm level: solutions do not have to be deployed  Site collection level access  Ease of Development  Designed to be used in client side solutions where SharePoint isn’t installed  Performance  Batch requests and perform all operations asynchronously: minimizes the number of round trips to the server

20. @AmieSeisay CSOM 2010

21. @AmieSeisay Benefits of CSOM in 2013  REST requests using OData for CRUD operations  _api is a new alias that maps to _vti_bin  _api consolidates CSOM and REST  CSOM is less “chatty” than REST due to batch processing  More APIs:  Publishing  Search  Social  Taxonomy  Workflow  Analytics  Business Data  User Profiles

22. @AmieSeisay CSOM 2013

23. @AmieSeisay End Results  Great feedback on Intranet use  Increased page view and visitor statistics  Useful suggestions on improving business processes  Increased collaboration across offices, departments, and functional groups

24. @AmieSeisay Resources  Working with the ECMAScript Client Object Model (JSOM) in SharePoint 2010 https://msdn.microsoft.com/en-us/library/office/hh372944(v=office.14).aspx  Using the SharePoint Foundation 2010 Managed Client Object Model https://msdn.microsoft.com/en-us/library/office/ee857094(v=office.14).aspx  Using JavaScript to Manipulate a List Form Field http://blogs.msdn.com/b/sharepointdesigner/archive/2007/06/13/using-javascript-to- manipulate-a-list-form-field.aspx  SharePoint 2013 Strategy for SharePoint Client Object Model CSOM and REST https://www.youtube.com/watch?v=PN47n5yPQBU  Deep dive into the SharePoint 2013 CSOM API's https://www.youtube.com/watch?v=ZEF3sbs2L8g3  SharePoint App best practices using OData and the SharePoint REST API https://www.youtube.com/watch?v=tEbAaSyIn9I  How to: Complete basic operations using JavaScript library code in SharePoint 2013 https://msdn.microsoft.com/en-us/library/office/jj163201.aspx  SharePoint 2013.NET Server, CSOM, JSOM, and REST API index https://msdn.microsoft.com/en-us/library/office/dn268594.aspx

25. @AmieSeisay Sources for graphics  Food Trucks: http://foodtruckfiesta.comhttp://foodtruckfiesta.com  Truck art: http://stoorie.com/footrucks/2014/02/clients-brand-message-coffee-sampling-food- truck/http://stoorie.com/footrucks/2014/02/clients-brand-message-coffee-sampling-food- truck/  Lemon Grass Source: http://www.washingtonian.com/blogs/wellbeing/nutrition/the-healthiest- and-worst-salads-at-various-dc-food-trucks.phphttp://www.washingtonian.com/blogs/wellbeing/nutrition/the-healthiest- and-worst-salads-at-various-dc-food-trucks.php  Far East Source: http://foodtruckfiesta.com/far-east-taco-grille-food-truck/http://foodtruckfiesta.com/far-east-taco-grille-food-truck/  DC Pizza Source: http://foodtruckfiesta.com/dc-slices-food-truck/http://foodtruckfiesta.com/dc-slices-food-truck/  Lobster Source: https://dcchic.wordpress.comhttps://dcchic.wordpress.com  Facebook Source: https://www.facebook.comhttps://www.facebook.com  SharePoint image: http://www.fmtconsultants.comhttp://www.fmtconsultants.com