Sightly for select option | Community
Skip to main content
Keerthana_H_N
Employee
Jul 14, 2021 11:55 AM UTC
Solved

Sightly for select option

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.
KirtiAAccepted solution
Level 2
Jul 14, 2021 1:16 PM UTC

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.

View reply

5 replies

KirtiAAccepted solution
Level 2
Jul 14, 2021 1:16 PM UTC

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.

Translate
    kautuk_sahni
    kautuk_sahni
    Employee
    Aug 4, 2021 6:53 AM UTC
    @kirtia, great reply. Good to have AEM SMEs like you in this community. Looking forward to see you more here.
    Translate
    Kautuk Sahni
    Keerthana_H_NAuthor
    Employee
    Jul 14, 2021 1:03 PM UTC

    Hi @bhuwan_b 

     

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

    Translate
      Bhuwan_B
      Bhuwan_B
      New Participant
      Jul 14, 2021 1:42 PM UTC
      <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>
      Translate
        Bhuwan_B
        Bhuwan_B
        New Participant
        Jul 14, 2021 12:38 PM UTC

        @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

        Translate
          Terms & ConditionsAccessibility statement

          Loading footer...