Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Touch-Ui DropDown with multiselect

Avatar

Level 6

Hi,

 

In Touch-Ui I can create a dropdown selection populated from an ajax call that returns JSON.

I need to be able to select 1 .. n values in the selection.

I have 2 problems

1) Add multiselect to dropdown

2) Have a list multiple values selected by the author be available for processing in JSP.

 

Regards

Clive Stewart

1 Accepted Solution

Avatar

Correct answer by
Administrator

Hi 

As mentioned by Andrew's, for multi-select:-

Link:- https://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/jcr_root/libs/granite/ui/components/founda...

// multipleboolean: Indicates if the user is able to select multiple selections.

Example:

+ myselect
  - sling:resourceType = "granite/ui/components/foundation/form/select"
  - emptyText = "Select"
  - name = "myselect"
  + items
    + option1
      - text = "op1"
    + option2
      - text = "op2"

 

And For populating the Dropdown via Ajex, 

Please refer to this community article:- https://helpx.adobe.com/aem-forms/6/dynamically-populate-dropdowns.html

Package:- https://helpx.adobe.com/content/help/en/aem-forms/6/dynamically-populate-dropdowns/_jcr_content/main...

I hope this solves your problem.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

View solution in original post

4 Replies

Avatar

Administrator

Hi 

For populating the Dropdown via Ajex, 

Please refer to this community article:- https://helpx.adobe.com/aem-forms/6/dynamically-populate-dropdowns.html

Package:- https://helpx.adobe.com/content/help/en/aem-forms/6/dynamically-populate-dropdowns/_jcr_content/main...

 

For Multi-Select i also need to figure it out.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 1

Hi Clive,

You can add multi-select to the select component by adding multiple="{Boolean}true". Your component would look something like this:

<selectExample jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/select" fieldLabel="Multi Select Example" multiple="{Boolean}true" name="./selectExample"> <items jcr:primaryType="nt:unstructured"> <foo jcr:primaryType="nt:unstructured" text="Foo" value="foo"/> <bar jcr:primaryType="nt:unstructured" text="Bar" value="bar"/> </items> </selectExample>    

The selected values will display as tags below the select input. I've noticed that there are some bugs with this when you place the multi-select inside a multifield component.

Avatar

Correct answer by
Administrator

Hi 

As mentioned by Andrew's, for multi-select:-

Link:- https://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/jcr_root/libs/granite/ui/components/founda...

// multipleboolean: Indicates if the user is able to select multiple selections.

Example:

+ myselect
  - sling:resourceType = "granite/ui/components/foundation/form/select"
  - emptyText = "Select"
  - name = "myselect"
  + items
    + option1
      - text = "op1"
    + option2
      - text = "op2"

 

And For populating the Dropdown via Ajex, 

Please refer to this community article:- https://helpx.adobe.com/aem-forms/6/dynamically-populate-dropdowns.html

Package:- https://helpx.adobe.com/content/help/en/aem-forms/6/dynamically-populate-dropdowns/_jcr_content/main...

I hope this solves your problem.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 6

Thank you Kautuk,

I have gone through the example you gave and have been able to resolve the issue as a result.

 

regards

Clive