15 Mar Facebook Like Solution In SharePoint Using Javascript
Description: A custom SharePoint solution for developing a Facebook Like business case to support user adoption in an organization. The solution includes JavaScript, Client Side Object Model, and XSL. No deploying of code between servers necessary. All files can be used in SharePoint Designer for either SharePoint 2010 or SharePoint 2013. SharePoint 2013 offers JSLink to style list data if you choose not to use XSL to style list data.
Details on Presentation:
Lists
Food Truck – columns to keep track of: the number of users who liked a submission, their names, an anonymous check box and a text field that is either updated with their name or “Anonymous”.
Comments – columns to keep track of: a lookup field to the Food Truck list, and comments multiple lines of text.
Site Assets – contains JavaScript, XSL, and image files.
Forms
New Food Truck form – has input fields for Food Truck title, image, description, and Anonymous checkbox. Uses JavaScript Object Model to add and update list item. This file is labeled AddNewFoodTruck.aspx in the zip file.
Add a Comment form – grabs the TruckID parameter in the URL and then auto selects lookup column value. This file is labeled CustomNewForm.aspx in the zip file. This is just a New Form created from the Comments list and modified to automatically select the lookup value in the Comments list from the URL query string parameter. This blog was a greate resource for provided the Javascript to match up the lookup value from the URL: Using JavaScript to Manipulate a List Form Field
Pages
Home Page – Displays Food Trucks linked to a Details page. The Food Trucks list view web parts are styled with XSL for a more visually appealing look. The XSL files are added in the XSL Link property of the Food Truck list with Chrome Type set to None. The web part on the left uses MostRecent.xsl and the web part on the right uses TopFive.xsl in the zip file.
Details page – Displays one Food Truck – title, image, description, a Like button and comments. This page is styled with XSL and the Like button has JavaScript Object Model behind the scenes that updates list items. There are four web parts on the page: one Food Truck list web part with a filtered view to only show one list item, one Comments list web part, and two Query String filter web parts to grab the FoodTruckID parameter in the URL and filters the lists accordingly.
The Truck.xsl file is set as the XSL Link web part property on the Food Truck list. This file also has a reference to Like.js, which calls function updateListItem() when someone clicks on the Like image. Truck.xsl also appends the ID of the Food Truck to the Comments list, which is linked to CustomNewForm.aspx.
Like.js has all the functions for capturing number of likes, who liked the submission, grabbing the current user’s name, which updates the list all using the Javascript Client Side Object Model.
The Comments.xsl file is set as the XSL Link web part property on the Comments list.
This is how the solution comes together. Enjoy!