AEM 6.5 & Sightly Condition with in list

[SonuR1]

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. 

[Asutosh_Jena_ · Accepted solution]

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]

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!