在SharePoint列表中自定义“Like”按钮

我最近开始与SharePoint中的JSLinks一起工作，并且目前我正在为这里的某些东西拼命挣扎，并且多小时的浏览和搜索对我而言并没有真正帮助到目前为止所以我希望你也可以。我有一个激活了Like-Feature的SharePoint列表。我想使用jsLink以不同的方式呈现LikesCount-Column（图像基本查看展示了开箱即用的外观和看起来我想去的）在SharePoint列表中自定义“Like”按钮

基本上是我所做的是我看着基本代码，将其带到模板引擎并使用以下代码替换SharePoint中的模板。正如你在第二张图片中看到的那样，它呈现得很好，我放弃了事件处理。因此，当我点击Like-Button时，将不会发送Web-Request，并且该项目将不被喜欢。

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

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

 

 
\t function LikesCount(itemCtx){ 
 

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

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

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

 
})();

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

Basic Look

Look that I'd like

来源

2016-12-16 Chris

对于渲染评级领域SP.UI.Reputation.LikesRenderer意，你可以看看sp.ui.reputation.debug.js上找到click事件处理程序是如何注册的详细信息。

但不是定制LikesCount从头开始渲染，我会建议有点不同的方法。我们的想法是通过SP.UI.Reputation.LikesHelpers.ImageUrls类指定自定义图像网址，然后由SP.UI.Reputation.LikesRenderer用于指定图像网址。

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"; 
     } 
    }); 

});

结果

来源

2016-12-19 15:33:15

完美。你说得对，这种方法比重建整个领域更加精简。非常感谢！ – Chris

如果视觉差异是你后的唯一的事情，我会避免修改模板。我会写一个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部件。把脚本放在那里并保存页面。
所以，除非我误解了你的意图，否则你应该从这里继续。

来源

2016-12-18 12:25:59

感谢您的回复，我这样做，与以前的项目过去。这种方法对于列表过滤器和其他可重用列表的东西非常不稳定，这就是为什么我想这样做。（你必须赶上哈希变化，有时时机变得混乱等）。有可能的方式获得细胞的默认事件处理只重新申请吗？ – Chris

在另一个单元格中触发一个较小的更改。如果我没有弄错，我认为它会再次更新整行。 –

在SharePoint列表中自定义“Like”按钮

回答

相关问题