Custom "Like"-Button in SharePoint List

Question

I've recently started to work with the JSLinks in SharePoint and I'm currently struggeling a bit with something here and multiple hours of browsing and searching haven't really helped me so far so I hoped maybe you could. I have a SharePoint-List with the Like-Feature activated. I wanted to use jsLink to render the LikesCount-Column differently (The images Basic Look show what the column looks like out of the box and the Look i wanted to go for)

Basically is what i did is I looked at the basic code, took it to a template-Engine and replace the template in SharePoint using the following Code. As it renders just fine as you can see in the second image, I loose the event handling. So when I click the Like-Button, no Web-Request will be sent and the Item will not be liked.

Would be very happy if someone could help me out

(function(){
 var inCtx = {
  Templates: {
   Fields: {
    'LikesCount':{
     'View' : LikesCount
    } 
   }
  },
 }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(inCtx);


 function LikesCount(itemCtx){

  var tmplParams = {
   ElementId: itemCtx.CurrentItem.ID,
   Title: '',
   LikesCount : itemCtx.CurrentItem.LikesCount
  };
  var likedByIds = [];

  $.each(itemCtx.CurrentItem.LikedBy, function(index){
   likedByIds.push(parseInt(this.id));
   tmplParams.Title += this.title;

   if(index !== itemCtx.CurrentItem.LikedBy.length-1){
    tmplParams.Title += this.title +', '
   }
  })
  var result = '';
  if(likedByIds.indexOf(itemCtx.CurrentUserId) !== -1){
   tmplParams.ImageLink = '***/images/LikeButtonActive.png'
   result = $('.likes-count[version="0.1"]').tmpl(tmplParams).html();
  } else {
   tmplParams.ImageLink = '***/images/LikeButtonInactive.png'
   result = $('.likes-count[version="0.1"]').tmpl(tmplParams).html();
  }
  return result;
 }

})();

<script class="likes-count" version="0.1" type="text/x-jQuery-tmpl">
 <span id="root-likesElement-{{html ElementId}}">
  <a href="javascript:;" id="likesElement-{{html ElementId}}" class="ms-secondaryCommandLink"><img class="like-button" src="{{html ImageLink}}" /></a>
  <span title="{{html Title}}" class="ms-comm-likesMetadata ms-metadata">
   <span class="ms-comm-likesCount ms-comm-reputationNumbers">{{html LikesCount}}</span>
  </span>
 
 </span>
</script>

Basic Look

Look that I'd like

Vadim Gremyachev · Accepted Answer · 2016-12-20T16:37:18.483

For rendering rating fields SP.UI.Reputation.LikesRenderer is intended, you could take a look at sp.ui.reputation.debug.js to find more details on how click event handler is registered.

But instead of customizing LikesCount rendering from scratch i would suggest a bit different approach. The idea is to specify custom image url via SP.UI.Reputation.LikesHelpers.ImageUrls class which in turn used by SP.UI.Reputation.LikesRenderer to specify image urls.

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

      OnPreRender: function(ctx) {
          SP.UI.Reputation.LikesHelpers.ImageUrls.$W = "/Style Library/hand-like-32.png";
          SP.UI.Reputation.LikesHelpers.ImageUrls.$X = "/Style Library/hand-like-32.png";
      }
    });

});

Result

Perfect. You're right that approach is a whole lot leaner than rebuilding the complete field. Thanks alot! — relief.melone, Dec 20 '16 at 16:27

Adi Solar · Answer 2 · 2016-12-19T06:40:19.413

If the visual difference is the only thing you're after, I would refrain from modifying the templates. I would write a JS script that only replaces the picture where you need it.
If SharePoint has a different icon for every possibility and you want to override it, simply find the relevant string containing the image name and path and replace it with your own.
Unless you want the click behavior to change, should't touch / do anything more than what I stated.
Make sure to execute only after SP.js has loaded:

    <script>
    ExecuteOrDelayUntilScriptLoaded(changeIcons, "sp.js");

     function changeIcons() {
      //find the string containing icon path and name
      //replace with your own path
      alert('Icons changed');
     }
     </script>

Click on the wheel and choose to Edit the page that displays your list and add the sharepoint standard script web part. Put the script there and save the page.
So, unless I misunderstood your intention you should be ok from here.

Thank your for your reply, I did that in the past with previous projects. This approach is just very unstable with list filters and other things that rerender the list, thats why I wanted to to go that way. (you have to catch hash-changes, sometimes the timing gets messed up etc.). Is there maybe a way to get the default event handling of a cell to just apply that again? — relief.melone, Dec 19 '16 at 07:43
Trigger a minor change in another cell. I think it updates the entire row again, if I'm not mistaken. — Adi Solar, Dec 19 '16 at 08:11

Custom "Like"-Button in SharePoint List

2 Answers2