SharePoint 列表中的自定义 "Like"- 按钮

Question

我最近开始使用 SharePoint 中的 JSLinks，我目前正在努力解决这里的问题，而且多个小时的浏览和搜索到目前为止对我没有真正帮助，所以我希望你可以。我有一个激活了类似功能的 SharePoint 列表。我想使用 jsLink 以不同方式呈现 LikesCount-Column（图像基本外观显示了开箱即用的列的外观以及我想要的外观）

基本上我所做的是查看基本代码，将其带到模板引擎并使用以下代码替换 SharePoint 中的模板。正如您在第二张图片中看到的那样，它呈现得很好，我松开了事件处理。因此，当我单击“赞”按钮时，不会发送任何 Web 请求，也不会赞该项目。

如果有人能帮助我，我会很高兴

(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

Answer 1

如果视觉差异是您追求的唯一目标，我会避免修改模板。我会写一个JS脚本，只在你需要的地方替换图片。
如果 SharePoint 对每种可能性都有不同的图标，并且您想覆盖它，只需找到包含图像名称和路径的相关字符串并将其替换为您自己的。
除非你想改变点击行为，否则不要触摸/做任何超出我所说的事情。
确保仅在 SP.js 加载后执行：

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

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

单击滚轮并选择编辑显示列表的页面并添加 Sharepoint 标准脚本 Web 部件。将脚本放在那里并保存页面。
所以，除非我误解了你的意图，否则你应该没问题。

Answer 2

为了呈现评级字段 SP.UI.Reputation.LikesRenderer，您可以查看 sp.ui.reputation.debug.js 以找到有关如何注册 click 事件处理程序的更多详细信息。

但是，与其从头开始自定义 LikesCount 渲染，我建议采用一些不同的方法。这个想法是通过 SP.UI.Reputation.LikesHelpers.ImageUrls class 指定自定义图像 url，然后 SP.UI.Reputation.LikesRenderer 使用它来指定图像 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";
      }
    });

});

结果

SharePoint 列表中的自定义 "Like"- 按钮

Custom "Like"-Button in SharePoint List

sharepoint

csr

sharepoint-2013

jslink