AEM tags used in .content.xml file to create a dialog

Forum|Forum|2 years ago
July 24, 2023
2 replies
3772 views

I am new to AEM, when I try to customize a component, I can do it by following the WKND tutorial, but I want to know is there any document of Adobe website to introduce all the available tags can be used in the xml file, such as

<jcr:root>

<tabs>

<items>

.....

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 ayushmishra07

Hi @james_shan ,

The dialogs in AEM are written using granite UI, all of these tags that you have mentioned above, you can find the details of these following this link :
https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/index.html

You'll need to look under Server-side > Form To get details of specific input fields available and can refer to the home page link mentioned above to get complete over-view of all available tags.

Example Quick links for tags you have mentioned :
https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/tabs/index.html : for tags

Also, if you are studying customizing Core component I'll recommend that you follow this tutorial to get more clarity on the best practices : https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/customizing.html?lang=en#customizing-dialogs

Hope it helps !

Thanks,

Ayush

ayushmishra07

Accepted solution

Adobe Employee

Hi @james_shan ,

The dialogs in AEM are written using granite UI, all of these tags that you have mentioned above, you can find the details of these following this link :
https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/index.html

You'll need to look under Server-side > Form To get details of specific input fields available and can refer to the home page link mentioned above to get complete over-view of all available tags.

Example Quick links for tags you have mentioned :
https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/tabs/index.html : for tags

Also, if you are studying customizing Core component I'll recommend that you follow this tutorial to get more clarity on the best practices : https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/customizing.html?lang=en#customizing-dialogs

Hope it helps !

Thanks,

Ayush

J

James_shanAuthor

Level 2

Thanks @ayushmishra07 but this document is really too hard to read to find something there, any other document can use for development, the best guide book should be :

if I want to know how to use for example: <column>

it should

show me all the info of this tag

and

show me any properties can of this tag

and

any parent node or child node relate to this tag

Anyway thanks.

ayushmishra07

Adobe Employee

Thanks @ayushmishra07 this is helpful and more clear.

one more question below:

some components' resoureType is resourceSuperType, and they are come from core/wcm/components/.....

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Download"
    sling:resourceSuperType="core/wcm/components/download/v1/download"
    componentGroup="WKND Sites Project - Content"/>

some is resoureType, and resource come from

granite/ui/components/coral/foundation/...

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    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">
                    <title
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Title"
                        name="./title"/>
                    <text
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Text"
                        name="./text"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

could you please help clarify the difference between them and how to use them, TIA.

Hi @james_shan ,

Please refer to this answer for understanding the difference between the two:
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/sling-resourcetype-sling-resourcesupertype/m-p/170689

In short, resourceSuperType is an optional attribute which is used to maintain inheritance between the components, whereas resourceType is a path, which locates the script to be used for rendering the content.

Thanks,

Ayush