Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Collapsible Layout collapsed by default

Avatar

Level 2

I want  to collapse the block of collapsible field by default in Touch UI .

Prachi_Mathur_0-1648210523699.png

 

1 Accepted Solution

Avatar

Correct answer by
Level 4

By Default the style Display is set to none for that field

 

LeelaPavanKumar_0-1648279554741.png

If you set the Display attribute of style as Block using some script then by default it is in Expand mode.

LeelaPavanKumar_1-1648279670340.png

 

View solution in original post

4 Replies

Avatar

Community Advisor

Hi @Prachi_Mathur 
Please check https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...

 

To disable, I guess by default it is collapsed, if you add active to item's parentConfig then it is active.



Arun Patidar

Avatar

Level 4

Hi @Prachi_Mathur ,

 

Create a layout node under your items node and add sling:resourceType as granite/ui/components/foundation/layouts/collapsible.

 

<Collapsible
     jcr:primaryType="nt:unstructured"
     jcr:title="Collapsible Fields"
     sling:resourceType="granite/ui/components/foundation/container">
     <items jcr:primaryType="nt:unstructured">
         <Collapsenode
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
            <items jcr:primaryType="nt:unstructured">
                   <title
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Title"
                        renderReadOnly="{Boolean}true"/>
            </items>
         </Collapsenode>
    </items>
    <layout
          jcr:primaryType="nt:unstructured"
          sling:resourceType="granite/ui/components/foundation/layouts/collapsible"/>
</Collapsible>

LeelaPavanKumar_0-1648272427714.png

LeelaPavanKumar_1-1648272484484.png

 

 

Avatar

Level 2

I tried this but it is not open by default ,I have to click on the Collapsible Fields then it is opened. 

Avatar

Correct answer by
Level 4

By Default the style Display is set to none for that field

 

LeelaPavanKumar_0-1648279554741.png

If you set the Display attribute of style as Block using some script then by default it is in Expand mode.

LeelaPavanKumar_1-1648279670340.png