Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 3

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
Community Advisor

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/... 

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

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

Community Advisor

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