Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

HTL - render multiple select dropdown

Avatar

Level 2

Could you advice on how to display the multi selected dropdown list via Sightly HTL for AEM 6.4? For example in a dropdown inputField, multi selected: name, email, phone. How can HTL display that on a component? Thanks in advance

cq dialog:

sling:resourceType="granite/ui/components/foundation/form/select"
multiple="{Boolean}true"

name="./inputField"

I tried the following but doesn't work

<sly data-sly-test="${properties.inputField == name}">

     <input type="text" name="name" />

</sly>

I wanted to print a pre-defined code based on the multi value

<input type="text" name="name" />

<input type="email" name="email" />

<input type="tel" name="phone" />

When check in the content the the properties inputField type is multi with values name,email,phone

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Yup I was also trying the same

<sly data-sly-list.fieldType="${properties.inputField}">

    <input data-sly-test="${fieldType == 'emailAddress'}" type="email" name=${fieldType} class="form-control" placeholder="${'Business Email {0}' @ i18n, format='*'}" required data-error="${'Please, enter a valid email address' @ i18n}" />

    <sly data-sly-test="${fieldType == 'name'}">

        <div class="row">

            <div class="col-xs-12 col-md-6">

                <div class="form-group">

                    <input type="text" name="firstName" class="form-control" placeholder="${'First Name {0}' @ i18n, format='*'}" required data-error="${'Required information' @ i18n}" />

                </div>

            </div>

            <div class="col-xs-12 col-md-6">

                <div class="form-group">

                    <input type="text" name="lastName" class="form-control" placeholder="${'Last Name {0}' @ i18n, format='*'}" required data-error="${'Required information' @ i18n}" />

                </div>

            </div>

        </div>

    </sly>

</sly>

Just a note. Make sure to end your input tag with / else your list will only run once. In the above same, in the same list I have tried to render all you required fields

1590384_pastedImage_0.png

Thanks

Veena

View solution in original post

10 Replies

Avatar

Community Advisor

Hi

  You can do the below

<sly data-sly-list.type="${properties.inputField}">

     <input type=${type} name=${type} />

</sly>

1590383_pastedImage_8.png

  Please refer Sightly how to get multivalued properties 

Thanks

Veena

Avatar

Level 2

How about if there is extra attributes to print that is different for each selected item?

For email selected:

<input type="email" name="emailAddress" class="form-control" placeholder="${'Business Email {0}' @ i18n, format='*'}" required data-error="${'Please, enter a valid email address' @ i18n}">

For name selected:

<div class="row">
  <div class="col-xs-12 col-md-6">
  <div class="form-group">
  <input type="text" name="firstName" class="form-control" placeholder="${'First Name {0}' @ i18n, format='*'}" required data-error="${'Required information' @ i18n}">
  </div>
  </div>
  <div class="col-xs-12 col-md-6">
  <div class="form-group">
  <input type="text" name="lastName" class="form-control" placeholder="${'Last Name {0}' @ i18n, format='*'}" required data-error="${'Required information' @ i18n}">
  </div>
  </div>
</div>

Avatar

Community Advisor

What will be the values from the dialog ? ./inputField ?

Avatar

Community Advisor

One thing may be you can do is create a model and in that you create separate Get and Set Methods for email and name. Inject "inputField" and in PostConstruct fetch each value and set them separately to email and name fields . That way it will be easy for you to handle .

Avatar

Level 2

<items
   jcr:primaryType="nt:unstructured">
  <name
   jcr:primaryType="nt:unstructured"
   text="Name"
   value="name"/>
  <email
   jcr:primaryType="nt:unstructured"
   text="Email"
   value="emailAddress"/>
  <phone
   jcr:primaryType="nt:unstructured"
   text="Phone"
   value="busPhone"/>
</items>

If is not possible with data-sly-test and render custom html for each selection, would need to look into sling model if HTL is not possible. Maybe change the dropdown to a list of checkbox boolean value.

Avatar

Community Advisor

You can do this using sling model to keep your code less complex. Try it and let me know if it didn't work.

Avatar

Level 2

Thanks for the advice. I am trying to use only HTL avoiding sling model

Avatar

Community Advisor

Okay let me then try this for you using HTL and see if we can work this out. Give me few minutes

Avatar

Level 2

Combining both data-sly-list and data-sly-test, I am able to custom render the html output based on the multi selection. Thanks a lot for the inspiration!

<sly data-sly-list.type="${properties.inputField}">
  <sly data-sly-test="${type == 'emailAddress'}">
  <div class="form-group">
  <input type="email" name="emailAddress" class="form-control" placeholder="${'Business Email {0}' @ i18n, format='*'}" required data-error="${'Please, enter a valid email address' @ i18n}">
  </div>
  </sly>
</sly>

Avatar

Correct answer by
Community Advisor

Yup I was also trying the same

<sly data-sly-list.fieldType="${properties.inputField}">

    <input data-sly-test="${fieldType == 'emailAddress'}" type="email" name=${fieldType} class="form-control" placeholder="${'Business Email {0}' @ i18n, format='*'}" required data-error="${'Please, enter a valid email address' @ i18n}" />

    <sly data-sly-test="${fieldType == 'name'}">

        <div class="row">

            <div class="col-xs-12 col-md-6">

                <div class="form-group">

                    <input type="text" name="firstName" class="form-control" placeholder="${'First Name {0}' @ i18n, format='*'}" required data-error="${'Required information' @ i18n}" />

                </div>

            </div>

            <div class="col-xs-12 col-md-6">

                <div class="form-group">

                    <input type="text" name="lastName" class="form-control" placeholder="${'Last Name {0}' @ i18n, format='*'}" required data-error="${'Required information' @ i18n}" />

                </div>

            </div>

        </div>

    </sly>

</sly>

Just a note. Make sure to end your input tag with / else your list will only run once. In the above same, in the same list I have tried to render all you required fields

1590384_pastedImage_0.png

Thanks

Veena