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

SOLVED

AEM 6.5 & Sightly Condition with in list

SonuR1
Level 2
Level 2

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
Asutosh_Jena_
Correct answer by
Community Advisor
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
Asutosh_Jena_
Correct answer by
Community Advisor
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

MohitKumarK
Level 4
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!