Skip to main content

Touch UI Component Dialog Examples

The following chapters each present a coral xml snippet which can be copied into any /components/mycomponent/_cq_dialog/.content.xml file.

Documentation Overview

AEM Component Help Pages

  1. Open the CRXDE http://localhost:4502/crx/de/index.jsp console.
  2. Go to the component path. Example: /apps/<projectname>/components/some/text.
  3. Now create a new markdown file inside the component called README.md.
  4. Add any documentation content you need.
  5. Now go to http://localhost:4502/libs/wcm/core/content/sites/components.html and select Title Component from the list with a valid Component Group.
  6. Now copy the URL from the address bar. In my case the URL is /mnt/overlay/wcm/core/content/sites/components/details.html/apps/<projectname>/components/some/text.
  7. Go to the component within CRXDE Lite > cq:dialog and set the helpPath property to the value of the path copied above.
  • helpPath="/mnt/overlay/wcm/core/content/sites/components/details.html/apps/<projectname>/components/some/text"
  1. Now enable and add the component to the page, open the dialogue and click on the Help (?) icon.

Set Documentation as Default Active Tab

In order to show documentation as the default active tab when the author clicks on the Help (?) icon, We need to overlay an AEM’s node. Just follow these steps.

  1. Go to the CRXDE Lite console http://localhost:4502/crx/de/index.jsp
  2. Go to /libs/wcm/core/content/sites/components/details/jcr:content/content/single/content/items/content/items/tabs/items/documentation.
  3. Right click on the documentation node and select the Overlay Node option.
  • Path: /libs/wcm/core/content/sites/components/details/jcr:content/content/single/content/items/content/items/tabs/items/documentation
  • Overlay Location: /apps/
  • Match node types: checked
  1. Now go to the overlay path inside the /apps folder /apps/wcm/core/content/sites/components/details/jcr:content/content/single/content/items/content/items/tabs/items/documentation. Click on the documentation node and set the following property sling:orderBefore (String) : fixedColumnContainer

ui.apps/src/main/content/jcr_root/apps/wcm/core/content/sites/components/details/.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
jcr:primaryType="cq:Page">
<jcr:content
jcr:primaryType="nt:unstructured">
<content
jcr:primaryType="nt:unstructured">
<single jcr:primaryType="nt:unstructured">
<content
jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<content
jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<documentation
jcr:primaryType="nt:unstructured"
sling:orderBefore="fixedColumnContainer"/>
</items>
</tabs>
</items>
</content>
</items>
</content>
</single>
</content>
</jcr:content>
</jcr:root>

Source

Empty Dialog / Starting Point

This is an empty dialog structure and components can be placed in tabs (you can add n tabs.)

/components/mycomponent/_cq_dialog/.content.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="MyTestComponent"
sling:resourceType="cq/gui/components/authoring/dialog"
helpPath="https://url-to-your-documentation.com">
<content
granite:class="cmp-mytestcmp__editor"
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}true">
<items jcr:primaryType="nt:unstructured">
<properties
jcr:primaryType="nt:unstructured"
jcr:title="Properties"
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">
<!-- Place your components / dialog fields here -->
</items>
</column>
</items>
</columns>
</items>
</properties>
<layout
jcr:primaryType="nt:unstructured"
jcr:title="Layout
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">
<!-- Place your components / dialog fields here -->
</items>
</column>
</items>
</columns>
</items>
</layout>
</items>
</tabs>
</items>
</content>
</jcr:root>

You can write a class or id to your dialog fragment by adding granite:class="some-css-class" or granite:id="some-id". Add required="{Boolean}true" to any component field to mark it as required.

Simple Data Fields

Textfield

Documentation

<textfield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="The button label"
fieldLabel="Button Label"
name="./label"/>

Textarea

Documentation

<textarea
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
fieldLabel="This is a text area"
emptyText="Please add your descriptive text"
name="./textareacontent"/>

Numberfield

Documentation

You can define the min, max value and the increments, in which the input can be set.

<numberfield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldLabel="Choose a number value"
name="./numbervalue"
min="{Long}1"
max="{Long}10"
step="{Double}1"/>

Pathfield

Documentation

<pathfield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Select path"
rootpath="/content"
name="./path"/>

Pathbrowser

In some cases you might want to use the older coral2 pathbrowser component https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/when-to-choice-pathbrowser-as-well-as-pathfield/m-p/312540/highlight/true#M32451.

<pathbrowser
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
fieldLabel="Select asset"
rootpath="/content/dam"
name="./assetpath"/>

Asset Upload

<file
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
class="cq-droptarget"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
name="./file"/>

Checkbox

Documentation

<checkbox
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
checked="true"
name="./altValueFromPageImage"
text="Inherit alternative text from page"
uncheckedValue="false"
value="{Boolean}true"/>

Switch

Documentation

<switch
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/switch"
checked="true"
name="./switchValue"
fieldLabel="Toggle Me"
uncheckedValue="false"
value="{Boolean}true"/>

Datepicker

Documentation

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

Userpicker

Documentation

<userpicker
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/userpicker"
fieldLabel="User Picker"
hideServiceUsers="{Boolean}true"
impersonatesOnly="{Boolean}false"
name="./user"/>

Authorizable Autocomplete

Documentation

<authautocomplete
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/authorizable/autocomplete"
fieldLabel="User Picker"
name="./user"/>

Complex Data Fields

Select Dropdown

Documentation

<select
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="List Item"
name="./selectItem">
<items jcr:primaryType="nt:unstructured">
<children
jcr:primaryType="nt:unstructured"
text="Child pages"
value="children"/>
<static
jcr:primaryType="nt:unstructured"
text="Fixed list"
value="static"/>
<search
jcr:primaryType="nt:unstructured"
text="Search"
value="search"/>
<tags
jcr:primaryType="nt:unstructured"
text="Tags"
value="tags"/>
</items>
</select>

Opend

Closed

Radio Select

Documentation

<radio
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
name="./radioselection"
vertical="{Boolean}true"
fieldLabel="Radio Select">
<items jcr:primaryType="nt:unstructured">
<vara
jcr:primaryType="nt:unstructured"
text="Variation A"
value="var-a"/>
<varb
jcr:primaryType="nt:unstructured"
text="Variation B"
value="var-b"/>
</items>
</radio>

Multifield

A multifield wraps a predefined group of components and lets an author create n of these sets. The data will be saved to subnotes. Access that data via @ChildResource Annotation in your Sling Model, as described here.

Add composite="{Boolean}true" to save the entries as a child node which in return can easily be injected into a Sling Model via @ChildResource. Otherwise all values entered will be stored on the node itself as Array Properties.

<myMultifield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
required="{Boolean}true">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./values">
<items jcr:primaryType="nt:unstructured">
<textvalue
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text Value"
name="./textvalue"/>
<numbervalue
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldLabel="Number Value"
name="./numbervalue"/>
</items>
</field>
</myMultifield>

Accordion

Documentation

You can add a parentConfig block with active to set the accordion to be opened by default. Any dialog field can be added to each accordion item items block.

<accordion
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/accordion"
variant="default">
<items jcr:primaryType="nt:unstructured">
<block1
jcr:primaryType="nt:unstructured"
jcr:title="Some Category"
sling:resourceType="granite/ui/components/coral/foundation/container"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<textvalue1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text Value"
name="./textvalue"/>
<textvalue2
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text Value 2"
name="./textvalue2"/>
</items>
<parentConfig
jcr:primaryType="nt:unstructured"
active="{Boolean}true"/>
</block1>
<block2
jcr:primaryType="nt:unstructured"
jcr:title="Another Category"
sling:resourceType="granite/ui/components/coral/foundation/container"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<numbervalue
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldLabel="Number Value"
name="./numbervalue"/>
<numbervalue2
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldLabel="Number Value 2"
name="./numbervalue2"/>
</items>
</block2>
</items>
</accordion>

Layout & Read Only

Alert

Documentation

<alert
granite:class="cmp-editor-alert"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/alert"
size="S"
jcr:title="Some-Title"
text="Alert text"
variant="warning"/>

You could now leverage the css class cmp-editor-alert to set the alert box div to e.g width: 100%.

Documentation

<hyperlink
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/hyperlink"
target="_blank"
rel="noopener noreferrer"
text="Granite Hyperlink Documentation"
icon="link"
href="https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/hyperlink/index.html"/>

Check the Coral UI Icon List for available icons.

When adding these kinds of read only components, you will most likely need to add custom css via granite:class="someclass" to fix/update the layout. For example, set display:block, to move the next item to a new line.

Text

Documentation

You can add simple, readonly text to the dialog. This lets you add "notes" or declarative text.

<text
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/text"
text="Some help text :)"/>

Heading

Documentation

<heading
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/heading"
level="{Long}2"
text="Some Heading"/>

Well

Documentation

A Well groups items together visually, by adding a background color and a small margin.

<wellGroup jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/well">
<items jcr:primaryType="nt:unstructured">
<textvalue1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text Value"
name="./textvalue"/>
<somenumber
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldLabel="Number Value"
name="./numbervalue2"/>
</items>
</wellGroup>


Some examples from Aanchal Sikka

Full XML Example

The following .content.xml file is a complete cq:dialog file for a component dialog that displays all, commonly used, Granite ui fields.

<?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:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
xmlns:cq="http://www.day.com/jcr/cq/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Dialog Demo"
helpPath="/mnt/overlay/wcm/core/content/sites/components/details.html/apps/some-app/components/demo/v1/demo"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
granite:class="cmp-container__editor">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured"
sling:hideChildren="[*]">
<assetUpload
jcr:primaryType="nt:unstructured"
jcr:title="Asset Upload"
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">
<assetUpload
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image/gif,image/apng]"
multiple="{Boolean}false"
name="./file"
title="Upload Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
</items>
</column>
</items>
</columns>
</items>
</assetUpload>
<inputfields
jcr:primaryType="nt:unstructured"
jcr:title="Inputfields"
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">
<textfield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Textfield"
fieldDescription="This is a Textfield."
name="./textfield"/>
<password
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/password"
fieldLabel="Password"
fieldDescription="This is a Password."
name="./password"/>
<textarea
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
fieldLabel="Textarea"
emptyText="Some placeholder text"
fieldDescription="This is a Textarea."
name="./textarea"/>
<numberfield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldLabel="Numberfield"
fieldDescription="This is a Numberfield."
name="./numberfield"
min="{Long}1"
max="{Long}10"
step="{Double}1"/>
<pathfield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Pathfield"
fieldDescription="This is a Pathfield."
rootpath="/content"
name="./pathfield"/>
<datepicker
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
displayedFormat="MM-DD-YYYY HH:mm"
fieldLabel="Datepicker"
fieldDescription="This is a Datepicker."
name="./datepicker"
type="datetime"
typeHint="Date"/>
<colorpicker
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
fieldLabel="Colorpicker"
fieldDescription="This is a Colorpicker."
name="./colorpicker"/>
<userpicker
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/userpicker"
fieldLabel="Userpicker"
fieldDescription="This is a Userpicker."
hideServiceUsers="{Boolean}true"
impersonatesOnly="{Boolean}false"
name="./userpicker"/>
</items>
</column>
</items>
</columns>
</items>
</inputfields>
<staticinfo
jcr:primaryType="nt:unstructured"
jcr:title="Info Elements"
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">
<heading1 jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/heading"
level="1"
text="Heading Level 1"/>
<heading2 jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/heading"
level="2"
text="Heading Level 2"/>
<heading3 jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/heading"
level="3"
text="Heading Level 3"/>
<heading4 jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/heading"
level="4"
text="Heading Level 4"/>
<heading5 jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/heading"
level="5"
text="Heading Level 5"/>
<heading6 jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/heading"
level="6"
text="Heading Level 6"/>
<text jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/text"
text="Lorem ipsum odor amet, consectetuer adipiscing elit. Blandit natoque porta sapien et dictumst tortor."/>
<alertInfo
granite:class="cmp-form-textfield-readonlyselected-alert"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/alert"
size="S"
jcr:title="Info"
text="Lorem ipsum odor amet, consectetuer adipiscing elit. Blandit natoque porta sapien et dictumst tortor. "
variant="info"/>
<alertError
granite:class="cmp-form-textfield-readonlyselected-alert"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/alert"
size="S"
jcr:title="Error"
text="Lorem ipsum odor amet, consectetuer adipiscing elit. Blandit natoque porta sapien et dictumst tortor. "
variant="error"/>
<alertWarning
granite:class="cmp-form-textfield-readonlyselected-alert"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/alert"
size="S"
jcr:title="Warning"
text="Lorem ipsum odor amet, consectetuer adipiscing elit. Blandit natoque porta sapien et dictumst tortor. "
variant="warning"/>
<alertSuccess
granite:class="cmp-form-textfield-readonlyselected-alert"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/alert"
size="S"
jcr:title="Success"
text="Lorem ipsum odor amet, consectetuer adipiscing elit. Blandit natoque porta sapien et dictumst tortor. "
variant="success"/>
<hyperlink
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/hyperlink"
target="_blank"
rel="noopener noreferrer"
text="Granite Hyperlink Documentation"
icon="link"
href="https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/hyperlink/index.html"/>

</items>
</column>
</items>
</columns>
</items>
</staticinfo>
<buttons
jcr:primaryType="nt:unstructured"
jcr:title="Buttons"
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">
<anchorButton
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/anchorbutton"
href="https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.Icon.html#availableIcons"
text="Available Icons"
icon="adobe"
target="_blank"/>
<button
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/button"
text="Button"
icon="Search"/>
<cyclebutton
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/cyclebutton"
displayMode="text">
<items
jcr:primaryType="nt:unstructured">
<button1 jcr:primaryType="nt:unstructured" icon="search"
text="Button 1"/>
<button2 jcr:primaryType="nt:unstructured" icon="search"
text="Button 2"/>
<button3 jcr:primaryType="nt:unstructured" icon="search"
text="Button 3"/>
</items>
</cyclebutton>
<switch
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/switch"
checked="true"
name="./switchValue"
uncheckedValue="false"
value="{Boolean}true"/>
<buttonGroup jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/buttongroup"
fieldLabel="Button Group"
selectionMode="single"
name="./buttonGroup">
<items jcr:primaryType="nt:unstructured">
<left jcr:primaryType="nt:unstructured"
name="./left"
text="Left"
value="left"
cq-msm-lockable="left"/>
<center jcr:primaryType="nt:unstructured"
name="./center"
text="Center"
value="center"
cq-msm-lockable="center"/>
<right jcr:primaryType="nt:unstructured"
name="./right"
text="Right"
value="right"
cq-msm-lockable="right"/>
</items>
</buttonGroup>
</items>
</column>
</items>
</columns>
</items>
</buttons>
<complexFormFields
jcr:primaryType="nt:unstructured"
jcr:title="Complex Fields"
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">
<select
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Select Dropdown"
fieldDescription="This is a Select Dropdown."
name="./select">
<items jcr:primaryType="nt:unstructured">
<item1
jcr:primaryType="nt:unstructured"
text="Item 1"
value="item1"/>
<item2
jcr:primaryType="nt:unstructured"
text="Item 2"
value="item2"/>
<item3
jcr:primaryType="nt:unstructured"
text="Item 3"
value="item3"/>
</items>
</select>
<radio
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
name="./radioselection"
vertical="{Boolean}true"
fieldLabel="Radio Select"
fieldDescription="This is a Radio Select.">
<items jcr:primaryType="nt:unstructured">
<vara
jcr:primaryType="nt:unstructured"
text="Variation A"
value="var-a"/>
<varb
jcr:primaryType="nt:unstructured"
text="Variation B"
value="var-b"/>
</items>
</radio>
<myMultifield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
fieldLabel="Multifield"
fieldDescription="This is a Multifield."
composite="{Boolean}true">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./values">
<items jcr:primaryType="nt:unstructured">
<textvalue
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text Value"
fieldDescription="This is a Textfield."
name="./textvalue"/>
<numbervalue
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldLabel="Number Value"
fieldDescription="This is a Numberfield."
name="./numbervalue"/>
</items>
</field>
</myMultifield>
</items>
</column>
</items>
</columns>
</items>
</complexFormFields>
<layout
jcr:primaryType="nt:unstructured"
jcr:title="Layout Options"
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">
<wellText jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/text"
text="Well Group"/>
<wellGroup jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/well">
<items jcr:primaryType="nt:unstructured">
<textvalue1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text Value"
fieldDescription="This is a Textfield."
name="./textvalueWell"/>
<somenumber
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldLabel="Number Value"
fieldDescription="This is a Numberfield."
name="./numbervalue2Well"/>
</items>
</wellGroup>
<accordionText jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/text"
text="Accordion"/>
<accordion
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/accordion"
fieldLabel="Accordion"
variant="default">
<items jcr:primaryType="nt:unstructured">
<block1
jcr:primaryType="nt:unstructured"
jcr:title="Some Category"
sling:resourceType="granite/ui/components/coral/foundation/container"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<textvalue1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text Value"
fieldDescription="This is a Textfield."
name="./textvalueAccodion"/>
<textvalue2
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text Value 2"
fieldDescription="This is a Textfield."
name="./textvalue2Accordion"/>
</items>
<parentConfig
jcr:primaryType="nt:unstructured"
active="{Boolean}true"/>
</block1>
<block2
jcr:primaryType="nt:unstructured"
jcr:title="Another Category"
sling:resourceType="granite/ui/components/coral/foundation/container"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<numbervalue
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldLabel="Number Value"
fieldDescription="This is a Numberfield."
name="./numbervalue"/>
<numbervalue2
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldLabel="Number Value 2"
fieldDescription="This is a Numberfield."
name="./numbervalue2"/>
</items>
</block2>
</items>
</accordion>
</items>
</column>
</items>
</columns>
</items>
</layout>
</items>
</tabs>
</items>
</content>
</jcr:root>