Forum Discussion

Tyler's avatar
8 years ago

Adding user ranks to Forum Page message-list component

Hi all,

 

I'm trying to add ranks to the Community Page message-list component. The component comes out-of-box with the user's avatar, but not with the user name or rank. There doesn't seem to be a way to enable user names or ranks in community admin.

 

I imagine the best route would be to find all the avatars on the page without ranks, scrape the user ids off them and loop through the list of ids and use this query to get the rank:

 

<#assign ranking= restadmin("/users/id/${recent.author.id}/ranking/display/left_image/url").value >

 

Then add each rank to it's respective avatar. 

 

Is there a better way to do this? Perhaps by digging into the XML and adding the rank there? Any input would be appreciated.

  • Tyler- I will suggest you not to use jQuery for this purpose. You can create your custom component and add it to your ForumMessagePage(message-list).

     

    Inside the component you can get the author id by env.context.message.author.id environment variable.

     

    <#assign ranking= restadmin("/users/id/${env.context.message.author.id}/ranking/display/left_image/url").value >

    There is an OOB component for user rank as well. Have you tried adding this component <component id="author-rank"/> to you ForumMessagePage quilt?

    • peterlu's avatar
      peterlu
      Champion
      TariqHussain env.context.message.author.id only works in ForumMessage quilt. On ForumPage quilt which contains the message-list, there is no way to control the sub quilt. I think Tyler is talking about message list in Forum Page , not message list in Forum Topic Page. I would love to have fine control on Forum Page message list with freemarker, but there is no sub quilt for it. Sad.
      • Thanks, peterlu for clarification. Tyler - If you want to show user rank on the ForumPage message-list component, there are two way to achieve this.

         

        1. As peterlu mentioned use JS to append user rank.

        2. If you don't want to use JS for this. You can get another column added to message-list component by lithium support. They will add another column to it and will provide a custom component where you can write code for that column. All the evn context object will work on that component.  We have done this for one of our community.

         

  • To add, in my logic sample above I would mix javascript and freemarker. I would use javascript to compile the list of avatars needing ranks, then use freemarker to access the rank, the use javascript again to place the rank icons on the page. Is this doable? It seems like mixing javascript and freemarker like this might not work.

    • peterlu's avatar
      peterlu
      Champion

      Tyler There are a few hack ways to do this. Some is not so dirty, some is dirty. If you want a clean way, you have to rewrite the whole mesasge-list component.

       

      Hacks:

      Method 1 (dirty):

      - Use Javascript to get all the user IDs on the page and pass it to a endpoint via ajax. Then endpoint returns all the rank info.

       

      Method 2 (not so dirty): 

      - If you inspect DOM, you can find some css class like this, <span class="UserName lia-user-name lia-user-rank-Community-Manager lia-component-common-widget-user-name">. See "lia-user-rank-Community-Manager". You can use JS/jQuery to fetch the lia-user-rank-xxxxx info. And turn it into proper rank html.