AEM Component Dialog CheatSheet

Published
Modified
Viewed381 times
Granite UI provides a large range of the basic components needed to create component dialog on the authoring environment. These components are constructed using Coral UI-based elements.
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 --> <?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="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>
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"/>
AEM Component Dialog (Pathfield)
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"/>
Write your Comment