Facebook Like Solution in SharePoint Using JavaScript Amie Seisay

Background – Where It All Began in 2003…

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

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

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

@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.

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

@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.

@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.  Requestor is unsure of final product. Technical Translation: They will change their minds…a lot! Lots of re-development will occur.

@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 submissions  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 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

@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 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 CSOM 2010

@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 CSOM 2013

@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

@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

@AmieSeisay Sources for graphics  Food Trucks:  Truck art: truck/ truck/  Lemon Grass Source: and-worst-salads-at-various-dc-food-trucks.phphttp:// and-worst-salads-at-various-dc-food-trucks.php  Far East Source:  DC Pizza Source:  Lobster Source:  Facebook Source:  SharePoint image: