Download - Facebook Like Solution in SharePoint Using JavaScript Amie Seisay [email protected] @AmieSeisay
Facebook Like Solution in SharePoint Using JavaScript
Amie Seisaywww.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/