Facebook Like Solution in SharePoint Using JavaScript Amie Seisay

Background...Over 10 Years Experience SharePoint Trainer Developer SharePoint Farm Architect I’m Enthusiastic About… Certifications… Hats I Wear… Lots of JavaScript and CSS! SharePoint 2010 Administration CIW v5 Associate MCTS : Microsoft SharePoint 2010, Configuration ITIL Foundation Macromedia Dreamweaver 8 Certified Technical Trainer

@AmieSeisay Business Problem  An organization wants to encourage employee use of the 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 is not an option this time around.

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

@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

@AmieSeisay Technical Limitations  No deployed solution  No developing solutions to a SharePoint server where Visual Studio installed. (SP 2010)  Requestor is unsure of final product. Technical Translation: They will change their minds…a lot!

@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

@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  JavaScript: auto select lookup value  XSL: Style list data

@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

@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

@AmieSeisay Client Side Object Model (CSOM)  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

@AmieSeisay 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)

@AmieSeisay CSOM 2010

@AmieSeisay CSOM 2013

@AmieSeisay Flow of CSOM

@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

@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

@AmieSeisay

Resources  Working with the ECMAScript Client Object Model (JSOM) in SharePoint  Using the SharePoint Foundation 2010 Managed Client Object Model  Using JavaScript to Manipulate a List Form Field manipulate-a-list-form-field.aspx  SharePoint 2013 Strategy for SharePoint Client Object Model CSOM and REST  Deep dive into the SharePoint 2013 CSOM API's  SharePoint App best practices using OData and the SharePoint REST API  How to: Complete basic operations using JavaScript library code in SharePoint  SharePoint 2013.NET Server, CSOM, JSOM, and REST API index  Sources for art:  Food Trucks:  Truck art: food-truck/