Sightly for select option | Community
Skip to main content
K
Adobe Employee
Keerthana_H_NAdobe Employee
Adobe Employee
July 14, 2021
Solved

Sightly for select option

  • July 14, 2021
  • 3 replies
  • 2488 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by KirtiA

Hi @keerthana_h_n :

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.

3 replies

Bhuwan_B
Community Advisor
Bhuwan_BCommunity Advisor
Community Advisor
July 14, 2021

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

    K
    Adobe Employee
    Keerthana_H_NAdobe EmployeeAuthor
    Adobe Employee
    July 14, 2021

    Hi @bhuwan_b 

     

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

      Bhuwan_B
      Community Advisor
      Bhuwan_BCommunity Advisor
      Community Advisor
      July 14, 2021
      <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>
        K
        KirtiAAccepted solution
        Level 2
        July 14, 2021

        Hi @keerthana_h_n :

        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
          Community Manager
          kautuk_sahniCommunity Manager
          Community Manager
          August 4, 2021
          @kirtia, great reply. Good to have AEM SMEs like you in this community. Looking forward to see you more here.
          Kautuk Sahni
          Terms & ConditionsAccessibility statement

          Loading footer...