- Initial Structure of a Dialog
- Checkbox
- Commons Field
- Datepicker
- Fileupload
- Multifield
- Numberfield
- Pathbrowser
- Pathfield
- Radiogroup
- Ricktext
- Select
- Textarea
- Textfield
Last active
February 24, 2025 12:54
-
-
Save salomao-santos/0cd0240b9824b52a5fdf777ab712cfe2 to your computer and use it in GitHub Desktop.
AEM Component: Dialog field example: structure of a dialog, checkbox, datepicker, fileupload, multifield, numberfield, pathbrowser, pathfield, radiogroup, richtext, select, textarea, textfield
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" | |
| jcr:primaryType="nt:unstructured" | |
| jcr:title="Properties" | |
| sling:resourceType="cq/gui/components/authoring/dialog"> | |
| <content | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/container"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <tabs | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/tabs"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <tab1 | |
| jcr:primaryType="nt:unstructured" | |
| jcr:title="Tab 1" | |
| sling:resourceType="granite/ui/components/coral/foundation/container" | |
| margin="{Boolean}true"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <columns | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" | |
| margin="{Boolean}true"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <column | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/container"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <!-- Add Fields to The Dialog--> | |
| <!-- Examples of Dialogs Fields--> | |
| <!-- https://gist.github.com/salomao-santos/0cd0240b9824b52a5fdf777ab712cfe2 --> | |
| </items> | |
| </column> | |
| </items> | |
| </columns> | |
| </items> | |
| </tab1> | |
| </items> | |
| </tabs> | |
| </items> | |
| </content> | |
| </jcr:root> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" | |
| jcr:primaryType="nt:unstructured" | |
| jcr:title="Properties" | |
| sling:resourceType="cq/gui/components/authoring/dialog"> | |
| <content | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/container"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <tabs | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/tabs"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <tab1 | |
| jcr:primaryType="nt:unstructured" | |
| jcr:title="Tab 1" | |
| sling:resourceType="granite/ui/components/coral/foundation/container" | |
| margin="{Boolean}true"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <columns | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" | |
| margin="{Boolean}true"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <column | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/container"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <!-- Add Fields to The Dialog--> | |
| <!-- Examples of Dialogs Fields--> | |
| <!-- https://gist.github.com/salomao-santos/0cd0240b9824b52a5fdf777ab712cfe2 --> | |
| </items> | |
| </column> | |
| </items> | |
| </columns> | |
| </items> | |
| </tab1> | |
| <tab2 | |
| jcr:primaryType="nt:unstructured" | |
| jcr:title="Tab 2" | |
| sling:resourceType="granite/ui/components/coral/foundation/container" | |
| margin="{Boolean}true"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <columns | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" | |
| margin="{Boolean}true"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <column | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/container"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <!-- Add Fields to The Dialog--> | |
| <!-- Examples of Dialogs Fields--> | |
| <!-- https://gist.github.com/salomao-santos/0cd0240b9824b52a5fdf777ab712cfe2 --> | |
| </items> | |
| </column> | |
| </items> | |
| </columns> | |
| </items> | |
| </tab2> | |
| </items> | |
| </tabs> | |
| </items> | |
| </content> | |
| </jcr:root> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <jcr:root | |
| xmlns:sling="http://sling.apache.org/jcr/sling/1.0" | |
| xmlns:granite="http://www.adobe.com/jcr/granite/1.0" | |
| xmlns:cq="http://www.day.com/jcr/cq/1.0" | |
| xmlns:jcr="http://www.jcp.org/jcr/1.0" | |
| xmlns:nt="http://www.jcp.org/jcr/nt/1.0" | |
| jcr:primaryType="nt:unstructured" | |
| jcr:title="Sample Component" | |
| sling:resourceType="cq/gui/components/authoring/dialog"> | |
| <content jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/container"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <tabs jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/tabs" | |
| maximized="{Boolean}false"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <!-- add dialog tab --> | |
| </items> | |
| </tabs> | |
| </items> | |
| </content> | |
| </jcr:root> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <showDescription | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" | |
| fieldDescription="Show descriptions of the link item" | |
| name="./showDescription" | |
| text="Show description" | |
| checked="{Boolean}true" | |
| uncheckedValue="{Boolean}false" | |
| value="{Boolean}true"/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| test |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <datepicker | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/datepicker" | |
| displayedFormat="MM-DD-YYYY HH:mm" | |
| fieldLabel="datepicker" | |
| name="./datepicker" | |
| type="datetime" | |
| typeHint="Date"/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <file | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="cq/gui/components/authoring/dialog/fileupload" | |
| allowUpload="{Boolean}false" | |
| autoStart="{Boolean}false" | |
| class="cq-droptarget" | |
| fieldLabel="Image Asset" | |
| fileNameParameter="./fileName" | |
| fileReferenceParameter="./fileReference" | |
| mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]" | |
| multiple="{Boolean}false" | |
| name="./file" | |
| title="Upload Image Asset" | |
| uploadUrl="${suffix.path}" | |
| useHTML5="{Boolean}true"/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--_cq_dialog.content.xml--> | |
| <states | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/multifield" | |
| fieldDescription="Click '+' to add a new state" | |
| composite="{Boolean}true"> | |
| <field | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/container" | |
| name="./states"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <name | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/textfield" | |
| fieldLabel="Name" | |
| fieldDescription="Enter the state name" | |
| emptyText="Name" | |
| name="./jcr:name" | |
| required="{Boolean}true"/> | |
| <flag jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/pathfield" | |
| fieldLabel="Flag" | |
| fieldDescription="Select the state flag image" | |
| forceSelection="{Boolean}true" | |
| name="./flag" | |
| rootPath="/content/dam/sample-site" /> | |
| </items> | |
| </field> | |
| </states> | |
| <!--_cq_dialog.content.xml--> | |
| <!--_cq_template.content.xml--> | |
| <!-- https://gist.github.com/salomao-santos/1adfd2fcdb7aa0719312eb2508504624#file-component-_cq_template-content-xml --> | |
| <!--HTL and HTML--> | |
| <div data-sly-list.stateMultifield="${resource.getChildren}"> | |
| <div data-sly-test="${stateMultifield.name == 'states'}"> | |
| <p>States</p> | |
| <ul data-sly-list.state="${stateMultifield.getChildren}"> | |
| <li data-sly-test.name="${state.jcr:name}">State: ${name} </li> | |
| <li data-sly-test.flag="${state.flag}"> | |
| Flag: | |
| <img src="${flag}" alt="${name}"/> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <cities | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/multifield" | |
| fieldDescription="Click 'Add field' to add new city." | |
| fieldLabel="Cities"> | |
| <field | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/foundation/form/textfield" | |
| required="true" | |
| name="./cities"/> | |
| </cities> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <structureDepth | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/numberfield" | |
| fieldDescription="Depth of the navigation structure relative to the navigation root." | |
| fieldLabel="Navigation Structure Depth" | |
| defaultValue="50" | |
| max="100" | |
| min="1" | |
| name="./structureDepth" | |
| step="2" /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <fromList | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser" | |
| fieldDescription="Path of the image." | |
| fieldLabel="Path" | |
| name="./pathImage" | |
| required="{Boolean}true" | |
| rootPath="/content/dam"/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <linkURL | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/pathfield" | |
| fieldDescription="Make the image a link to another resource." | |
| fieldLabel="Link" | |
| nodeTypes="dam:Asset, nt:file, nt:folder, cq:Page, sling:Folder, sling:OrderedFolder" | |
| name="./linkURL" | |
| required="{Boolean}true" | |
| rootPath="/content/dam"/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <size | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup" | |
| name="./size" | |
| vertical="{Boolean}true"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <small | |
| jcr:primaryType="nt:unstructured" | |
| checked="{Boolean}true" | |
| text="Small" | |
| value="small"/> | |
| <medium | |
| jcr:primaryType="nt:unstructured" | |
| text="Medium" | |
| value="medium"/> | |
| <large | |
| jcr:primaryType="nt:unstructured" | |
| text="Large" | |
| value="large"/> | |
| </items> | |
| </size> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <description | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="cq/gui/components/authoring/dialog/richtext" | |
| fieldDescription="A description to display as the subheadline for the teaser." | |
| fieldLabel="Description" | |
| name="./jcr:description" | |
| useFixedInlineToolbar="{Boolean}true"> | |
| <rtePlugins jcr:primaryType="nt:unstructured"> | |
| <format | |
| jcr:primaryType="nt:unstructured" | |
| features="bold,italic"/> | |
| <justify | |
| jcr:primaryType="nt:unstructured" | |
| features="-"/> | |
| <links | |
| jcr:primaryType="nt:unstructured" | |
| features="modifylink,unlink"/> | |
| <lists | |
| jcr:primaryType="nt:unstructured" | |
| features="*"/> | |
| <misctools jcr:primaryType="nt:unstructured"> | |
| <specialCharsConfig jcr:primaryType="nt:unstructured"> | |
| <chars jcr:primaryType="nt:unstructured"> | |
| <default_copyright | |
| jcr:primaryType="nt:unstructured" | |
| entity="&copy;" | |
| name="copyright"/> | |
| <default_euro | |
| jcr:primaryType="nt:unstructured" | |
| entity="&euro;" | |
| name="euro"/> | |
| <default_registered | |
| jcr:primaryType="nt:unstructured" | |
| entity="&reg;" | |
| name="registered"/> | |
| <default_trademark | |
| jcr:primaryType="nt:unstructured" | |
| entity="&trade;" | |
| name="trademark"/> | |
| </chars> | |
| </specialCharsConfig> | |
| </misctools> | |
| <paraformat | |
| jcr:primaryType="nt:unstructured" | |
| features="*"> | |
| <formats jcr:primaryType="nt:unstructured"> | |
| <default_p | |
| jcr:primaryType="nt:unstructured" | |
| description="Paragraph" | |
| tag="p"/> | |
| <default_h1 | |
| jcr:primaryType="nt:unstructured" | |
| description="Heading 1" | |
| tag="h1"/> | |
| <default_h2 | |
| jcr:primaryType="nt:unstructured" | |
| description="Heading 2" | |
| tag="h2"/> | |
| <default_h3 | |
| jcr:primaryType="nt:unstructured" | |
| description="Heading 3" | |
| tag="h3"/> | |
| <default_h4 | |
| jcr:primaryType="nt:unstructured" | |
| description="Heading 4" | |
| tag="h4"/> | |
| <default_h5 | |
| jcr:primaryType="nt:unstructured" | |
| description="Heading 5" | |
| tag="h5"/> | |
| <default_h6 | |
| jcr:primaryType="nt:unstructured" | |
| description="Heading 6" | |
| tag="h6"/> | |
| <default_blockquote | |
| jcr:primaryType="nt:unstructured" | |
| description="Quote" | |
| tag="blockquote"/> | |
| <default_pre | |
| jcr:primaryType="nt:unstructured" | |
| description="Preformatted" | |
| tag="pre"/> | |
| </formats> | |
| </paraformat> | |
| <table | |
| jcr:primaryType="nt:unstructured" | |
| features="-"> | |
| <hiddenHeaderConfig | |
| jcr:primaryType="nt:unstructured" | |
| hiddenHeaderClassName="cq-wcm-foundation-aria-visuallyhidden" | |
| hiddenHeaderEditingCSS="cq-RichText-hiddenHeader--editing"/> | |
| </table> | |
| <tracklinks | |
| jcr:primaryType="nt:unstructured" | |
| features="*"/> | |
| </rtePlugins> | |
| <uiSettings jcr:primaryType="nt:unstructured"> | |
| <cui jcr:primaryType="nt:unstructured"> | |
| <inline | |
| jcr:primaryType="nt:unstructured" | |
| toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]"> | |
| <popovers jcr:primaryType="nt:unstructured"> | |
| <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> | |
| <dialogFullScreen | |
| jcr:primaryType="nt:unstructured" | |
| toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]"> | |
| <popovers jcr:primaryType="nt:unstructured"> | |
| <paraformat | |
| jcr:primaryType="nt:unstructured" | |
| items="paraformat:getFormats:paraformat-pulldown" | |
| ref="paraformat"/> | |
| </popovers> | |
| </dialogFullScreen> | |
| <tableEditOptions | |
| jcr:primaryType="nt:unstructured" | |
| toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/> | |
| </cui> | |
| </uiSettings> | |
| </description> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <type | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/select" | |
| fieldLabel="Type" | |
| name="./type"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <fullWindow | |
| jcr:primaryType="nt:unstructured" | |
| text="Full Window" | |
| value="FULL_WINDOW"/> | |
| <sizedContainer | |
| jcr:primaryType="nt:unstructured" | |
| text="Sized Container" | |
| value="SIZED_CONTAINER"/> | |
| <inline | |
| jcr:primaryType="nt:unstructured" | |
| text="In-Line" | |
| value="IN_LINE"/> | |
| </items> | |
| </type> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <constraintMessage | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/textarea" | |
| fieldDescription="Message displayed as tooltip when submitting the form if the value does not validate the Type chosen" | |
| fieldLabel="Constraint Message" | |
| name="./constraintMessage"/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <name | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/textfield" | |
| fieldLabel="Name" | |
| fieldDescription="Enter the state name" | |
| emptyText="Name" | |
| name="./jcr:name" | |
| required="{Boolean}true"/> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment