Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
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