How to implement Coral.SelectList() feature in Touch UI Dialog | Community
Skip to main content
C
chaithanya
November 14, 2018
Solved

How to implement Coral.SelectList() feature in Touch UI Dialog

  • November 14, 2018
  • 6 replies
  • 1935 views

Hi

We got requirement to implement multi select feature similar to coral.selectList , could you please provide the steps or reference to implement.

Thanks

    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 arunpatidar

    Hi,

    You need to get the list from datasource similar like dynamic list from select dropdown

    e.g. aem63app-repo/HelloWorldCompDDServlet.java at master · arunpatidar02/aem63app-repo · GitHub

    You can create your dialog like below

    6 replies

    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    November 14, 2018

    Hi,

    Please check https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/coralui3/Coral.SelectList.html

    Arun Patidar
    C
    chaithanyaAuthor
    November 14, 2018

    Hi Arun,

    I already checked that, but there is no "selectlist" under "/granite/ui/components/coral/foundation/form" to give to sling:resourceType. Let me know your thoughts.

    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    November 14, 2018

    You need to implement using autocompleteList

    Autocomplete — Granite UI 1.0 documentation

    AutocompleteList — Granite UI 1.0 documentation

    https://aemlab.blogspot.com/2018/08/searchfilter-touch-ui-dialog-dropdown.html

    Arun Patidar
    C
    chaithanyaAuthor
    November 14, 2018

    Hi Arun,

    Requirement is similar to have like below. Please check coral.selectList() multi select option. It would be great if you can help me on getting the below sample in touch UI

    <coral-selectlist multiple>
          <coral-selectlist-item>Africa</coral-selectlist-item>
          <coral-selectlist-item>America</coral-selectlist-item>
          <coral-selectlist-item>Asia</coral-selectlist-item>
          <coral-selectlist-item>Europe</coral-selectlist-item>
          <coral-selectlist-item>Oceania</coral-selectlist-item>
    </coral-selectlist>

    arunpatidar
    Community Advisor
    arunpatidarCommunity AdvisorAccepted solution
    Community Advisor
    November 14, 2018

    Hi,

    You need to get the list from datasource similar like dynamic list from select dropdown

    e.g. aem63app-repo/HelloWorldCompDDServlet.java at master · arunpatidar02/aem63app-repo · GitHub

    You can create your dialog like below

    Arun Patidar
    T
    troubleshooter3
    Level 3
    September 29, 2023

    @arunpatidar  how would you do this today when autocomplete and autocomplete-list are deprecated? 

    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    October 1, 2023

    you can try writing a custom script

    https://blogs.perficient.com/2019/05/03/how-to-add-a-filter-to-aem-granite-select-widget/ 

    Arun Patidar
    C
    chaithanyaAuthor
    November 16, 2018

    Hi Arun,

    I have updated the coral ui styles and achieved my requirement. Thanks for your support.

    Thanks

      Terms & ConditionsAccessibility statement

      Loading footer...