Facebook Like Solution in
SharePoint Using JavaScript
Amie Seisay
www.seisayitsolutions.com
[email protected]
@AmieSeisay
Background – Where It All Began in 2003…
@AmieSeisay
Background – What I Enjoy Now
LOTS of
JavaScript and
CSS!
@AmieSeisay
Background - Certifications
Certified
Technical Trainer
SharePoint 2010
Administration
@AmieSeisay
ITIL Foundation
MCTS 70-667:
Microsoft SharePoint
2010, Configuration
CIW v5 Associate
Macromedia
Dreamweaver 8
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
@AmieSeisay
services provided to customers
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
 .NET
assemblies
 Silverlight

Object Model (JSOM)
assemblies
In SharePoint 2013,
 All
of the above from 2010
 REST/OData
 Windows
@AmieSeisay
endpoints
Phone assemblies
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
Demo
@AmieSeisay
@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

Workflow

Search

Analytics

Social

Business Data

Taxonomy

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 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-tomanipulate-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
@AmieSeisay
Sources for graphics

Food Trucks: http://foodtruckfiesta.com

Truck art: http://stoorie.com/footrucks/2014/02/clients-brand-message-coffee-sampling-foodtruck/

Lemon Grass Source: http://www.washingtonian.com/blogs/wellbeing/nutrition/the-healthiestand-worst-salads-at-various-dc-food-trucks.php

Far East Source: http://foodtruckfiesta.com/far-east-taco-grille-food-truck/

DC Pizza Source: http://foodtruckfiesta.com/dc-slices-food-truck/

Lobster Source: https://dcchic.wordpress.com

Facebook Source: https://www.facebook.com

SharePoint image: http://www.fmtconsultants.com
@AmieSeisay