AEM Component Dialog CheatSheet
Published
Modified
Viewed381 times
Accordion
<accordion jcr:primaryType="nt:unstructured"
margin="{Boolean}false"
multiple="{Boolean}false"
sling:resourceType="granite/ui/components/coral/foundation/accordion">
<items jcr:primaryType="nt:unstructured">
<aem jcr:primaryType="nt:unstructured"
jcr:title="AEM"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<workflow jcr:primaryType="nt:unstructured"
name="./workflow"
value="{Boolean}true"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
text="Workflow"/>
</items>
<parentConfig jcr:primaryType="nt:unstructured"
active="{Boolean}true"/>
</aem>
</items>
</accordion>
CF Picker
<fragmentPath jcr:primaryType="nt:unstructured"
sling:resourceType="dam/cfm/components/cfpicker"
name="./fragmentPath"
fieldDescription="Path to the Content Fragment to display."
fieldLabel="Content Fragment"
emptyText="Enter or select Content Fragment"
forceSelection="{Boolean}true"
required="{Boolean}true"
multiple="{Boolean}false"
pickerTitle="Select Content Fragment"
rootPath="/content/dam/aem-demo"/>
Check Box
<removeBottomSpacing jcr:primaryType="nt:unstructured"
sling:resourceType="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=""/>
Color Field
<textColor jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
fieldLabel="Text Color"
name="./textColor"
showDefaultColors="{Boolean}false"
showProperties="{Boolean}true"
showSwatches="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<color1 jcr:primaryType="nt:unstructured"
value="000000"/>
<color2 jcr:primaryType="nt:unstructured"
value="FFFFFF"/>
</items>
</textColor>
Container
<container jcr:primaryType="nt:unstructured"
margin="{Boolean}true"
maximized="{Boolean}true"
sling:resourceType = "granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<imageCaption jcr:primaryType="nt:unstructured"
sling:resourceType = "granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Image Caption"
name="./imageCaption"/>
<alternateText jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/coral/common/form/textfield"
fieldLabel="Alternate Text"
name="./alternateText"/>
</items>
</container>
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>
File Upload
<thumbnail jcr:primaryType="nt:unstructured"
icon="adobe"
fieldLabel="Thumbnail"
fieldDescription="Thumbnail"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
name="./image/file"
fileNameParameter="./image/fileName"
fileReferenceParameter="./image/fileReference"
mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff,image/svg+xml]"
allowUpload="{Boolean}false"
allowDrop="{Boolean}true"
multiple="{Boolean}false"
required="{Boolean}true"
sizeLimit="10000000"/>
Fixed Columns
<content jcr:primaryType="nt:unstructured"
margin="{Boolean}true"
maximized="{Boolean}true"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column jcr:primaryType="nt:unstructured"
margin="{Boolean}true"
maximized="{Boolean}true"
sling:resourceType = "granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<videoSource jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Video Source"
name="./videoSource">
<items jcr:primaryType="nt:unstructured">
<youtube jcr:primaryType="nt:unstructured"
text="YouTube"
value="youtube"/>
<brightcove jcr:primaryType="nt:unstructured"
selected="{Boolean}true"
text="BrightCove"
value="brightcove"/>
</items>
</videoSource>
<videoId jcr:primaryType="nt:unstructured"
sling:resourceType = "granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Video ID"
name="./videoId"/>
</items>
</column>
</items>
</content>
Hidden Field
<firstName jcr:primaryType="nt:unstructured"
fieldLabel="First Name"
name="./firstName"
required="{Boolean}true"
emptyText="Enter your First Name"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/>
<pageTitle jcr:primaryType="nt:unstructured"
value="./firstName"
name="./pageTitle@ValueFrom"
sling:resourceType="granite/ui/components/coral/foundation/form/hidden"/>
<resourceType jcr:primaryType="nt:unstructured"
value="article/v1/article"
name="./resourceType"
sling:resourceType="granite/ui/components/coral/foundation/form/hidden"/>
Include
<textStyle jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/include"
path="/apps/aem-demo/components/common/color"/>
<!-- /apps/aem-demo/components/common/color/.content.xml -->
<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="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<textColor jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
fieldLabel="Text Color"
name="./textColor"
showDefaultColors="{Boolean}true"
showProperties="{Boolean}true"
showSwatches="{Boolean}true"/>
<backgroundColor jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
fieldLabel="Background Color"
name="./backgroundColor"
showDefaultColors="{Boolean}true"
showProperties="{Boolean}true"
showSwatches="{Boolean}true"/>
</items>
</jcr:root>
Include Clientlibs
<basic jcr:primaryType="nt:unstructured"
jcr:title="Basic"
sling:resourceSuperType="wcm/foundation/components/basicpage/v1/basicpage/tabs/basic"
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">
<clientLibs jcr:primaryType="nt:unstructured"
categories="aem-demo.tab.showHide"
js="aem-demo.dropdown.showHide"
css="aem-demo.dialogHeight"
sling:resourceType="granite/ui/components/coral/foundation/includeclientlibs"/>
</items>
</column>
</items>
</basic>
This is especially useful when trying to load client libraries during page creation.
Reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/includeclientlibs/index.html
Reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/includeclientlibs/index.html
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>
Nested Check Box List
<expertise jcr:primaryType="nt:unstructured"
disconnected="{Boolean}true"
sling:resourceType="granite/ui/components/coral/foundation/form/nestedcheckboxlist">
<items jcr:primaryType="nt:unstructured">
<adobe jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="adobe"
value="{Boolean}true"
text="Adobe Experience Cloud">
<sublist jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/nestedcheckboxlist">
<items jcr:primaryType="nt:unstructured">
<aem jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="aem"
value="{Boolean}true"
text="Adobe Experience Manager"/>
<analytics jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="analytics"
value="{Boolean}true"
text="Adobe Analytics"/>
</items>
</sublist>
</adobe>
<aws jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="aws"
value="{Boolean}true"
text="Amazon Web Service"/>
</items>
</expertise>
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"/>
Page Field
<navigationRoot jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/coral/common/form/pagefield"
fieldDescription="The root page to build the navigation."
fieldLabel="Navigation Root"
rootPath="/content/aem-demo"
name="./navigationRoot"
multiple="{Boolean}true"
emptyText="Navigation Root"
required="{Boolean}true"/>
Password
<password jcr:primaryType="nt:unstructured"
name="./password"
fieldLabel="Password"
emptyText="Enter your Password"
required="{Boolean}true"
retype="./confirmPassword"
sling:resourceType="granite/ui/components/coral/foundation/form/password"/>
<confirmPassword jcr:primaryType="nt:unstructured"
name="./confirmPassword"
fieldLabel="Confirm Password"
emptyText="Confirm your Password"
required="{Boolean}true"
sling:resourceType="granite/ui/components/coral/foundation/form/password"/>
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"/>
Radio Group
<gender jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
fieldDescription="Select either Male or Female"
fieldLabel="Gender"
vertical="{Boolean}false"
name="./gender">
<items jcr:primaryType="nt:unstructured">
<male jcr:primaryType="nt:unstructured"
checked="{Boolean}true"
text="Male"
value="male"/>
<female jcr:primaryType="nt:unstructured"
text="Female"
value="female"/>
</items>
</gender>
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"/>
Tabs
<tabs jcr:primaryType="nt:unstructured"
orientation="horizontal"
size="M"
margin="{Boolean}true"
maximized="{Boolean}true"
sling:resourceType="granite/ui/components/coral/foundation/tabs">
<items jcr:primaryType="nt:unstructured">
<settings jcr:primaryType="nt:unstructured"
jcr:title="Settings"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<removeBottomSpacing jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
text="Remove Bottom Spacing?"
name="./removeBottomSpacing"
value="mb-0"/>
</items>
<parentConfig jcr:primaryType="nt:unstructured"
icon="gear"/> <!-- Coral Icon -->
</settings>
<accessibility jcr:primaryType="nt:unstructured"
jcr:title="Accessibility"
sling:resourceType="granite/ui/components/coral/foundation/container">
<parentConfig jcr:primaryType="nt:unstructured"
active="{Boolean}true"/>
</accessibility>
</items>
</tabs>
Tag Field
<articleTopics jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/coral/common/form/tagfield"
fieldLabel="Article Topics"
multiple="{Boolean}true"
name="./articleTopics"
emptyText="Article Topics"
forceSelection="{Boolean}true"
required="{Boolean}true"
rootPath="/content/cq:tags/aem-demo/article/topics"/>
Text Area
<description jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
fieldLabel="Description"
fieldDescription="Short details about the article"
required="{Boolean}true"
emptyText="Enter details about the article"
name="./description"
rows="4"
maxlength="{Long}250"/>
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"/>
Well
<well jcr:primaryType="nt:unstructured"
margin="{Boolean}true"
sling:resourceType="granite/ui/components/coral/foundation/well">
<items jcr:primaryType="nt:unstructured">
<parentPage jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/coral/common/form/pagefield"
fieldDescription="Select Blogs Parent Page"
fieldLabel="Parent Page"
name="./parentPage"
rootPath="/content/aem-demo"/>
</items>
</well>
XF Field
<fragmentVariationPath jcr:primaryType="nt:unstructured"
sling:resourceType="cq/experience-fragments/editor/components/xffield"
name="./fragmentVariationPath"
fieldLabel="Variation"
filter="folderOrVariant"
propertyFilter="cq:xfShowInEditor"
variant="web"
emptyText="Enter or select Experience Fragment"
forceSelection="{Boolean}true"
required="{Boolean}true"
multiple="{Boolean}false"
fieldDescription="Choose the experience fragment variation to display."
rootPath="/content/experience-fragments/aem-demo"/>