Forum Discussion

wearesocialit's avatar
6 years ago

How to check if a standard component has content?

Hi all,

Is there a way to check if a standard component has content? I'm using <@component id="solutions.widget.accepted-solutions-leaderboard-taplet"/> with a custom title added before in html, and i'd like to display the title only if the component has contant.

Thanks in advance.

  • You can also do this similar to Parshant's suggestion, but without overriding the component.

    Freemarker allows you to assign a block of markup by using opening and closing assign directives instead of self-closing. Once you've assigned the markup to a variable, you can then use Freemarker built-ins to test the content.

    For example, you could do something like:

     

    <#assign componentOutput>
    <@component id="solutions.widget.accepted-solutions-leaderboard-taplet"/>
    </#assign>
    
    <#if componentOutput?? && componentOutput?length gt 0>
    <h3>Your component title</h3>
    ${componentOutput}
    </#if>

     

    I've not tested this exact code, but it should get you close.

7 Replies

  • Hi wearesocialit 

    You could do this with jQuery.  We use this widget so I checked it with Dev Tools. It displays in our sidebar as a table with a header row and five data rows. You could check for the existence of the data rows and display/hide the taplet heading if data exists/doesn't exist.  You might even be better off hiding the whole taplet if there is no data?

    Hope this helps ...

  • Parshant's avatar
    Parshant
    Boss
    6 years ago

    wearesocialit,

    You can do this by override the same component and can assign the component variable before </delegate> code. With this it will assign all the data into the assigned variable, and can check with condition for empty content and values.

  • AdamN's avatar
    AdamN
    Khoros Oracle
    6 years ago

    You can also do this similar to Parshant's suggestion, but without overriding the component.

    Freemarker allows you to assign a block of markup by using opening and closing assign directives instead of self-closing. Once you've assigned the markup to a variable, you can then use Freemarker built-ins to test the content.

    For example, you could do something like:

     

    <#assign componentOutput>
    <@component id="solutions.widget.accepted-solutions-leaderboard-taplet"/>
    </#assign>
    
    <#if componentOutput?? && componentOutput?length gt 0>
    <h3>Your component title</h3>
    ${componentOutput}
    </#if>

     

    I've not tested this exact code, but it should get you close.

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

    Thanks AdamN. I'm going to test this out and get a guide into the Dev Doc Portal once I get a working example. QQ: Does this solution only for for core components or can you also use this for a custom component?

  • AdamN's avatar
    AdamN
    Khoros Oracle
    6 years ago

    SuzieH it should work for custom components as well. You can use @component with custom components. And Freemarker's #assign and ?length should work the same for any string regardless of the source.

  • luk's avatar
    luk
    Boss
    6 years ago

    One little caveat when doing this: In certain cases it can be that there is some white-space rendered, even when the component is empty, that would then pass a "is-not-empty" test if not taken care of with ?trim before checking if ?has_content!