Solved

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

7 replies
1628 views
Translate All

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.

arunpatidarAccepted solution

Community Advisor

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

Arun Patidar

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

Translate

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.

Translate

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

Translate

kautuk_sahni

Adobe Employee

@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!

Translate

Kautuk Sahni

Sign up

Login with SSO

Login to the community

Login with SSO