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

[James_shan]

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>

<content>

<tabs>

<items>

<column>

.....

[ayushmishra07 · Accepted solution]

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/... 

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/... : 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/customiz... 

Hope it helps !

Thanks, 

Ayush

[James_shan]

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]

Hi @James_shan , 

Just to clarify the components are written in XML, unlike HTML, XML does not have any predefined tags, there are some standard naming conventions that are widely followed but the actual value that the tag has would be based on the sling:resourceType property associated with that tag. 
Here's an example : 

<asset
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Asset"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">

Now in place of asset you can rename this as container also and it'll still work the same. 
Similarly, in another example, I have columns tag defined as 

<columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">

But in your project, columns might be referring to a different resourceType. 

While developing a custom component, how I normally refer to the documentation is:

1 - I go to the documentation site

2 - check which of the available resourceType best fits my use-case

3 - open the link for that particular resourceType and it does include the list of all the available attributes that I can define for that resourceType.

eg: for "fixedcolumns" resource you can see the list of available attributes at this link : https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

For more information on XML, please refer to this documentation : https://www.w3schools.com/xml/xml_whatis.asp 

Thanks,
Ayush

[James_shan]

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.

[ayushmishra07]

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-r... 

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

[aanchal-sikka]

Hello @James_shan 

Adobe provides the documentation specific to types. 

Example: If you want to use FileUpload /libs/granite/ui/components/coral/foundation/form/fileupload, then available configs are documented at:

FileUpload — Granite UI 1.0 documentation (adobe.com)

Extensive documentation is available on https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

The detailed XML for an entire dialog might not be available. Best is to copy something from an OOTB component and then refine it as per your need.