AEM authoring dialog fields types sample

Adobe Experience Manager(AEM) authoring dialog is the combination of different form fields, these fields are required to make the content editable so author can easily add or update the AEM component content. Below are the few frequently use dialog fileds that AEM provides.

1. Textfield:

<text

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

fieldDescription="The text to display on the button."

fieldLabel="Text"

name="./jcr:title"/>

2. Browse path:

<link

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/coral/common/form/pagefield"

fieldDescription="Link to a content page, external URL or page anchor."

fieldLabel="Link"

name="./link"/>

3. Select/option field:

<headingElement

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/select"

fieldDescription="The accordion item heading HTML element."

fieldLabel="Heading Element"

name="./headingElement"

ordered="{Boolean}true"

wrapperClass="foundation-toggleable">

<datasource

jcr:primaryType="nt:unstructured"

sling:resourceType="core/wcm/components/commons/datasources/allowedheadingelements/v1"/>

<granite:data

jcr:primaryType="nt:unstructured"

cmp-accordion-v1-dialog-edit-hook="headingElement"/>

</headingElement>

4. Hidden element:

<expandedHint

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/hidden"

name="./expandedHint"

value="String[]" />

5. File upload:

<file

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

allowUpload="${not empty cqDesign.allowUpload ? cqDesign.allowUpload : false}"

class="cq-droptarget"

fieldLabel="Download Asset"

fileNameParameter="./fileName"

fileReferenceParameter="./fileReference"

mimeTypes="[image/*,video/*,audio/*,.pdf,.doc,.zip,.txt]"

name="./file"

title="Upload Asset"/>

6. Content fragment 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"

pickerTitle="Select Content Fragment"

rootPath="/content/dam"/>

7. Radio Button Group:

<displayMode

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"

deleteHint="{Boolean}false"

fieldDescription="Single Text Element mode allows selection of one multiline text element and enables paragraph control options. Multiple Elements mode allows selection of one or more elements of the Content Fragment."

fieldLabel="Display Mode"

name="./displayMode"

vertical="{Boolean}false">

<items jcr:primaryType="nt:unstructured">

<singleText

jcr:primaryType="nt:unstructured"

text="Single Text Element"

value="singleText"/>

<multi

jcr:primaryType="nt:unstructured"

checked="{Boolean}true"

text="Multiple Elements"

value="multi"/>

</items>

</displayMode>

8. Checkbox element:

<paragraphHeadings

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"

text="Handle headings as paragraphs"

name="./paragraphHeadings"

value="true"/>

9. Color picker

<color

jcr:primaryType="nt:unstructured"

sling:resourceType="/libs/granite/ui/components/coral/foundation/form/colorfield"

fieldLabel="Select button color"

name="./color"/>

10. Tabs

<tabs

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/tabs"

maximized="{Boolean}true">

<items jcr:primaryType="nt:unstructured">

<!-- add items here -->

</items>

</tabs>

Note: Out of the box (OOTB) components/fields can be find under these directories.

• /libs/granite/ui/components/coral/foundation/form
• /libs/granite/ui/components/coral/foundation
• /libs/granite/ui/components/foundation
• /libs/cq/gui/components
• /libs/foundation/components