Last active
March 17, 2021 10:44
-
-
Save sjkp/5563092 to your computer and use it in GitHub Desktop.
SharePoint 2013, how to enable like/unlike functionality by client side javascript on a publishing pagelayout. - Requirements, like functionality is enabled on the page library. - You must include reputation.js if you are wrapping this in a webcontrol, that can e.g. be done with: ScriptLink.RegisterScriptAfterUI(this.Page, "reputation.js", false);
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> | |
| <SharePointWebControls:ScriptLink language="javascript" name="reputation.js" OnDemand="false" LoadAfterUI="true" runat="server" Localizable="false" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var likepage = { | |
| //Likes the current page. | |
| LikePage: function () { | |
| likepage.getUserLikedPage(function(likedPage, likeCount) { | |
| var aContextObject = new SP.ClientContext(); | |
| EnsureScriptFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function() { | |
| Microsoft.Office.Server.ReputationModel. | |
| Reputation.setLike(aContextObject, | |
| _spPageContextInfo.pageListId.substring(1, 37), | |
| _spPageContextInfo.pageItemId, !likedPage); | |
| aContextObject.executeQueryAsync( | |
| function() { | |
| var elements = document.getElementsByClassName('likecount'); | |
| if (likedPage) { | |
| likeCount--; | |
| } else { | |
| likeCount++; | |
| } | |
| for (var i = 0; i < elements.length;i++) { | |
| elements[i].innerHTML = likeCount; | |
| } | |
| }, function(sender, args) { | |
| // Custom error handling if needed | |
| }); | |
| }); | |
| }); | |
| }, | |
| // Checks if the user already liked the page, and returns the number of likes. | |
| getUserLikedPage: function (cb) { | |
| var context = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl); | |
| var list = context.get_web().get_lists().getById(_spPageContextInfo.pageListId); | |
| var item = list.getItemById(_spPageContextInfo.pageItemId); | |
| context.load(item, "LikedBy", "ID", "LikesCount"); | |
| context.executeQueryAsync(Function.createDelegate(this, function (success) { | |
| // Check if the user id of the current users is in the collection LikedBy. | |
| var $v_0 = item.get_item('LikedBy'); | |
| if (!SP.ScriptHelpers.isNullOrUndefined($v_0)) { | |
| for (var $v_1 = 0, $v_2 = $v_0.length; $v_1 < $v_2; $v_1++) { | |
| var $v_3 = $v_0[$v_1]; | |
| if ($v_3.$1E_1 === _spPageContextInfo.userId) { | |
| cb(true, item.get_item('LikesCount')); | |
| } | |
| } | |
| } | |
| cb(false, item.get_item('LikesCount')); | |
| }), | |
| Function.createDelegate(this, function (sender, args) { | |
| //Custom error handling if needed | |
| })); | |
| }, | |
| initialize: function () { | |
| var elements = document.getElementsByClassName('likecount'); | |
| likepage.getUserLikedPage(function(likedPage, likesCount) { | |
| for (var i = 0; i < elements.length; i++) { | |
| elements[i].innerHTML = likesCount; | |
| } | |
| }); | |
| } | |
| }; | |
| _spBodyOnLoadFunctionNames.push("likepage.initialize"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a href="#" onclick="(function() {likepage.LikePage();})()"><span class="likecount"></span></a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <%@ Page language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document" %> | |
| <%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> | |
| <asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server"> | |
| <SharePointWebControls:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" runat="server"/> | |
| <PublishingWebControls:EditModePanel runat="server"> | |
| <!-- Styles for edit mode only--> | |
| <SharePointWebControls:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %>" | |
| After="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" runat="server"/> | |
| </PublishingWebControls:EditModePanel> | |
| <SharePointWebControls:FieldValue id="PageStylesField" FieldName="HeaderStyleDefinitions" runat="server"/> | |
| <SharePointWebControls:ScriptLink language="javascript" name="reputation.js" OnDemand="false" LoadAfterUI="true" runat="server" Localizable="false" /> | |
| </asp:Content> | |
| <asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server"> | |
| <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/> | |
| </asp:Content> | |
| <asp:Content ContentPlaceholderID="PlaceHolderPageTitleInTitleArea" runat="server"> | |
| <SharePointWebControls:FieldValue FieldName="Title" runat="server"/> | |
| </asp:Content> | |
| <asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server"> | |
| <SharePointWebControls:ListSiteMapPath runat="server" SiteMapProviders="CurrentNavigationSwitchableProvider" RenderCurrentNodeAsLink="false" PathSeparator="" CssClass="s4-breadcrumb" NodeStyle-CssClass="s4-breadcrumbNode" CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode" RootNodeStyle-CssClass="s4-breadcrumbRootNode" NodeImageOffsetX=0 NodeImageOffsetY=289 NodeImageWidth=16 NodeImageHeight=16 NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23" HideInteriorRootNodes="true" SkipLinkText=""/> </asp:Content> | |
| <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server"> | |
| <script type="text/javascript"> | |
| var likepage = { | |
| //Likes the current page. | |
| LikePage: function () { | |
| likepage.getUserLikedPage(function(likedPage, likeCount) { | |
| var aContextObject = new SP.ClientContext(); | |
| EnsureScriptFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function() { | |
| Microsoft.Office.Server.ReputationModel. | |
| Reputation.setLike(aContextObject, | |
| _spPageContextInfo.pageListId.substring(1, 37), | |
| _spPageContextInfo.pageItemId, !likedPage); | |
| aContextObject.executeQueryAsync( | |
| function() { | |
| var elements = document.getElementsByClassName('likecount'); | |
| if (likedPage) { | |
| likeCount--; | |
| } else { | |
| likeCount++; | |
| } | |
| for (var i = 0; i < elements.length;i++) { | |
| elements[i].innerHTML = likeCount; | |
| } | |
| }, function(sender, args) { | |
| // Custom error handling if needed | |
| }); | |
| }); | |
| }); | |
| }, | |
| // Checks if the user already liked the page, and returns the number of likes. | |
| getUserLikedPage: function (cb) { | |
| var context = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl); | |
| var list = context.get_web().get_lists().getById(_spPageContextInfo.pageListId); | |
| var item = list.getItemById(_spPageContextInfo.pageItemId); | |
| context.load(item, "LikedBy", "ID", "LikesCount"); | |
| context.executeQueryAsync(Function.createDelegate(this, function (success) { | |
| // Check if the user id of the current users is in the collection LikedBy. | |
| var $v_0 = item.get_item('LikedBy'); | |
| if (!SP.ScriptHelpers.isNullOrUndefined($v_0)) { | |
| for (var $v_1 = 0, $v_2 = $v_0.length; $v_1 < $v_2; $v_1++) { | |
| var $v_3 = $v_0[$v_1]; | |
| if ($v_3.$1E_1 === _spPageContextInfo.userId) { | |
| cb(true, item.get_item('LikesCount')); | |
| } | |
| } | |
| } | |
| cb(false, item.get_item('LikesCount')); | |
| }), | |
| Function.createDelegate(this, function (sender, args) { | |
| //Custom error handling if needed | |
| })); | |
| }, | |
| initialize: function () { | |
| var elements = document.getElementsByClassName('likecount'); | |
| likepage.getUserLikedPage(function(likedPage, likesCount) { | |
| for (var i = 0; i < elements.length; i++) { | |
| elements[i].innerHTML = likesCount; | |
| } | |
| }); | |
| } | |
| }; | |
| _spBodyOnLoadFunctionNames.push("likepage.initialize"); | |
| </script> | |
| <div class="article article-left"> | |
| <PublishingWebControls:EditModePanel runat="server" CssClass="edit-mode-panel title-edit"> | |
| <SharePointWebControls:TextField runat="server" FieldName="Title"/> | |
| </PublishingWebControls:EditModePanel> | |
| <div class="captioned-image"> | |
| <div class="image"> | |
| <PublishingWebControls:RichImageField FieldName="PublishingPageImage" runat="server"/> | |
| </div> | |
| <div class="caption"> | |
| <PublishingWebControls:RichHtmlField FieldName="PublishingImageCaption" AllowTextMarkup="false" AllowTables="false" AllowLists="false" AllowHeadings="false" AllowStyles="false" AllowFontColorsMenu="false" AllowParagraphFormatting="false" AllowFonts="false" PreviewValueSize="Small" AllowInsert="false" AllowEmbedding="false" AllowDragDrop="false" runat="server"/> | |
| </div> | |
| </div> | |
| <div class="article-header"> | |
| <div class="date-line"> | |
| <SharePointWebControls:DateTimeField FieldName="ArticleStartDate" runat="server"/> | |
| <a href="#" onclick="(function() {likepage.LikePage();})()"><span class="likecount"></span></a> | |
| </div> | |
| <div class="by-line"> | |
| <SharePointWebControls:TextField FieldName="ArticleByLine" runat="server"/> | |
| </div> | |
| </div> | |
| <div class="article-content"> | |
| <PublishingWebControls:RichHtmlField FieldName="PublishingPageContent" HasInitialFocus="True" MinimumEditHeight="400px" runat="server"/> | |
| </div> | |
| <PublishingWebControls:EditModePanel runat="server" CssClass="edit-mode-panel roll-up"> | |
| <PublishingWebControls:RichImageField FieldName="PublishingRollupImage" AllowHyperLinks="false" runat="server" /> | |
| <asp:Label text="<%$Resources:cms,Article_rollup_image_text15%>" CssClass="ms-textSmall" runat="server" /> | |
| </PublishingWebControls:EditModePanel> | |
| </div> | |
| </a> | |
| </asp:Content> |
Hi, We are trying to set the like on a list . However, when using your code EnsureScriptFunc('reputation.js', 'Microsoft.Office.Server.ReputationModel.Reputation', function() {
8 Microsoft.Office.Server.ReputationModel.
9 Reputation.setLike(aContextObject,
10 _spPageContextInfo.pageListId.substring(1, 37),
11 _spPageContextInfo.pageItemId, !likedPage);
and passing list id and item id, is not working. It's not even executing the code where we say EnsureScriptFunc(). Any insights on this would really help. Thanks!
By the way, we are using javascrit and trying to set the LIKES on a list which is on the cloud
jyendapally,
I think that the code isnt executed since the script cannot be "Ensured", you havnt included the "reputation.js" file.
Either in the page layout via scriptlink or just "<script src="_layouts/15/reputation.js"></script>".
This works for me in SharePoint Online!
/Simon
in line 45
change from
if ($v_3.$1E_1 === _spPageContextInfo.userId) { cb(true, item.get_item('LikesCount')); }
to
if ($v_3.$1E_1 === _spPageContextInfo.userId) { cb(true, item.get_item('LikesCount')); return; }
without the return , cb function is called twice.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks!
Please update the code with the following snippet
var likedByUsers = item.get_item('LikedBy');
if (!SP.ScriptHelpers.isNullOrUndefined(likedByUsers)) {
for (var $v_1 = 0, $v_2 = likedByUsers.length; $v_1 < $v_2; $v_1++) {
var likedByUser = likedByUsers[$v_1];
if (likedByUser.get_lookupId() === _spPageContextInfo.userId) {
cb(true, item.get_item('LikesCount'));
}
}
}
The $1E_1 variable in invalid at my environment (was $1W_1) and I had success with the get_lookupId() function.