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

Sightly Conditional html

deana66659071
Level 4
Level 4

Is it possible to have a slightly conditional "row"?

Example

       <div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
        <div class="row">
         <div class="even">${groupItemsList.index}</div>       
       </div>
       <div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
         <div class="odd">${groupItemsList.index}</div>       
        </div>
       </div>
 

BTW: the above code does not work ....

Thank you in advance.

 

-Dean

1 Accepted Solution
Lokesh_Shivalingaiah
Correct answer by
Community Advisor
Community Advisor

it is definitely possible !

btw what is the datatype of even or odd in the list ?? if its string, then please check like 

data-sly-test="${groupItemsList.odd == 'true}"

refer [1] for  more example

[1] http://blogs.adobe.com/experiencedelivers/experience-management/sightly-intro-part-3-2/

View solution in original post

9 Replies
Lokesh_Shivalingaiah
Correct answer by
Community Advisor
Community Advisor

it is definitely possible !

btw what is the datatype of even or odd in the list ?? if its string, then please check like 

data-sly-test="${groupItemsList.odd == 'true}"

refer [1] for  more example

[1] http://blogs.adobe.com/experiencedelivers/experience-management/sightly-intro-part-3-2/

View solution in original post

kunal23
Level 10
Level 10

The following code is working for me- 

<dl data-sly-list="${currentPage.listChildren}"> <div data-sly-test="${itemList.odd}" data-sly-unwrap> <div class="row"> <div class="odd">   odd </div> </div> </div> <div data-sly-test="${itemList.even}" data-sly-unwrap> <div class="row"> <div class="odd">   even </div> </div> </div> </dl>
deana66659071
Level 4
Level 4

I'm just using the OOB odd, even, index, etc that comes with the list ... nothing in particular
The problem I have is that the tags do not match and the browser seems to get confused.

I still do not see any example close to the following -- even in the link you provided:

-----------------------------------------------------------------------------------------------
<div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
    <div class="row">
        <div class="even">${groupItemsList.index}</div>      
</div>

<div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
        <div class="odd">${groupItemsList.index}</div>      
    </div>      
</div>
-----------------------------------------------------------------------------------------------


It should produce the following if there are 2 items in the list:

<div class="row">
    <div class="even">${groupItemsList.index}</div>      
    <div class="odd">${groupItemsList.index}</div>      
</div>      

It should produce the following if there are 4 items in the list:

<div class="row">
    <div class="even">${groupItemsList.index}</div>      
    <div class="odd">${groupItemsList.index}</div>      
</div>      
<div class="row">
    <div class="even">${groupItemsList.index}</div>      
    <div class="odd">${groupItemsList.index}</div>      
</div>      

deana66659071
Level 4
Level 4

I understand that this will work, but all of the html "div" tags match ....

What about something like this?

-----------------------------------------------------------------------------------------------
<div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
    <div class="row">
        <div class="even">${groupItemsList.index}</div>      
</div>

<div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
        <div class="odd">${groupItemsList.index}</div>      
    </div>      
</div>
-----------------------------------------------------------------------------------------------


It should produce the following if there are 2 items in the list:

<div class="row">
    <div class="even">${groupItemsList.index}</div>      
    <div class="odd">${groupItemsList.index}</div>      
</div>      

It should produce the following if there are 4 items in the list:

<div class="row">
    <div class="even">${groupItemsList.index}</div>      
    <div class="odd">${groupItemsList.index}</div>      
</div>      
<div class="row">
    <div class="even">${groupItemsList.index}</div>      
    <div class="odd">${groupItemsList.index}</div>      
</div>      

Lokesh_Shivalingaiah
Community Advisor
Community Advisor

If you want the above result, then I think this should work

-----------------------------------------------------------------------------------------------

<div class="row">

<div data-sly-test="${groupItemsList.even}" data-sly-unwrap> 

        <div class="even">${groupItemsList.index}</div>      
</div>

<div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
        <div class="odd">${groupItemsList.index}</div>      
    </div>      
</div>
-----------------------------------------------------------------------------------------------

kautuk_sahni
Community Manager
Community Manager

Hi 

Yes, please check the datatype of even/Odd. 

if its string, then please check like data-sly-test="${groupItemsList.odd == 'true}"  (As mentioned by Lokesh)

If it is Boolean then what you specified would work , data-sly-test="${groupItemsList.odd }"

For more information, please have a loot at this post :- http://stackoverflow.com/questions/24550498/conditional-attributes-in-sightly-templates-aem-cq

 

I hope this would help you.

Thanks and Regards

Kautuk Sahni

deana66659071
Level 4
Level 4

Thank you for your reply, but that's not exactly what I'm trying to do here ...

This is in a loop of a list ...

We can only write out the following when the loop is even ...

<div class="row">
     <div class="even">${groupItemsList.index}</div>     

Likewise, we can write out the following when the value is odd ...
 
     <div class="odd">${groupItemsList.index}</div>     
 </div>     

 
NOTE:  The odd thing here is that the html "div" tags do not match up until the end.

I've tried this and it doesn't work ....

-----------------------------------------------------------------------------------------------
<div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
    <div class="row">
     <div class="even">${groupItemsList.index}</div>     
</div>

<div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
        <div class="odd">${groupItemsList.index}</div>     
    </div>     
</div>

-----------------------------------------------------------------------------------------------

Thank you in advance for your help .... this is just an odd situation that I would think
others may have resolved.

 
 

deana66659071
Level 4
Level 4

I don't have an issue with the .odd or .even attributes of the list, those actually hit when expected

-------------------------- Code Example Start -------------------------------------------------

<div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
    <div class="even">EVEN</div>     
</div>

<div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
    <div class="odd">ODD</div>     
</div>

NOTE: All of the html "div" tags match in the code above

Results:
    <div class="even">EVEN</div>     
    <div class="odd">ODD</div>     

-------------------------- Code Example Stop --------------------------------------------------

-------------------------- Non-Working Code Example Start -------------------------------------

<div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
    <div class="row">
        <div class="even">${groupItemsList.index}</div>     
</div>

<div data-sly-test="${groupItemsList.odd}" data-sly-unwrap>
        <div class="odd">${groupItemsList.index}</div>     
    </div>     
</div>

NOTE: The html "div" tags DO NOT MATCH in the code above

-------------------------- Non-Working Code Example Stop --------------------------------------

Feike_Visser1
Employee
Employee

It is much better and more readable to rewrite:

<div data-sly-test="${groupItemsList.even}" data-sly-unwrap>
    <div class="even">EVEN</div>     
</div>

to

    <div data-sly-test="${groupItemsList.even}"  class="even">EVEN</div>