AEM: Dialog field example: structure of a dialog, checkbox, datepicker, fileupload, multifield, numberfield, pathbrowser, pathfield, radiogroup, richtext, select, textarea, textfield

README.md

Adobe Experience Manager (AEM) - Coral 3 – Granite UI components

Dialog Fields Samples Index

• Initial Structure of a Dialog
• Checkbox
• Datepicker
• Fileupload
• Multifield
• Numberfield
• Pathbrowser
• Pathfield
• Radiogroup
• Ricktext
• Select
• Textarea
• Textfield

---

References:

• Documentation
• Blog Techrevel
• Examples Kevin Weber

build-of-structure-of-a-dialog-with-tab-and-field-of-text.xml

<?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 -->
				  <tab1 
				      jcr:primaryType="nt:unstructured"
				      jcr:title="Propriedades"
				      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">

						    <!-- Examples of Dialogs Field-->
						    <title
						      jcr:primaryType="nt:unstructured"
						      sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
						      fieldDescription="Digite um título"
						      fieldLabel="Título"
						      name="./title"
						      required="true"/>
					      </items>
					    </column>
					  </items>
					</columns>
				      </items>
				    </tab1>
				</items>
			</tabs>
		</items>
	</content>
</jcr:root>

build-of-structure-of-a-dialog-with-tab.xml

<?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">

					<!-- Sample Dialog Tab -->
					  <tab1 
					      jcr:primaryType="nt:unstructured"
					      jcr:title="Propriedades"
					      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="Propriedades"
					      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>

build-of-structure-of-a-dialog.xml

<?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>

checkbox-coral.xml

<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"
  uncheckedValue="false"
  value="true"/>

datepicker-coral.xml

<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"/>

fileupload-coral.xml

<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"/>

multifield-coral.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
      granite:class="cmp-teaser__editor-action"
      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>


<!--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>

multifield.xml

<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>

numberfield-coral.xml

<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" />

pathbrowser-coral.xml

<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"/>

pathfield-coral.xml

<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"/>

radiogroup-coral.xml

<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>

richtext.xml

<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="&amp;copy;"
                      name="copyright"/>
                  <default_euro
                      jcr:primaryType="nt:unstructured"
                      entity="&amp;euro;"
                      name="euro"/>
                  <default_registered
                      jcr:primaryType="nt:unstructured"
                      entity="&amp;reg;"
                      name="registered"/>
                  <default_trademark
                      jcr:primaryType="nt:unstructured"
                      entity="&amp;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>

select-coral.xml

<type
  granite:class="pdfviewer-type-selector"
  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>

textarea-coral.xml

 <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"/>

textfield-coral.xml

<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"/>