AEM 6.5 & Sightly Condition with in list | Community
Skip to main content
S
SonuR1
Level 3
November 4, 2021
Solved

AEM 6.5 & Sightly Condition with in list

  • November 4, 2021
  • 2 replies
  • 1884 views

Hello All,

 

We have a component which lists the child pages of configured root path and wanted to highlight current page if it is part of the list.

 

For example:

Configured root path =  /content/mysite/home

the output component will be, 

  • Products
  • Services
  • Contact Us

Sightly code: 

 

<sly data-sly-list.page="${model.PagesList}"> 

           <li >

               <a  href="${ page.readMoreLink }.html">  ${ page.Title} </a> 

            </li>

</sly> 

 

Now I want to add one additional style tag/class at anchor tag level , when page.Title = "Products" so that output will be something like below: 

 

  • Products
  • Services
  • Contact Us

can someone advise me how to add condition within anchor tag so that I can highlight based on comparison. 

 

thanks in advance. 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Asutosh_Jena_

Hi @sonur1 

 

You can add a CSS class by applying a condition.

 

If current page path is equal to page.readMoreLink then add a class "active". Now apply the css style to "active" class and it will render in red color.

 

<sly data-sly-list.page="${model.PagesList}"> 

           <li >

               <a  href="${ page.readMoreLink }.html" class="${currentPage.path =page.readMoreLink ? 'active' : 'none'}">  ${ page.Title} </a> 

            </li>

</sly> 

 

Something like above. Not the exact syntax.

 

Thanks!

2 replies

Asutosh_Jena_
Community Advisor
Asutosh_Jena_Community AdvisorAccepted solution
Community Advisor
November 4, 2021

Hi @sonur1 

 

You can add a CSS class by applying a condition.

 

If current page path is equal to page.readMoreLink then add a class "active". Now apply the css style to "active" class and it will render in red color.

 

<sly data-sly-list.page="${model.PagesList}"> 

           <li >

               <a  href="${ page.readMoreLink }.html" class="${currentPage.path =page.readMoreLink ? 'active' : 'none'}">  ${ page.Title} </a> 

            </li>

</sly> 

 

Something like above. Not the exact syntax.

 

Thanks!

    MohitKumarK
    MohitKumarK
    Level 3
    November 4, 2021

    Hi @sonur1 , use condition like this

    <a href=“${page.readMoreLink}.html” class=“${currentPage.path == page.readMoreLink ? ‘active’ : ‘’}”>${page.title}<\a>

    in css you can add styles to active class.

     

    Thanks!

      Terms & ConditionsAccessibility statement

      Loading footer...