Forum Discussion

dkytasaari's avatar
dkytasaari
Ace
8 years ago

How can I emulate standard component behavior with my custom component?

I have a custom component created that will display 5 messages on the Community Page, but I need to be able to allow the user to open this component up and display ALL the messages on a separate page.  Similar in behavior to how the Latest Posts or Unanswered Topics components have the Greater Than > symbol on the right hand side of the header bar, which is a link to opening that up to its own page. Actually the whole header is a link.

 

Header with link

 

I have rooted around the forums and KB and haven't found anything like what I am hoping to accomplish. Has anyone out there done anything like this? It would be nice if there was a sample code repository to peruse for examples.

 

Here are the basics of my custom component.

 

 

<#assign num = 5 />
<#assign myVAR = true />

<#assign myVAR_messages = "SELECT * FROM messages WHERE myVAR = true AND depth = 0 ORDER by post_time ASC LIMIT "+num />

<#assign myVAR_messages_ALL = "SELECT * FROM messages WHERE myVAR = true AND depth = 0 ORDER by post_time ASC" />

<div class="custom-myVAR-message">
  <@component id="forums.widget.message-list-panel" title="Show MyVAR Messages" messages="rest_2.0:/search?q="+myVAR_messages?url style="wide" numMessages="conv:"+num?number />

  <@component id="forums.widget.message-list-panel" title="Show ALL MyVAR Messages" messages="rest_2.0:/search?q="+myVAR_messages_ALL?url style="wide" />
</div>

 

The second @component definition is what I believe I'll need for the display all page; I know it doesn't belong there in the div, it's a placeholder for now.

 

Please point me to any examples of this or other resources I might have overlooked.

 

Regards,
Dennis

  • VikasB's avatar
    VikasB
    Boss
    8 years ago

    Hi dkytasaari  FYI you can use out of the box component with required no of topics you want to show on your page. You can update the no of topics here

    /t5/bizapps/bizappspage/tab/community%3Aadmin%3Adisplay%3Afront-page-display%3Asettings?setting=layout.recent-threads-module-list-size

    But if you really need a customised view then you can use the below code.  Some CSS efforts would be needed. 

    <!-- custom-latest-topic -->
<div class="main sub-section">
    <#attempt>
    <div class="community-wrapper">
        <#assign latestTopics=rest( "2.0", "/search?q=" + "SELECT subject,board.id,view_href,author.login,post_time from messages where depth = 0 order by post_time DESC limit 5"?url).data.items />
        
        <div class="heading-section item-wrapper">
            <div class="go-heading-1 major-sub-section sub-section"><a href="/t5/forums/recentpostspage/post-type/thread">Latest Topics</a></div>
        </div>
        <div class="content-section">
            <div class="latest-topic-section">
                <#list latestTopics as topic>
                      <div class="thread-wrapper item-wrapper">
                          <div class="content sub-section">
                              <div class="subject detail go-body-1">
                                  <a href="${topic.view_href}">${topic.subject}</a>
                              </div>
                              <div class="board detail go-body-2">
                                  <#assign boardDetail=rest( "2.0", "/search?q=" + "SELECT title,view_href from boards where id  = '${topic.board.id}'"?url).data.items[0] />
                                  <a href="${boardDetail.view_href}">${boardDetail.title}</a>                                                  
                              </div>
                              <div class="post-detail detail">
                                  <spna  class="Author detail go-body-2 go-light">Author: ${topic.author.login}</spna>
                                   <span class="seprater count"></span>
                                  <spna  class="post-time detail go-body-2 go-light">Date: ${topic.post_time?date}</spna>
                              </div>
                          </div>
                      </div>
                </#list>
            </div> 
        </div>
    </div>
    <#recover>
      <!-- Error in Latest Topic -->
    </#attempt>
</div>

    When you click on the text Latest Topics it would redirect you to a separate page having all the latest topics.