Forum Discussion

davidsand's avatar
3 years ago

Custom Component Tiled navigation

I currently have a custom component that tiles the categories in a core node that the component sits in.

Problem is I want the boards in a certain category to be shown that isn't the core node the component sits in. So if I put the below code in any page it will show the hierarchy of that page. 

I want to put this tiled navigation on the home page but have it show the boards in one of my categories.

I've tried a few changes but it doesn't show properly.

<#assign baseQry = "SELECT id, short_title, description, view_href, topics.count(*), avatar.medium_href FROM nodes" />

<#if coreNode.nodeType?lower_case == "community">
    <#assign whereClause = " WHERE depth=1 " />
<#else>
    <#assign whereClause = " WHERE parent.id = 'category:${coreNode.id}' " />
</#if>

<#assign orderClause = " ORDER BY position ASC" />
<#assign fullQry = baseQry + whereClause + orderClause />
<#assign nodes = commonUtils.executeLiQLQuery(fullQry) />
  • What's deciding where to pull the nodes from is this bit of code

    <#if coreNode.nodeType?lower_case == "community">
        <#assign whereClause = " WHERE depth=1 " />
    <#else>
        <#assign whereClause = " WHERE parent.id = 'category:${coreNode.id}' " />
    </#if>

    so if you want to be able to choose a specific category, that's the bit of code to modify.

    The most versatile way to modify this is to add a bit of code to support parameters, so you can pass a category ID to it, and it will pull from that.

    To get a parameter passed to a component you use

    env.context.component.getParameter("parameter_name")

     

    So the top of your code might look like 

    <#assign useCategory = env.context.component.getParameter("category")!"" />

    ...and then we need to modify the if/else clause I highlighted above to use this. We're fetching a parameter called "category", and assigning it to useCategory, and have a default of empty string, in case the parameter isn't present.

     

    <#if useCategory?has_content>
        <#assign whereClause = " WHERE parent.id = 'category:${useCategory}'" />
    <#elseif coreNode.nodeType?lower_case == "community">
        <#assign whereClause = " WHERE depth=1 " />
    <#else>
        <#assign whereClause = " WHERE parent.id = 'category:${coreNode.id}' " />
    </#if>

    So here we're checking if useCategory exists and is not an empty string, and if so, we use that, otherwise we'll fall in to the logic that existed before.

    To use this component with a parameter, it would look like:
    <@component id="component.name" category="TheCategoryIDHere" /> (freemarker)
    or
    <component id="component.name" category="TheCategoryIDHere" > (Quilt/Page XML)

  • MattV's avatar
    MattV
    Khoros Staff

    What's deciding where to pull the nodes from is this bit of code

    <#if coreNode.nodeType?lower_case == "community">
        <#assign whereClause = " WHERE depth=1 " />
    <#else>
        <#assign whereClause = " WHERE parent.id = 'category:${coreNode.id}' " />
    </#if>

    so if you want to be able to choose a specific category, that's the bit of code to modify.

    The most versatile way to modify this is to add a bit of code to support parameters, so you can pass a category ID to it, and it will pull from that.

    To get a parameter passed to a component you use

    env.context.component.getParameter("parameter_name")

     

    So the top of your code might look like 

    <#assign useCategory = env.context.component.getParameter("category")!"" />

    ...and then we need to modify the if/else clause I highlighted above to use this. We're fetching a parameter called "category", and assigning it to useCategory, and have a default of empty string, in case the parameter isn't present.

     

    <#if useCategory?has_content>
        <#assign whereClause = " WHERE parent.id = 'category:${useCategory}'" />
    <#elseif coreNode.nodeType?lower_case == "community">
        <#assign whereClause = " WHERE depth=1 " />
    <#else>
        <#assign whereClause = " WHERE parent.id = 'category:${coreNode.id}' " />
    </#if>

    So here we're checking if useCategory exists and is not an empty string, and if so, we use that, otherwise we'll fall in to the logic that existed before.

    To use this component with a parameter, it would look like:
    <@component id="component.name" category="TheCategoryIDHere" /> (freemarker)
    or
    <component id="component.name" category="TheCategoryIDHere" > (Quilt/Page XML)