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

Forum|Forum|2 years ago
July 24, 2023
2 replies
3747 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

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/granite/ui/components/coral/foundation/fixedcolumns/index.html

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

Thanks,
Ayush