Forum Discussion

jguerrero's avatar
jguerrero
Contributor
13 years ago

Custom Components

   
I found this on one of the custom components, it presents 3 of the most recent blog posts. Where can I find instructions on how to build something similar to this, I'm trying to build this for polls and photos/videos.

On the homepage of the community I'm display a set of four tabs, polls, photo & videos, and inside mcdonalds.

I'm using jquery create the swap the content within the tab styled widget.


<#assign messages = rest("/topics/style/blog/recent?page_size=3").messages />
<div class="custom-recent-articles-container">
  <#if messages.message?size gt 0>
    <div class="custom-recent-articles-heading-bar">
      <span class="custom-recent-articles-heading-bar-title">${text.format("Latest Blogs")}</span>
    </div>
  </#if>
  <#list messages.message as message>
    <#assign posted_by_userid = message.author.login?string />
    <#assign posted_by_label = text.format("Posted By:") />
    <div class="custom-recent-article-wrapper">
      <div class="custom-article-header">        
        <div class="custom-article-subject">
          <a href="${message.@view_href}">${message.subject}</a>
        </div>
        <div class="custom-article-posted-by">
          <span class="author">${posted_by_label} <#if ((posted_by_userid != "") && (posted_by_userid != "Anonymous"))><@component id="common.widget.user-name" user="conv:${message.author.login}" /></#if></span>
        </div>
      </div>
      <div class="custom-article-teaser">
        <#if message.teaser?length gt 0>
          ${message.teaser}
          <span class="custom-read-more"><a href="${message.@view_href}">${text.format("Read More")}</a></span>
        </#if>        
      </div>
    </div>
  </#list>
</div>            


Screen shot 2012-02-27 at 10.03.33 AM.png
  • The key point to get started here is digging a bit into the REST API documentation and tutorial ressources that are available on the Lithium Developer Nation. The information over there should allow you to adapt the code above for polls and photos/videos.

     

    Lines starting with "<#..." are Freemarker markup codes which you will also explained in basics in the Studio documentation.

     

    Any questions about a certain line in the example code? Just shoot.

    • rizalvi's avatar
      rizalvi
      Mentor

      Hi Claudius,

      I am interested in creating a custom component with scheduling capability (pl see screen shot). I am not sure where to start. Who can help?

      Thanks!

      Riz


      Schedule Picture.png