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 for select option

keerthana_hn
Level 3
Level 3

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
KirtiA
Correct answer by
Level 2
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

1 Reply
Bhuwan_B
Community Advisor
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

keerthana_hn
Level 3
Level 3

Hi @Bhuwan_B 

 

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

Bhuwan_B
Community Advisor
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>
KirtiA
Correct answer by
Level 2
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

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