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 

Add a custom action/option in AEM Assets

AEM Assets browser or asset editor have too many options to quickly perform the action like publish, edit, properties, download and many more. Today in this blog we will explore and implement how we could customoze this ribbon add a similar action in asset editor.

All these action items are coming from the libs path  /libs/dam/gui/content/assets, if a developer wants to add a custom action then developer have to create the same overlay assets directory so sling merger will read the custom action and load with the other options in Assets editor.  

Libs directory

Apps directory

Under the assets >> jcr:content >> actions >> selection add a node of type nt:unstructure, as shown here in below image.

Here we have added the action Translation as option, and this is how it will appear in the AEM Assets browser.

References:

AEM adding a button to a touchui toolbar