Sightly for select option

[keerthana_hn]

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

[Bhuwan_B]

@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

[keerthana_hn]

Hi @Bhuwan_B 

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

[Bhuwan_B]

<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>

[KirtiA · Accepted solution]

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.

[kautuk_sahni]

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