Forum Discussion

iftomkins's avatar
11 years ago

Custom author component not working on Post Page

I created this author component that works on all pages I've seen, except for on the post page. This is the error: https://www.dropbox.com/s/fqirqygr4uhg7ag/Screenshot%202014-02-23%2013.11.04.png

 

Does anyone know how to modify this code so that it works on the post page just like it does in the message listing? Thanks!

 

<#--Custom author component with new order: Avatar, rank, posts, kudos. Original author component XML is     <component id="author"/> -->

<#assign messageAuthorId = rest("/messages/id/${page.context.message.uniqueId}/author").user.id />
<#assign messageAuthorLogin = rest("/messages/id/${page.context.message.uniqueId}/author").user.login />
<#assign avatarUrl = rest("/users/id/${messageAuthorId}/profiles/avatar/url").value />
<#assign kudosCount = rest("/users/id/${messageAuthorId}/kudos/received/count").value />
<#assign postCount = rest("/users/id/${messageAuthorId}/posts/count").value />
<#assign rankingName = rest("users/id/${messageAuthorId}/ranking/name").value />
<#assign profileUrl = "/t5/user/viewprofilepage/user-id/${messageAuthorId}" />

<div class="lia-message-author-avatar">    
    <div class="custom-avatar-wrapper">
        <div class="UserAvatar lia-user-avatar lia-component-common-widget-user-avatar">
            <a class="UserAvatar lia-link-navigation" tabindex="-1" target="_self" id="link_39" href="${profileUrl}"><img class="lia-user-avatar-message" id="display" src="${avatarUrl}"></a>
        </div>
    </div>
</div>
<div class="lia-message-author-username">
    <span class="UserName lia-user-name">
        <a class="lia-link-navigation lia-page-link lia-user-name-link" href="${profileUrl}">
            <span class="">${messageAuthorLogin}</span>
        </a>
    </span>    
</div>
<div class="lia-message-author-rank">${rankingName}</div>
    <div class="lia-message-author-post-count" title="Number of posts by this author">
        <table>
            <tr><td class="fonticon"><i class="fa fa-comment"></i></td><td class="count">${postCount}</td></tr>
        </table>
    </div>
</tr>
<div class="lia-message-author-kudos-count" title="Number of votes received by this author">
        <table>
            <tr><td class="fonticon"><i class="fa fa-thumbs-up"></i></td><td class="count">${kudosCount}</td></tr>
        </table>
</div>

  • Solved it--sort of. I test to see if the page is ReplyPage. If it is, I serve the default author component to avoid the error. If it's not, I serve the my custom author component.

     

    Again, big thanks to Claudius-- I noticed he used the default author component on the reply page, too.

     

    Here's the final code:

     

    <#--Custom author component with new order: Avatar, rank, posts, kudos. Original author component XML is     <component id="author"/>. On Reply page, defaults to Out-of-the-box author component. -->

    <#if page.name?lower_case == "replypage" >
        <@component id="author"/>
    <#else>

    <#assign messageAuthorId = rest("/messages/id/${page.context.message.uniqueId}/author").user.id />
    <#assign messageAuthorLogin = rest("/messages/id/${page.context.message.uniqueId}/author").user.login />
    <#assign avatarUrl = rest("/users/id/${messageAuthorId}/profiles/avatar/url").value />
    <#assign kudosCount = rest("/users/id/${messageAuthorId}/kudos/received/count").value />
    <#assign postCount = rest("/users/id/${messageAuthorId}/posts/count").value />
    <#assign rankingName = rest("users/id/${messageAuthorId}/ranking/name").value />
    <#assign profileUrl = "/t5/user/viewprofilepage/user-id/${messageAuthorId}" />

    <div class="lia-message-author-avatar">    
        <div class="custom-avatar-wrapper">
            <div class="UserAvatar lia-user-avatar lia-component-common-widget-user-avatar">
                <a class="UserAvatar lia-link-navigation" tabindex="-1" target="_self" id="link_39" href="${profileUrl}"><img class="lia-user-avatar-message" id="display" src="${avatarUrl}"></a>
            </div>
        </div>
    </div>
    <div class="lia-message-author-username">
        <span class="UserName lia-user-name">
            <a class="lia-link-navigation lia-page-link lia-user-name-link" href="${profileUrl}">
                <span class="">${messageAuthorLogin}</span>
            </a>
        </span>    
    </div>
    <div class="lia-message-author-rank">${rankingName}</div>
        <div class="lia-message-author-post-count" title="Number of posts by this author">
            <table>
                <tr><td class="fonticon"><i class="fa fa-comment"></i></td><td class="count">${postCount}</td></tr>
            </table>
        </div>
    </tr>
    <div class="lia-message-author-kudos-count" title="Number of votes received by this author">
            <table>
                <tr><td class="fonticon"><i class="fa fa-thumbs-up"></i></td><td class="count">${kudosCount}</td></tr>
            </table>
    </div>
    </#if>

5 Replies

  • I suspect the issue is with 'page.context.message.uniqueId'. You can debug it by testing page.context.message for null etc.

  • iftomkins's avatar
    iftomkins
    Maven
    11 years ago

    Thanks, Nathan. I think you're probably right. 

     

    So if I test  page.context.message for null, and it is null, then how would I pull the author information? Is there another call that would work better from the compose page?

     

    I wonder how the native component does it...

  • iftomkins's avatar
    iftomkins
    Maven
    11 years ago

    So, since these REST API calls don't work from the Post Page, it seems I need to get the data in another way. Are there different REST API calls that would return the same data, and would work from the post page?

     

    <#assign messageAuthorId = rest("/messages/id/${page.context.message.uniqueId}/author").user.id />
    <#assign messageAuthorLogin = rest("/messages/id/${page.context.message.uniqueId}/author").user.login />
    <#assign avatarUrl = rest("/users/id/${messageAuthorId}/profiles/avatar/url").value />
    <#assign kudosCount = rest("/users/id/${messageAuthorId}/kudos/received/count").value />
    <#assign postCount = rest("/users/id/${messageAuthorId}/posts/count").value />
    <#assign rankingName = rest("users/id/${messageAuthorId}/ranking/name").value />
    <#assign profileUrl = "/t5/user/viewprofilepage/user-id/${messageAuthorId}" />

     

    Thoughts appreciated!

  • iftomkins's avatar
    iftomkins
    Maven
    11 years ago

    Solved it--sort of. I test to see if the page is ReplyPage. If it is, I serve the default author component to avoid the error. If it's not, I serve the my custom author component.

     

    Again, big thanks to Claudius-- I noticed he used the default author component on the reply page, too.

     

    Here's the final code:

     

    <#--Custom author component with new order: Avatar, rank, posts, kudos. Original author component XML is     <component id="author"/>. On Reply page, defaults to Out-of-the-box author component. -->

    <#if page.name?lower_case == "replypage" >
        <@component id="author"/>
    <#else>

    <#assign messageAuthorId = rest("/messages/id/${page.context.message.uniqueId}/author").user.id />
    <#assign messageAuthorLogin = rest("/messages/id/${page.context.message.uniqueId}/author").user.login />
    <#assign avatarUrl = rest("/users/id/${messageAuthorId}/profiles/avatar/url").value />
    <#assign kudosCount = rest("/users/id/${messageAuthorId}/kudos/received/count").value />
    <#assign postCount = rest("/users/id/${messageAuthorId}/posts/count").value />
    <#assign rankingName = rest("users/id/${messageAuthorId}/ranking/name").value />
    <#assign profileUrl = "/t5/user/viewprofilepage/user-id/${messageAuthorId}" />

    <div class="lia-message-author-avatar">    
        <div class="custom-avatar-wrapper">
            <div class="UserAvatar lia-user-avatar lia-component-common-widget-user-avatar">
                <a class="UserAvatar lia-link-navigation" tabindex="-1" target="_self" id="link_39" href="${profileUrl}"><img class="lia-user-avatar-message" id="display" src="${avatarUrl}"></a>
            </div>
        </div>
    </div>
    <div class="lia-message-author-username">
        <span class="UserName lia-user-name">
            <a class="lia-link-navigation lia-page-link lia-user-name-link" href="${profileUrl}">
                <span class="">${messageAuthorLogin}</span>
            </a>
        </span>    
    </div>
    <div class="lia-message-author-rank">${rankingName}</div>
        <div class="lia-message-author-post-count" title="Number of posts by this author">
            <table>
                <tr><td class="fonticon"><i class="fa fa-comment"></i></td><td class="count">${postCount}</td></tr>
            </table>
        </div>
    </tr>
    <div class="lia-message-author-kudos-count" title="Number of votes received by this author">
            <table>
                <tr><td class="fonticon"><i class="fa fa-thumbs-up"></i></td><td class="count">${kudosCount}</td></tr>
            </table>
    </div>
    </#if>

  • iftomkins's avatar
    iftomkins
    Maven
    11 years ago

    UPDATE: I added the Accepted Solutions metric to author component, so now it looks like this: http://screencast.com/t/y87ToDzd

     

    In case anyone finds it useful, I thought I'd post the code here:

     

    <#--Custom author component with new order: Avatar, rank, posts, kudos. Original author component XML is     <component id="author"/>. On Reply page, defaults to Out-of-the-box author component. Icons from FontAwesome icon set. -->

     

    <style>

    /* author stats */

    #lia-body .lia-content .author-stats-row {
        text-align: center;
    }

    #lia-body .lia-content .author-stats-row .stat {
        display: inline-block;
        margin: 0 3px;
    }

    #lia-body .lia-content .fonticon i {
        -webkit-text-stroke: .5px;
        margin-bottom: 1px;
    }

    </style>


    <#if page.name?lower_case == "replypage" >
        <@component id="author"/>
    <#else>

    <#assign messageAuthorId = env.context.message.author.id />
    <#assign messageAuthorLogin = env.context.message.author.login />
    <#assign avatarUrl = rest("/users/id/${messageAuthorId}/profiles/avatar/url").value />
    <#assign kudosCount = rest("/users/id/${messageAuthorId}/kudos/received/count").value />
    <#assign postCount = rest("/users/id/${messageAuthorId}/posts/count").value />
    <#assign solutionsCount = rest("/users/id/${messageAuthorId}/solutions/received/count").value />
    <#assign solutionsCountNumber = rest("/users/id/${messageAuthorId}/solutions/received/count") />
    <#assign rankingName = rest("users/id/${messageAuthorId}/ranking/name").value />
    <#assign profileUrl = "/t5/user/viewprofilepage/user-id/${messageAuthorId}" />

    <div class="lia-message-author-avatar">    
        <div class="custom-avatar-wrapper">
            <div class="UserAvatar lia-user-avatar lia-component-common-widget-user-avatar">
                <a class="UserAvatar lia-link-navigation" tabindex="-1" target="_self" id="link_39" href="${profileUrl}"><img class="lia-user-avatar-message" id="display" src="${avatarUrl}"></a>
            </div>
                 <#list restadmin("/users/id/${messageAuthorId}/roles").roles.role as role>
                    <#if role.name?? && (role.name == "Premium")>
                         <img class="custom-avatar-overlay" alt="Premium User" title="Premium User" src="/html/assets/premium.png">
                    </#if>
                 </#list>
        </div>
    </div>
    <div class="lia-message-author-username">
        <span class="UserName lia-user-name">
            <a class="lia-link-navigation lia-page-link lia-user-name-link" href="${profileUrl}">
                <span class="">${messageAuthorLogin}</span>
            </a>
        </span>    
    </div>
    <div class="lia-message-author-rank">${rankingName}</div>

    <div class="author-stats-row">
    <#if (postCount?number > 0) >
        <div class="lia-message-author-post-count stat" title="${text.format('ranking.metric_posts.title')}">
                            <div class="count">${postCount}</div>
                <div class="fonticon"><i class="fa fa-comment"></i></div>
        </div>
    </#if>
    <#if (kudosCount?number > 0) >
       <div class="lia-message-author-kudos-count stat" title="${text.format('metrics.kudos_events_received.description')}">
                <div class="count">${kudosCount}</div>
                            <div class="fonticon"><i class="fa fa-thumbs-up"></i></div>
       </div>
    </#if>
    <#if (solutionsCount?number > 0) >
        <div class="lia-message-author-solutions-count stat" title="${text.format('analytics.columns.338.title')}">
                               <div class="count">${solutionsCount}</div>
                               <div class="fonticon"><i class="fa fa-check"></i></div>
        </div>
    </#if>
    </#if>
    </div>