AEM Component Dialog CheatSheet
Published
Modified
Check Box
<removeBottomSpacing jcr:primaryType="nt:unstructured"
sling:resourceType="/libs/granite/ui/components/coral/foundation/form/checkbox"
text="Remove Bottom Spacing?"
fieldDescription="Remove Default Bottom Spacing of the Component"
tooltipPosition="right"
name="./removeBottomSpacing"
checked="{Boolean}false"
value="mb-0"
uncheckedValue=""/>
Date Picker
<dateOfBirth jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
displayTimezoneMessage="{Boolean}false"
fieldLabel="Date of Birth"
fieldDescription="Date of Birth"
emptyText="Enter your Date of Birth"
name="./dateOfBirth"
type="date"
valueFormat="YYYY-MM-DD"
displayedFormatstring="YYYY-MM-DD"
required="{Boolean}true"/>
Field Set
<userInformation jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
jcr:title="User Information">
<items jcr:primaryType="nt:unstructured">
<firstName jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="First Name"
name="./firstName"
required="{Boolean}true"/>
<lastName jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Last Name"
name="./lastName"
required="{Boolean}true"/>
</items>
</userInformation>
Multi Field
<articles jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
fieldLabel="Article List"
composite="{Boolean}true"
required="{Boolean}true">
<field jcr:primaryType="nt:unstructured"
sling:resourceType = "granite/ui/components/coral/foundation/container"
name="./articles">
<items jcr:primaryType="nt:unstructured">
<articleTitle jcr:primaryType="nt:unstructured"
sling:resourceType = "granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Article Title"
name="./articleTitle"/>
<articleDetailsPage jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/coral/common/form/pagefield"
fieldLabel="Article Details Page"
name="./articleDetailsPage"
rootPath="/content/aem-demo"/>
</items>
</field>
</articles>
Number Field
<age jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
min="18"
max="35"
step="1"
name="./age"
value="28"
fieldLabel="Age"
required="{Boolean}true"/>
Path Field
<linkUrl jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Link URL"
emptyText="Page URL"
name="./linkURL"
multiple="{Boolean}false"
forceSelection="{Boolean}true"
required="{Boolean}true"
rootPath="/content/aem-demo"/>
Select
<continent jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Continent"
emptyText="Select a Continent"
name="./continent"
multiple="{Boolean}false"
required="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<asia jcr:primaryType="nt:unstructured"
text="Asia"
value="asia"/>
<europe jcr:primaryType="nt:unstructured"
selected="{Boolean}true"
text="Europe"
value="europe"/>
</items>
</continent>
Switch
<watchFootball jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/switch"
value="{Boolean}true"
uncheckedValue="{Boolean}false"
checked="{Boolean}true"
fieldLabel="Watch Football?"
name="./watchFootball"/>
Text Field
<firstName jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="First Name"
fieldDescription="First Name"
required="{Boolean}true"
emptyText="Enter your First Name"
name="./firstName"
value="Mahedi"
maxlengthlong="{Long}25"/>