Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

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

Avatar

Level 1

Hi

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

Thanks

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

Screenshot 2018-11-14 at 10.33.26 PM.png

Screenshot 2018-11-14 at 10.36.25 PM.png

Screenshot 2018-11-14 at 10.33.41 PM.png



Arun Patidar

View solution in original post

10 Replies

Avatar

Level 1

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.

Avatar

Level 1

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>

Avatar

Correct answer by
Community Advisor

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

Screenshot 2018-11-14 at 10.33.26 PM.png

Screenshot 2018-11-14 at 10.36.25 PM.png

Screenshot 2018-11-14 at 10.33.41 PM.png



Arun Patidar

Avatar

Level 3

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

Avatar

Level 3

@arunpatidar  How well it is for lets say we have 10000 of values coming through a remote API and i putting them all in coral-select and applying a filter on it? is that really feasible ?

Avatar

Community Advisor

Hi,
It is possible from technical side but from usability side, not a good option.

Rather than create something category and subcategory or alphabetical filtering first.



Arun Patidar

Avatar

Level 1

Hi Arun,

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

Thanks