AEM Component Dialog CheatSheet

PublishedFebruary 13, 2024

ModifiedFebruary 28, 2024

Viewed1,232 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>

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

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

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

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>

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

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>

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

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>

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

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

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

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>

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

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

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

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>

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

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

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

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>

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

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>

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

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

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

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>

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

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