AEM Granite UI Components: Advanced Dialog Fields Samples & Index (Part 2)

Introduction

In the previous blog, we explored the most commonly used Granite UI dialog fields such as Textfield, Multifield, Checkbox, Rich Text, Select, Radiogroup, and Numberfield. These form the backbone of most AEM component dialogs.

In this follow-up post, we’ll dive into additional and advanced Granite UI dialog fields that are frequently required in real-world AEM projects. These fields enable richer authoring experiences, better data validation, and more flexible component configurations.

This article serves as a continuation and extension of the earlier dialog field index, helping AEM developers design more complete and powerful Touch UI dialogs.

Advanced Granite UI Dialog Field Types with Samples & Explanation

Pathfield : The Pathfield allows authors to select a repository path, such as a page, asset, or content fragment. It is widely used for linking pages, selecting images, or referencing other content.

Use cases

• Page linking
• Asset selection
• Content references

<linkPath 
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
   fieldLabel="Link Path"
   fieldDescription="Select a page or asset path"
   name="./linkPath"
   nodeTypes="dam:Asset, nt:file, nt:folder, cq:Page,  sling:Folder, sling:OrderedFolder"
   rootPath="/content"
   required="{Boolean}true"/>

FileUpload: The FileUpload component enables authors to upload files (commonly images or documents) directly from the dialog.

Use cases

• Image components
• Document uploads
• Media assets

<image 
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/fileupload"
   fieldLabel="Image"
   name="./file"
   class="cq-droptarget"
   allowUpload="{Boolean}true"
   autoStart="{Boolean}false"
   multiple="{Boolean}false"
   uploadUrl="${suffix.path}"
   mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
   multiple="{Boolean}false"
   title="Upload Image Asset"
   uploadUrl="${suffix.path}"
   useHTML5="{Boolean}true"
   fileNameParameter="./fileName"
   fileReferenceParameter="./fileReference"/>

Datepicker: The Datepicker field allows authors to select a date or date-time value using a calendar UI.

Use cases

• Publish date
• Event date
• Expiry date

<publishDate
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
  fieldLabel="Publish Date"
  name="./publishDate"
  displayedFormat="YYYY-MM-DD"
  valueFormat="YYYY-MM-DD"
  typeHint="Date"
  type="date"/>

Switch: The Switch component is a modern alternative to a checkbox, offering a clearer on/off visual state.

Use cases

• Feature toggles
• Enable / disable options

<enableFeature 
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/switch"
  fieldLabel="Enable Feature"
  name="./enableFeature"
  value="true"uncheckedValue="false"/>

Hidden Field : The Hidden field stores values without displaying them to authors. It’s useful for internal configuration or metadata.

Use cases

• Component versioning
• Internal flags

<componentType
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
  name="./componentType"
  value="promo-banner"/>

Heading : The Heading component is not an input field but helps visually organize dialogs and improve authoring clarity.

<sectionTitle
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/heading"
  level="3"
  text="Display Settings"/>

Fieldset : A Fieldset groups related fields together, improving dialog readability and structure.

<displaySettings
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
  jcr:title="Display Settings"> 
 <items 
  jcr:primaryType="nt:unstructured">
    <showTitlejcr:primaryType="nt:unstructured"
     sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
     name="./showTitle"
     text="Show Title"/>
 </items>
</displaySettings>

Tabs : Tabs are used to split large dialogs into logical sections, greatly enhancing the authoring experience.

<tabs jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/tabs">
    <items 
        jcr:primaryType="nt:unstructured"> 
         <general
           jcr:primaryType="nt:unstructured"
           jcr:title="General"
           sling:resourceType="granite/ui/components/coral/foundation/container"/>
        <advanced
           jcr:primaryType="nt:unstructured"
           jcr:title="Advanced"
           sling:resourceType="granite/ui/components/coral/foundation/container"/>
   </items>
</tabs>

Include : The Include component allows reuse of dialog fragments across multiple components.

Best practice

• Centralize commonly used fields
• Improve maintainability

<commonFields 
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/include"
   path="/apps/myproject/components/common/dialog/common-fields"/>

Tagsfield : The Tagsfield enables authors to select one or more AEM tags.

Use cases

• Content categorization
• Search and filtering

<tags
 jcr:primaryType="nt:unstructured"
 sling:resourceType="cq/gui/components/coral/common/form/tagfield"
 fieldLabel="Tags"
 name="./cq:tags"
 multiple="{Boolean}true"/>

Colorfield : The Colorfield allows authors to pick a color value, commonly used for styling components.

<backgroundColor
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
  fieldLabel="Background Color"
  name="./backgroundColor"/>

Slider : The Slider component lets authors select numeric values visually within a defined range.

<opacity
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/slider"
  fieldLabel="Opacity"
  name="./opacity"
  min="0"
  max="100"
  step="5"
  value="100"/>

Tips & Best Practices (Advanced)

• Prefer Pathfield over Textfield for repository paths
• Use Tabs and Fieldsets for complex dialogs
• Centralize reusable dialog fragments with Include
• Avoid overloading dialogs with unnecessary fields
• Keep author experience simple and intuitive

Conclusion

With this second part, we’ve covered the remaining and advanced Granite UI dialog fields that complete the dialog development toolkit for AEM developers. When combined with the foundational fields discussed in the first blog, these components allow you to build fully-featured, scalable, and author-friendly dialogs.

Mastering Granite UI dialogs not only improves component flexibility but also significantly enhances the content authoring experience — one of AEM’s greatest strengths.

Resources & References

[embed]Welcome to Granite UI’s documentation! — Granite UI 1.0 documentation Edit descriptiondeveloper.adobe.com

[embed]Dialog Editor | Adobe Experience Manager The dialog editor provides a graphical interface for easily creating and editing dialog boxes and scaffolds.experienceleague.adobe.com

[embed]Adobe Experience Manager Components — The Basics | Adobe Experience Manager When you start to develop new components, you need to understand the basics of their structure and configuration.experienceleague.adobe.com

[embed]Creating a New Granite UI Field Component | Adobe Experience Manager Granite UI provides a range of components designed to be used in forms, called fieldsexperienceleague.adobe.com

[embed]AEM Development — Guidelines and Best Practices | Adobe Experience Manager Guidelines and best practices for developing on AEMexperienceleague.adobe.com