Show Who Kudoed a Post (working code sample provided!)

Hi everyone,

I recently created a custom component that will replace the title attribute of the kudos counter with a list of users who clicked the button. I did this because it was frustrating to our users to have to click the button to view a list of users who clicked the kudos button. This is a two part component - one component is added to the forum message quilt right next to your message kudos component, the other exists on the forum topic page (where you see a list of posts) and this is just some javascript that will take the data and clone it into the title attribute of the kudos element. This is a working example and you are free to take my code and do whatever you want to it.

Component 1 - getting the data for each post (place this next to the kudos button in your quilt)

<#assign messageId = env.context.message.uniqueId />
<#if messageId?? && messageId gt 0>
    <#assign cutoff = 10 />
    <#assign counter = 0 />
    <#assign users = rest("/messages/id/${messageId}/kudos/givers?page_size=${cutoff}").users />
    <#assign kudosCount = rest("/messages/id/${messageId}/kudos/count").value />
    <#assign remaining = kudosCount?number - cutoff?number />
    <#if users??>
<#if kudosCount?number gte 1 ><span class="kudosgivers hidden">${kudosCount} <#if kudosCount?number == 1>user<#else>users</#if> liked/thanked this post:
<#list users.user as kudosGiver><#assign counter = counter+1 />${kudosGiver.login}<#if counter?number == cutoff?number && kudosCount?number gte cutoff?number+1>... and ${remaining} other <#if remaining == 1> user<#else>users</#if>. <#else><#if counter?number == kudosCount?number>. <#else>, </#if></#if></#list>
<#if kudosCount?number gte cutoff?number+1 >Click the number to view who else liked/thanked this post.</#if></span>
        </#if>
    </#if>
</#if>

Component 2 - using javascript to clone the data and replace the title attribute (place this somewhere in your forum topic quilt)

<@liaAddScript>
;(function($) {
    $(".kudosgivers").each(function() {
        var $kudosgivers = $(this);
        $kudosgivers.parent().find('.kudos-count-link').attr('title', $kudosgivers.text());
        $(this).remove();
    });
})(LITHIUM.jQuery);
</@liaAddScript>

Make sure that you have the '.hidden' CSS (display: none;) so that it hides the span containing the data as it will be displayed on pageload before the javascript destroys the element - also if for any reason a user has javascript turned off it will still keep the element hidden from view.

Feel free to change it to whatever you would like it to do - you don't need to use the javascript if you want to display the users somewhere in a message.

Hope you find this useful!