Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

Sightly for select option

Avatar

Level 5

Hi,

 

Based on variation type different markup will be included in component.html to render different variations – single, multiple A or multiple B. Created drop down in my dialog for these variations. On selecting that option that particular markup has to come up. How can this be done in sightly to add value for drop down options so that it'll select that particular markup.

 

Thank you,

Keerthana

1 Accepted Solution

Avatar

Correct answer by
Level 2

Hi @keerthana_hn :

For including the html file based upon selected option, we can do like below code snippet:
<sly data-sly-test="${properties.selectedOption == 'optionA'}">

    <sly data-sly-include ="optionA.html">

</sly>
<sly data-sly-test="${properties.selectedOption == 'optionB'}">

    <sly data-sly-include ="optionB.html">
</sly>

Hope this helps.

View solution in original post

5 Replies

Avatar

Community Advisor

@keerthana_hn Use sightly Comparison Operators to show particular markup on dropdown selection.

<div data-sly-test="${properties.jcr:title == 'true'}">TRUE</div>
<div data-sly-test="${properties.jcr:title != 'true'}">FALSE</div>

https://www.aemtutorial.info/p/htl-operators.html

Avatar

Level 5

Hi @Bhuwan_B 

 

How to include the html file on selection of that option?

Avatar

Community Advisor
<sly data-sly-test="${properties.dropdownOption == 'single'}"> Render single Html variation </sly> <sly data-sly-test="${properties.dropdownOption == 'multiple A'}"> Render multiple A Html variation </sly> <sly data-sly-test="${properties.dropdownOption == 'multiple B'}"> Render multiple B Html variation </sly>

Avatar

Correct answer by
Level 2

Hi @keerthana_hn :

For including the html file based upon selected option, we can do like below code snippet:
<sly data-sly-test="${properties.selectedOption == 'optionA'}">

    <sly data-sly-include ="optionA.html">

</sly>
<sly data-sly-test="${properties.selectedOption == 'optionB'}">

    <sly data-sly-include ="optionB.html">
</sly>

Hope this helps.

Avatar

Administrator
@KirtiA, great reply. Good to have AEM SMEs like you in this community. Looking forward to see you more here.


Kautuk Sahni