Sample XML file bits to use as a starting point for building component dialogs.

AEM Dialog field examples

Examples below

buttongroup.xml

<alignment jcr:primaryType="nt:unstructured"
    name="./alignChildren"
    fieldLabel="Alignment of components"
    required="{Boolean}true"
    selectionMode="single"
    sling:resourceType="granite/ui/components/coral/foundation/form/buttongroup">

    <items jcr:primaryType="nt:unstructured">
        <default jcr:primaryType="nt:unstructured"
            name="./default"
            text="Default"
            value="false"
            cq-msm-lockable="default"/>
        <left jcr:primaryType="nt:unstructured"
            name="./left"
            text="Left"
            value="left"
            cq-msm-lockable="left"/>
        <center jcr:primaryType="nt:unstructured"
            name="./center"
            text="Center"
            value="center"
            cq-msm-lockable="center"/>
        <right jcr:primaryType="nt:unstructured"
            name="./right"
            text="Right"
            value="right"
            cq-msm-lockable="right"/>
    </items>
</alignment>

checkbox.xml

<hideMismatches
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
        text="Hide Mismatches"
        fieldDescription="Check this box to hide dropdown options if they don't match with the user's input"
        name="./hideMismatches"
        value="{Boolean}true"
        uncheckedValue="{Boolean}false"/>

colorfield.xml

<backgroundColor jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
    showDefaultColors="{Boolean}false"
    text="Background Color"
    fieldLabel="Background Color"
    name="./backgroundColor"
    showProperties="{Boolean}false">
  <items jcr:primaryType="nt:unstructured">
    <white jcr:primaryType="nt:unstructured" value="#FFFFFF"/>
    <black jcr:primaryType="nt:unstructured" value="#000000"/>
    <hugo-blue jcr:primaryType="nt:unstructured" value="#D8F1FF"/>
    <hugo-brown jcr:primaryType="nt:unstructured" value="#451A0C"/>
    <hugo-cream jcr:primaryType="nt:unstructured" value="#F6F6EC"/>
    <hugo-green jcr:primaryType="nt:unstructured" value="#AECDC7"/>
    <hugo-gray jcr:primaryType="nt:unstructured" value="#3C3C3C"/>
  </items>
</backgroundColor>

fileupload.xml

<fileupload
    jcr:primaryType="nt:unstructured"
    jcr:title="Files"
    sling:resourceType="granite/ui/components/foundation/form/fieldset">
    <items jcr:primaryType="nt:unstructured">
    <file
        jcr:primaryType="nt:unstructured" 
        sling:resourceType="granite/ui/components/coral/foundation/form/fileupload"
        autoStart="{Boolean}true"
        cq-msm-lockable="/file"
        fieldLabel="Upload files"
        mimeTypes="[image/png,image/jpeg,application/pdf]"
        multiple="{Boolean}false"
        name="./file"
        sizeLimit="100000000"
        text="Upload file"
        uploadUrl="/content/dam/someurl"
        uploadUrlBuilder=""/>
    </items>
</fileupload>

multifield.xml

<!-- 
Usage:
<sly data-sly-list="${resource.children}">
    <sly data-sly-list="${item.children}">
        ${item.linkText}
        ${item.linkUrl}
    </sly>
</sly>
-->

<!-- 
How to define min/max item limit: http://experience-aem.blogspot.com/2018/01/aem-6310-touch-ui-add-min-max-limit-to-coral-3-multifield.html
-->

<nav
    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
    fieldDescription="Click '+' to add a new link"
    fieldLabel="Links"
    jcr:primaryType="nt:unstructured"
    composite="{Boolean}true">
    <field sling:resourceType="granite/ui/components/coral/foundation/container"
            jcr:primaryType="nt:unstructured" name="./items">
        <items jcr:primaryType="nt:unstructured">
            <linkText
                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                fieldLabel="Link Text"
                jcr:primaryType="nt:unstructured"
                name="./linkText" />
            <linkurl
                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                fieldLabel="Link Url"
                jcr:primaryType="nt:unstructured"
                name="./linkUrl" />
        </items>
    </field>
</nav>

numberfield.xml

<columnWidth
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
    fieldLabel="Field width in grid"
    defaultValue="4"
    min="1"
    max="12"
    step="1"
    name="./columnWidth"/>

pathbrowser.xml

<buttonPath
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
    rootPath="/content/"
    emptyText="Path to target page"
    fieldLabel="Button Link"
    name="./buttonPath"/>

richtext.xml

<someRichText
			 jcr:primaryType="nt:unstructured"
			 sling:resourceType="cq/gui/components/authoring/dialog/richtext"
			 fieldLabel="A block of rich text"
			 name="./someRichText"
			 useFixedInlineToolbar="{Boolean}true">
			 <rtePlugins jcr:primaryType="nt:unstructured">
					 <format
							 jcr:primaryType="nt:unstructured"
							 features="*"/>
					 <subsuperscript
									 jcr:primaryType="nt:unstructured"
									 features="*"/>
					 <justify
							 jcr:primaryType="nt:unstructured"
							 features="*"/>
					 <lists
							 jcr:primaryType="nt:unstructured"
							 features="*"/>
					 <paraformat
							 jcr:primaryType="nt:unstructured"
							 features="*"/>
					 <links
							 jcr:primaryType="nt:unstructured"
							 features="*"/>
					 <table
							 jcr:primaryType="nt:unstructured"
							 features="[\0]">
							 <hiddenHeaderConfig
									 jcr:primaryType="nt:unstructured"
									 hiddenHeaderClassName="cq-wcm-foundation-aria-visuallyhidden"
									 hiddenHeaderEditingCSS="coral-RichText-hiddenHeader--editing"/>
					 </table>
			 </rtePlugins>
			 <uiSettings jcr:primaryType="nt:unstructured">
					 <cui jcr:primaryType="nt:unstructured">
							 <inline
									 jcr:primaryType="nt:unstructured"
									 toolbar="[format#bold,format#italic,format#underline,#paraformat,image#imageProps,#justify,#lists,links#modifylink,links#unlink,subsuperscript#subscript,subsuperscript#superscript]">
									 <popovers jcr:primaryType="nt:unstructured">
											 <format
															 jcr:primaryType="nt:unstructured"
															 items="[format#bold,format#italic,format#underline,subsuperscript#subscript,subsuperscript#superscript]"
															 ref="format"/>
											 <justify
													 jcr:primaryType="nt:unstructured"
													 items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
													 ref="justify"/>
											 <lists
													 jcr:primaryType="nt:unstructured"
													 items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
													 ref="lists"/>
											 <paraformat
													 jcr:primaryType="nt:unstructured"
													 items="paraformat:getFormats:paraformat-pulldown"
													 ref="paraformat"/>
									 </popovers>
							 </inline>
					 </cui>
			 </uiSettings>
</someRichText>

select.xml

<linkColor
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/select"
    fieldLabel="Link Color"
    name="./linkColor">
  <items jcr:primaryType="nt:unstructured">
    <primary jcr:primaryType="nt:unstructured"
      text="Primary"
      value="primary"/>
    <secondary jcr:primaryType="nt:unstructured"
      text="Secondary"
      value="secondary"/>
  </items>
</linkColor>

tagpicker.xml

<myTagPicker
  jcr:primaryType="nt:unstructured"
  sling:resourceType="cq/gui/components/coral/common/form/tagfield"
  allowBulkEdit="{Boolean}true"
  fieldLabel="Pick some Tags"
  name="./myTagPicker"
  renderReadOnly="{Boolean}false"/>

text.xml

<inputgroup
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/text"
    text="Enable user sharing for"/>

textarea.xml

<html
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
    fieldLabel="HTML"
    name="./html"
    required="true"/>

textfield.xml

<carModel
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="Model"
    value="carModel"
    name="./carModel"/>