AEM Component Dialog CheatSheet

PublishedFebruary 13, 2024

ModifiedFebruary 28, 2024

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.

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=""/>

Reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/checkbox/index.html

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"/>

Reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/datepicker/index.html

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>

Reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/fieldset/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>

Reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/multifield/index.html

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"/>

Reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/numberfield/index.html

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"/>

Reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/pathfield/index.html

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>

Reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/select/index.html

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"/>

Reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/switch/index.html

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"/>

Reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/textfield/index.html