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>
Solved! Go to Solution.
Views
Replies
Total Likes
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
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
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.
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
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
<?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-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
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.