Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

[AEM Gems Webinar] Accelerating Experience Manager as a Cloud Service development with Rapid Development Environments
Adobe Summit 2023 | Complete list of AEM Sessions & Labs
SOLVED

AEM 6.5 & Sightly Condition with in list

Avatar

Level 3

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. 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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!

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

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!

Avatar

Level 4

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!