Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
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