facebook like solution in sharepoint using javascript amie seisay
DESCRIPTION
@AmieSeisay Background – What I Enjoy Now LOTS of JavaScript and CSS!TRANSCRIPT
@AmieSeisay
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 70-667: 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
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 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 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-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
@AmieSeisay
Sources for graphics
Food Trucks: http://foodtruckfiesta.com Truck art:
http://stoorie.com/footrucks/2014/02/clients-brand-message-coffee-sampling-food-truck/
Lemon Grass Source: http://www.washingtonian.com/blogs/wellbeing/nutrition/the-healthiest-and-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