Forum Discussion

SuneR's avatar
SuneR
Guide
15 years ago

Description of default Components and FreeMarker information

I am currently trying to figure out the possibilities of our Lithium install, and am therefore interested in finding out more about the default components that are available.

 

I have searched though the content available to me on the Lithium Training site, and I have searched the Knowledge Base and the forums here, but have not found anything to help me.

 

Are there a place where you can see a list of all components, and a description of what they do?

 

Can you customize/configure these default components in any way, or are they just 'as is'?

 

I have also stumbled upon FreeMarker. First of all, I am a bit supprised that FreeMarker is not mentioned in the Learning stuff I've seen, I found out about it in a random thread on the Customer Forums.

 

Is it true that you are unable to use a users avatar using FreeMarker syntax, I havent found any mention of it on the pages here http://lithosphere.lithium.com/t5/Everything-Studio-Knowledge-Base/Writing-custom-components-in-Lithium-Studio/ta-p/9217

  • At this time, there is not a complete list of the default components and description of what they do although I do believe that is coming soon to studio (descriptions at least). There is not a lot of customization that can be done to default components but you can use those components in custom components.  For example, if I wanted to show search only to logged in users

    <#if user.registered >  <#-- if the user is not anonymous -->
    <@component id="common.widget.search-form" showAdvancedSearchLink="false" />
    
    </#if>

    You can use a user avatar with freemarker, you just also need to use our REST API like this:

    <#assign avatar = rest("/users/id/[user id]/profiles/avatar").image />
    <#if avatar.url?length gt 0>
    <img src="${avatar.url}">
    </#if>

    You will need to replace [user id] with the id of the user whose avatar you want. If you are looking to display the current user's avatar you can use

    ${user.id}

    . Hope that helps.

     

    Edited - I had a longer example but my html is code is being interpreted instead of displayed. I will update when I fix that :)

9 Replies

  • KaelaC's avatar
    KaelaC
    Lithium Alumni (Retired)
    15 years ago

    At this time, there is not a complete list of the default components and description of what they do although I do believe that is coming soon to studio (descriptions at least). There is not a lot of customization that can be done to default components but you can use those components in custom components.  For example, if I wanted to show search only to logged in users

    <#if user.registered >  <#-- if the user is not anonymous -->
    <@component id="common.widget.search-form" showAdvancedSearchLink="false" />
    
    </#if>

    You can use a user avatar with freemarker, you just also need to use our REST API like this:

    <#assign avatar = rest("/users/id/[user id]/profiles/avatar").image />
    <#if avatar.url?length gt 0>
    <img src="${avatar.url}">
    </#if>

    You will need to replace [user id] with the id of the user whose avatar you want. If you are looking to display the current user's avatar you can use

    ${user.id}

    . Hope that helps.

     

    Edited - I had a longer example but my html is code is being interpreted instead of displayed. I will update when I fix that :)

  • MoniqueL's avatar
    MoniqueL
    Lithium Alumni (Retired)
    15 years ago

    Just adding on to Kaela's post, I've found a list of many (not all) common default components and the pages they appear on. While they lack a formal description, the name kind of implies the of data they show.

     

    How do they work?

    Summary

    All contributed components are FreeMarker templates. Default components exist in the res/components directory in dev.lia.components.resources. Contributed components are contributed in the mirror location in a custom plugin. Both Tapestry and FreeMarker components are referenced by name from a Quilt. The first step in rendering a Quilt starts by looking for a FreeMarker component. If one is not found (contributed or default), the search continues for Tapestry components.

     

    Widget List

    <component id="blogs.widget.archives"/>
    <component id="blogs.widget.bios"/>
    <component id="blogs.widget.blogroll"/>
    <component id="blogs.widget.labels"/>
    <component id="blogs.widget.latest-articles"/>
    <component id="blogs.widget.latest-comments"/>
    <component id="blogs.widget.management"/>
    <component id="blogs.widget.moderators"/>
    <component id="common.widget.announcement"/>
    <component id="common.widget.node-description"/>
    <component id="community.widget.admin-links"/>
    <component id="community.widget.notes"/>
    <component id="community.widget.quick-links"/>
    <component id="custom.widget.template"/>
    <component id="forums.widget.board-browser"/>
    <component id="forums.widget.board-browser-column"/>
    <component id="forums.widget.board-browser-list"/>
    <component id="forums.widget.polls"/>
    <component id="forums.widget.recent-messages"/>
    <component id="forums.widget.recent-threads"/>
    <component id="forums.widget.tooltip-message-views"/>
    <component id="forums.widget.top-boards"/>
    <component id="forums.widget.users-online"/>
    <component id="ideas.widget.labels"/>
    <component id="ideas.widget.management"/>
    <component id="ideas.widget.most-populars"/>
    <component id="ideas.widget.statuses"/>
    <component id="images.widget.gallery"/>
    <component id="images.widget.moderation"/>
    <component id="kudos.widget.authors-leaderboard"/>
    <component id="kudos.widget.givers-leaderboard"/>
    <component id="kudos.widget.messages-leaderboard"/>
    <component id="kudos.widget.messages-recently-kudoed-by-user"/>
    <component id="kudos.widget.my-recent-kudos-from-users"/>
    <component id="kudos.widget.my-recent-kudos-to-users"/>
    <component id="kudos.widget.my-recently-kudoed-messages"/>
    <component id="kudos.widget.my-top-kudoed-messages"/>
    <component id="solutions.widget.recently-solved-threads"/>
    <component id="subscriptions.widget.bookmarks"/>
    <component id="subscriptions.widget.featured-threads"/>
    <component id="subscriptions.widget.subscriptions"/>
    <component id="tags.widget.frequent-tagged-messages"/>
    <component id="tags.widget.leaderboard"/>
    <component id="tags.widget.leaderboard-community-title"/>
    <component id="tags.widget.leaderboard-messages"/>
    <component id="tags.widget.leaderboard-messages-community-title"/>
    <component id="tags.widget.leaderboard-messages-title"/>
    <component id="tags.widget.leaderboard-title"/>
    <component id="tags.widget.my-recent-tagged-messages"/>
    <component id="tags.widget.my-related-tag-cloud"/>
    <component id="tags.widget.my-related-tag-cloud-content"/>
    <component id="tags.widget.my-tags"/>
    <component id="tags.widget.recently-tagged-messages"/>
    <component id="tags.widget.related-tag-cloud"/>
    <component id="tags.widget.tag-cloud"/>
    <component id="tags.widget.tagger"/>
    <component id="users.widget.about-me"/>
    <component id="users.widget.contact-me"/>
    <component id="users.widget.moderator-controls"/>
    <component id="users.widget.my-friends"/>
    <component id="users.widget.my-friends-by-request"/>
    <component id="users.widget.my-public-statistics"/>
    <component id="users.widget.my-statistics"/>
    <component id="users.widget.quick-stats"/>
    <component id="users.widget.registration"/>

    Blog Side Widget

    <?xml version="1.0" encoding="UTF-8"?>
    <components>
    <component id="common.widget.announcement"/>
    <component id="blogs.widget.bios"/>
    <component id="blogs.widget.management"/>
    <component id="blogs.widget.blogroll"/>
    <component id="blogs.widget.latest-articles"/>
    <component id="blogs.widget.latest-comments"/>
    <component id="blogs.widget.archives"/>
    <component id="blogs.widget.labels"/>
    <component id="kudos.widget.messages-leaderboard"/>
    <component id="kudos.widget.authors-leaderboard"/>
    </components>

    Idea Side Widget

    <?xml version="1.0" encoding="UTF-8"?>
    <components>
    <component id="common.widget.announcement"/>
    <component id="ideas.widget.management"/>
    <component id="blogs.widget.latest-articles"/>
    <component id="kudos.widget.authors-leaderboard"/>
    <component id="blogs.widget.latest-comments"/>
    <component id="ideas.widget.statuses"/>
    <component id="ideas.widget.labels"/>
    </components>

    Board Side Widgets

    <?xml version="1.0" encoding="UTF-8"?>
    <components>
    <component id="common.widget.node-description"/>
    <component id="common.widget.announcement"/>
    <component id="solutions.widget.recently-solved-threads"/>
    <component id="kudos.widget.messages-leaderboard"/>
    <component id="kudos.widget.authors-leaderboard"/>
    <component id="kudos.widget.givers-leaderboard"/>
    <component id="tags.widget.tag-cloud"/>
    <component id="tags.widget.tagger"/>
    </components>

    Community Side Widgets

    <?xml version="1.0" encoding="UTF-8"?>
    <components>
    <component id="common.widget.announcement"/>
    <component id="community.widget.admin-links"/>
    <component id="solutions.widget.recently-solved-threads" />
    <component id="kudos.widget.messages-leaderboard"/>
    <component id="kudos.widget.authors-leaderboard"/>
    <component id="tags.widget.tag-cloud"/>
    <component id="tags.widget.leaderboard"/>
    <component id="users.widget.registration"/>
    <component id="forums.widget.users-online"/>
    <component id="users.widget.quick-stats"/>
    <component id="images.widget.moderation"/>
    </components>

    Community (main content area) Widgets

    <?xml version="1.0" encoding="UTF-8"?>
    <components>
    <component id="forums.widget.board-browser"/>
    <component id="forums.widget.board-browser-column"/>
    <component id="forums.widget.board-browser-list"/>
    <component id="forums.widget.top-boards"/>
    <component id="forums.widget.recent-threads"/>
    <component id="forums.widget.recent-messages"/>
    <component id="tags.widget.leaderboard-messages"/>
    <component id="subscriptions.widget.subscriptions"/>
    <component id="subscriptions.widget.bookmarks"/>
    </components>

     

  • MoniqueL's avatar
    MoniqueL
    Lithium Alumni (Retired)
    15 years ago

    cont. because I exceeded the character limit : )

     

    Tag Leaderboard Side Widgets

    <?xml version="1.0" encoding="UTF-8"?>
    <components>
    <component id="tags.widget.leaderboard-title"/>
    <component id="tags.widget.leaderboard-community-title"/>
    </components>

    Tag Leaderboard (main content area) Widgets

    <?xml version="1.0" encoding="UTF-8"?>
    <components>
    <component id="tags.widget.leaderboard-messages-title"/>
    <component id="tags.widget.leaderboard-messages-community-title"/>
    </components>

    Tag View Side Widgets

    <?xml version="1.0" encoding="UTF-8"?>
    <components>
    <component id="tags.widget.related-tag-cloud"/>
    <component id="tags.widget.tagger"/>
    <component id="tags.widget.my-related-tag-cloud"/>
    <component id="tags.widget.my-related-tag-cloud-content"/>
    </components>

    Tag View (main content area) Widgets

    <?xml version="1.0" encoding="UTF-8"?>
    <components>
    <component id="tags.widget.recently-tagged-messages"/>
    <component id="tags.widget.my-recent-tagged-messages"/>
    <component id="tags.widget.frequent-tagged-messages"/>
    </components>

    View Profile Side Widgets

    <?xml version="1.0" encoding="UTF-8"?>
    <components>
    <component id="users.widget.about-me"/>
    <component id="users.widget.contact-me"/>
    <component id="users.widget.my-friends-by-request"/>
    <component id="kudos.widget.my-recent-kudos-to-users"/>
    <component id="kudos.widget.my-recent-kudos-from-users"/>
    <component id="tags.widget.my-tags"/>
    </components>

    View Profile (main content area) Widgets

    <?xml version="1.0" encoding="UTF-8"?>
    <components>
    <component id="users.widget.my-public-statistics"/>
    <component id="users.widget.my-statistics"/>
    <component id="forums.widget.recent-messages"/>
    <component id="kudos.widget.my-recently-kudoed-messages"/>
    <component id="kudos.widget.messages-recently-kudoed-by-user"/>
    <component id="images.widget.gallery"/>
    <component id="users.widget.moderator-controls"/>
    </components>
  • SuneR's avatar
    SuneR
    Guide
    15 years ago

    I can successfully get a users avatar image, but how do I get information about the users rank (Administrator, Moderator, Newly registered) and if the user has any personal mail, and if they do, how many?

     

    I want to make a custom version of the User Navigation Links component, and need to get this information out via the rest api. I just cant find any documentation on how to do this.

  • KaelaC's avatar
    KaelaC
    Lithium Alumni (Retired)
    15 years ago

    How to get information about private messages:

     

    <@component id="notes.widget.summary" />

    and ranking

     

    <#assign ranking = rest("/users/id/[id]/ranking").ranking />

     

  • bdehamer's avatar
    bdehamer
    Guide
    15 years ago

    This is a helpful, but I would love to see a definitive list of all of the component IDs that can be used with the <@component /> macro along with all of the supported parameters.

  •  

    bdehamer wrote:

    This is a helpful, but I would love to see a definitive list of all of the component IDs that can be used with the <@component /> macro along with all of the supported parameters.


    Yes, Please !!!!!!

  • SuzieH's avatar
    SuzieH
    Khoros Alumni (Retired)
    11 years ago

    You can find a list of the availalble components, example images, and description in the document attached in this article. In addition, you can hover over a component in the Page tab in Studio to reveal a hover card. Click on the hover card to open more details about configuration details, what quilts you can use the component on, and where you are using the component in your community. We publish a new version of the document each release that we add a new component.