Expand my Community achievements bar.

Elevate your expertise and be recognized as a true influencer! Nominations for the exclusive Adobe Community Advisor program 2023 are now OPEN.
SOLVED

How to set a default selected option in the Touch UI select element?

Avatar

Level 2

I know this has been asked 8 years ago here. But none of the answers worked for me. 

 

I am using AEM Cloud, and have the following `select` element for cq_dialog:

 

<maxColumns
    jcr:primaryType="nt:unstructured" 
    sling:resourceType="granite/ui/components/coral/foundation/form/select"
    fieldLabel="Max number of columns"
    name="./maxColumns">
    <items jcr:primaryType="nt:unstructured">
        <six
                jcr:primaryType="nt:unstructured"
                text="6"
                value="wvc-imagelist__flex-16"/>
        <five
                jcr:primaryType="nt:unstructured"
                text="5"
                selected="true"
                value="wvc-imagelist__flex-20"/>
        <four
                jcr:primaryType="nt:unstructured"
                text="4"
                value="wvc-imagelist__flex-25"/>
    </items>
</maxColumns>

 

So by default, the top node "6" will be selected per below.

 

sean12341_0-1682580620948.png

 

What can I do to make the middle "5" to be the default selection, like below?

 

sean12341_1-1682581135085.png

 

Thank you, 

1 Accepted Solution

Avatar

Correct answer by
Level 8

Hello @sean12341 ,

You can do this by simply selected="{Boolean}true"

 

 

<maxColumns
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/select"
        fieldLabel="Max number of columns"
        name="./maxColumns">
    <items jcr:primaryType="nt:unstructured">
        <six
                jcr:primaryType="nt:unstructured"
                text="6"
                value="wvc-imagelist__flex-16"/>
        <five
                jcr:primaryType="nt:unstructured"
                text="5"
                selected="{Boolean}true"
                value="wvc-imagelist__flex-20"/>
        <four
                jcr:primaryType="nt:unstructured"
                text="4"
                value="wvc-imagelist__flex-25"/>
    </items>
</maxColumns>

 

 

  

You can get the other fields option for different variation configuration: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

3 Replies

Avatar

Correct answer by
Level 8

Hello @sean12341 ,

You can do this by simply selected="{Boolean}true"

 

 

<maxColumns
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/select"
        fieldLabel="Max number of columns"
        name="./maxColumns">
    <items jcr:primaryType="nt:unstructured">
        <six
                jcr:primaryType="nt:unstructured"
                text="6"
                value="wvc-imagelist__flex-16"/>
        <five
                jcr:primaryType="nt:unstructured"
                text="5"
                selected="{Boolean}true"
                value="wvc-imagelist__flex-20"/>
        <four
                jcr:primaryType="nt:unstructured"
                text="4"
                value="wvc-imagelist__flex-25"/>
    </items>
</maxColumns>

 

 

  

You can get the other fields option for different variation configuration: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

Avatar

Level 8

Hello @sean12341 ,

Just tried with my following code and it worked perfectly fine. The mentioned thread you refer that's also the correct way to default select.

If you still get the problem let me know.

Avatar

Employee Advisor

heyy @sean12341 ,

 

For resourcetype : 

granite/ui/components/coral/foundation/form/select

selected="{Boolean}true" should work, however it wouldn't if the component is already authored.

Best Regards,

Milind Bachani