Solved

How to expand by default for collapsible multifield when click Add new multifield?

Forum|Forum|1 year ago
December 9, 2024
2 replies
1545 views

My component in AEM 6.5 is using collapsible in multifield

But when I click the Add button, the newly added multifield is collapsed by default, but I want it to be expand by default like below:

This is my code, I have added the code <collapsed="{Boolean}false"> in collapsible, but is not working. Anyone can help?

<faresheetmultifield
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
    composite="{Boolean}true"
    fieldLabel="Fare Sheets">
    <field
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container"
        name="./resourcesMultifield">
        <items jcr:primaryType="nt:unstructured">
            <layout
                jcr:primaryType="nt:unstructured"
                jcr:title="Faresheets detail field to expand"
                sling:resourceType="granite/ui/components/foundation/layouts/collapsible"
                collapsed="{Boolean}false">
                <items jcr:primaryType="nt:unstructured">
                    <well
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <layout
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/layouts/well"/>
                        <items jcr:primaryType="nt:unstructured">
                            <documenttitle
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldDescription="Entering Heading Description"
                                fieldLabel="Fare Sheets Title"
                                name="./documentTitle"
                                required="true"/>
                            <creationdate
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="/libs/granite/ui/components/coral/foundation/form/datepicker"
                                displayedFormat="DD-MM-YYYY"
                                emptyText="Date/Time"
                                fieldDescription="Enter the creation date of the document in format DD-MM-YYYY (Recommended Maximum Length : 10 characters)"
                                fieldLabel="Creation Date"
                                name="./creationDate"
                                required="true"
                                type="date"/>
                            <documentpath
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                fieldDescription="Browse document"
                                fieldLabel="Document Link"
                                name="./documentPath"
                                required="true"
                                rootPath="/content/dam/agent360"/>
                        </items>
                    </well>
                </items>
            </layout>
        </items>
    </field>
</faresheetmultifield>

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 arunpatidar

Hi @hozi1

As per the documentation, there is no property we can set in dialog to expand by default.

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/layouts/collapsible/index.html

Thanks

Hi @prathyusha_vp , @hozi1

You can use accordion to achieve same

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/accordion/index.html

+ myaccordion
  - sling:resourceType = "granite/ui/components/coral/foundation/accordion"
  + items
    + item1
      - jcr:title = "Item 1"
    + item2
      - jcr:title = "Item 2"
      + parentConfig
        - active = true

G

GanthiRa1

Community Advisor

Hi @hozi1

Please find the below thread which has the same kind of discussion.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/collapsible-layout-collapsed-by-default/m-p/445894

H

HOZI1Author

I have read that before, but the solution is to change style, I am not sure how can I change the style as we are not using any javascript on it.

Manu_Mathew_

Community Advisor

@hozi1 If you wish to use javascript on dialogs you could use authoring clientlibs and use granite-data attributes to target as well.

by using category cq.authoring.dialog or extraClientlibs.

few other ref. https://sourcedcode.com/blog/aem/what-are-aem-extraclientlibs

https://sourcedcode.com/blog/aem/adding-custom-client-library-for-aem-author-editor-touch-ui

kautuk_sahni

Community Manager

@hozi1 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

Kautuk Sahni

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded