Facebook Like Solution in SharePoint Using JavaScript

Amie Seisaywww.seisayitsolutions.com

amie@seisayitsolutions.com

@AmieSeisay

@AmieSeisay

Background...Over 10 Years Experience

SharePoint TrainerDeveloper

SharePoint Farm Architect

I’m Enthusiastic About…

Certifications…

Hats I Wear…

Lots of JavaScript and

CSS!

SharePoint 2010 Administration

CIW v5 Associate

MCTS 70-667: 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

Demo

@AmieSeisay

@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 Modelhttps://msdn.microsoft.com/en-us/library/office/ee857094(v=office.14).aspx

Using JavaScript to Manipulate a List Form Fieldhttp://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 RESThttps://www.youtube.com/watch?v=PN47n5yPQBU

Deep dive into the SharePoint 2013 CSOM API'shttps://www.youtube.com/watch?v=ZEF3sbs2L8g3

SharePoint App best practices using OData and the SharePoint REST APIhttps://www.youtube.com/watch?v=tEbAaSyIn9I

How to: Complete basic operations using JavaScript library code in SharePoint 2013https://msdn.microsoft.com/en-us/library/office/jj163201.aspx

SharePoint 2013 .NET Server, CSOM, JSOM, and REST API indexhttps://msdn.microsoft.com/en-us/library/office/dn268594.aspx

Sources for art: Food Trucks: http://foodtruckfiesta.com Truck art: http://stoorie.com/footrucks/2014/02/clients-brand-message-coffee-

sampling-food-truck/