Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Sightly : Set one of the properties as the default value.

Avatar

Level 9

Hi All,

Suppose I have two images to be displayed on the page. 

properties.image1 and properties.image2 are the related entries. Only one image has to be displayed on the page, based on whichever value is present. 

In case, both of the images are present, I should be able to show only  image1 on the page.

Any thoughts on this will be helpful.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Use data-sly-test in sightly

<div data-sly-test="${properties.image1 || properties.image2}"> <sly data-sly-test.image1="${properties.image1 ? properties.image1}"> Image 1 </sly> <sly data-sly-test.image2="${!image1 && properties.image2}"> Image 2 </sly> </div> Or use <div data-sly-test="${properties.image1 || properties.image2}"> <img scr="${properties.image1 ? properties.image1 :properties.image2}" /> </div>

Any similar approach will work

View solution in original post

5 Replies

Avatar

Correct answer by
Level 10

Use data-sly-test in sightly

<div data-sly-test="${properties.image1 || properties.image2}"> <sly data-sly-test.image1="${properties.image1 ? properties.image1}"> Image 1 </sly> <sly data-sly-test.image2="${!image1 && properties.image2}"> Image 2 </sly> </div> Or use <div data-sly-test="${properties.image1 || properties.image2}"> <img scr="${properties.image1 ? properties.image1 :properties.image2}" /> </div>

Any similar approach will work

Avatar

Level 9

Hi Praveen,

Thanks a lot for your reply. Will work on this and post back the results.

Avatar

Administrator

Hi 

I would like to share a reference link:

Link:- https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/SPECIFICATION.md

// It covers very/Mostly everything related to Sightly.

The logical && and || operators work like the JavaScript || and && operators: they return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value. This offers a handy way to use the || operator to specify default string values:

${varChoice ? varOne : varTwo}     <!--/* 5. Conditional (ternary) (note that the ? and : separators must be surrounded by a space) */-->

So as mentioned by Praveen, you can use:-

        <div data-sly-test="${properties.image1 || properties.image2}">

        <img scr="${properties.image1 ? properties.image1 :properties.image2}" />

        </div>

<!--/* For example in following case it will show pageTitle if it exists, else it shows jcr:title, and if that doesn't exist either, then resource.name is shown. */--> ${properties.pageTitle || properties.jcr:title || resource.name}

I hope this would be useful for you.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 9

Hi Praveen,

It seems to be working ok. Thank you for your help.

@Kautuk,

Thank you for your reply.

Avatar

Employee

You can even write it shorter...

<div data-sly-test.image="${properties.image1 || properties.image2}">

   <img scr="${image}" />

</div>

Here the result of data-sly-test gets stored in "image", then you can use that later on.