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

Button in component dialog

Avatar

Level 6

I have to create a button inside a component dialog. Kindly advise on how to do it

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Sanjana12,

You can use one of below:

Here is simple code example of Button usage.

<cq:dialog jcr:primaryType="nt:unstructured" jcr:title="Properties" sling:resourceType="cq/gui/components/authoring/dialog">
    <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <text jcr:primaryType="nt:unstructured" fieldLabel="Text" name="./text" sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/>
                    <path jcr:primaryType="nt:unstructured" fieldLabel="Path" filter="nosystem" name="./path" rootPath="/content/dam" sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"/>
                    <button jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/button" text="Button" type="button" />
                </items>
            </column>
        </items>
    </content>
</cq:dialog>

And the result:

button-in-dialog.jpg

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi @Sanjana12,

You can use one of below:

Here is simple code example of Button usage.

<cq:dialog jcr:primaryType="nt:unstructured" jcr:title="Properties" sling:resourceType="cq/gui/components/authoring/dialog">
    <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <text jcr:primaryType="nt:unstructured" fieldLabel="Text" name="./text" sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/>
                    <path jcr:primaryType="nt:unstructured" fieldLabel="Path" filter="nosystem" name="./path" rootPath="/content/dam" sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"/>
                    <button jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/button" text="Button" type="button" />
                </items>
            </column>
        </items>
    </content>
</cq:dialog>

And the result:

button-in-dialog.jpg

Avatar

Community Advisor

Use below resourcetype for dialog field 

granite/ui/components/coral/foundation/button

 

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 



Arun Patidar

Avatar

Community Advisor

Add button resource in component dialog xml

<button jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/button"
text="Button"
type="button" />

  Button resource-https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...

 

HeenaMadan_0-1662033547802.png