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

Forum|Forum|2 years ago
April 27, 2023
2 replies
905 views

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.

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

Thank you,

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Sady_Rifat

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/granite/ui/components/coral/foundation/form/select/index.html

Sady_Rifat

Accepted solution

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/granite/ui/components/coral/foundation/form/select/index.html