AEM Granite UI 1.0 Form Component's XML Cheat Sheet Reference Guide

This AEM Granite UI 1.0 Form Component’s XML Reference Guide provides code snippets to help developers speed up their AEM Touch UI development. This quick reference includes the most used Granite UI form components with plug and plays XML examples.

Note:
If you want to understand how to convert Granite UI 1.0 Form Components from Adobe’s documentation to XML format, have a look at article. The article provides a step by step and easy to understand guide.

References:

Checkbox
Text Field
Text Area
Path Field
Multifield
Select
Radio Group
Number Field
File Upload
Color Picker
Creating a Basic AEM Touch UI Dialogue

1. Checkbox Granite UI 1.0, Touch UI XML Example:

1
2
3
4
5
6
7
8

sling:resourceType: granite/ui/components/coral/foundation/form/checkbox
Documetation: https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/checkbox/index.html

2. Text Field Granite UI 1.0, Touch UI XML Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<textfield-example
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="textfield-example"
name="./example"
value="{String}Default Text"
emptyText="Show placeholder text when input field is empty."
disabled="{Boolean}false"
required="{Boolean}true"
autocomplete="off"
autofocus="{Boolean}true"
validation=""
maxlength="{Long}100"/>

<textfield-example-brandSlogan
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Brand Slogan"
required="{Boolean}true"
name="./brandSlogan"/>

sling:resourceType: granite/ui/components/coral/foundation/form/textfield
Documentation: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/textfield/index.html

3. Text Area Granite UI 1.0, Touch UI XML Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<textarea-example-description
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
fieldLabel="Description"
name="./description"
value=""
emptyText="A hint to the user of what can be entered in the field."
disabled="{Boolean}false"
required="{Boolean}true"
autocomplete="off"
autofocus="{Boolean}false"
maxlength="{Long}160"
rows="100"
resize="both">

sling:resourceType: granite/ui/components/coral/foundation/form/textarea
Documentation: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/textarea/index.html

4. Path Field Granite UI 1.0, Touch UI XML Example:

1
2
3
4
5
6
7

<pathfield-example-logoPath
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Logo Path"
name="./logoPath"
required="true"
rootPath="/content/dam"/>

sling:resourceType: granite/ui/components/coral/foundation/form/pathfield
Documentation: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/pathfield/index.html

5. Multifield Granite UI 1.0, Touch UI XML Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

// Multifield Country Eexample
<countries
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Countries">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./countries">
<items jcr:primaryType="nt:unstructured">
<name
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
emptyText="Name"
name="./name"/>
<code
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
emptyText="Code"
name="./code"/>
</items>
</field>
</countries>

// Navigation Links Example
<navigationLinksMultifield
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Navigation Links">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./navLinks">
<items jcr:primaryType="nt:unstructured">
<linkLabel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Link Label"
name="./linkLabel"
required="true"/>
<linkPath
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Link Path"
name="./linkPath"
required="true"
rootPath="/content"/>
<linkTarget
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="CTA Link Target"
name="./linkTarget">
<items jcr:primaryType="nt:unstructured">
<self
jcr:primaryType="nt:unstructured"
selected="{Boolean}true"
text="Same Page"
value="_self"/>
<blank
jcr:primaryType="nt:unstructured"
text="New Tab"
value="_blank"/>
</items>
</linkTarget>
</items>
</field>
</navigationLinksMultifield>

sling:resourceType: granite/ui/components/coral/foundation/form/multifield
Documentation: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/multifield/index.html

6. Select Granite UI 1.0, Touch UI XML Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

sling:resourceType: granite/ui/components/coral/foundation/form/select
Documentation: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/select/index.html

7. Radio Group Granite UI 1.0, Touch UI XML Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<radiogroup-example-columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
deleteHint="{Boolean}true"
fieldLabel="Type"
name="./columns"
vertical="{Boolean}false">
<items jcr:primaryType="nt:unstructured">
<columns1
jcr:primaryType="nt:unstructured"
checked="{Boolean}true"
text="1 Column"
value="1"/>
<columns2
jcr:primaryType="nt:unstructured"
text="2 Columns"
value="2"/>
<columns3
jcr:primaryType="nt:unstructured"
text="3 Columns"
value="3"/>
</items>
</radiogroup-example-columns>

sling:resourceType: granite/ui/components/coral/foundation/form/radiogroup
Documentation: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/radiogroup/index.html

8. Number Field Granite UI 1.0, Touch UI XML Example:

1
2
3
4
5
6
7
8
9
10

<numberfield-example-ageRestriction
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldLabel="Age Restriction"
min="{Long}1"
max="{Double}200"
name="./ageRestriction"
disabled="{Boolean}false"
step="1"
value=""/>

sling:resourceType: granite/ui/components/coral/foundation/form/numberfield
Documentation: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/numberfield/index.html

9. File Upload Granite UI 1.0, Touch UI XML Example:

Note: How to disable the file upload, browser button, granite UI component’s upload feature will be to set the allowUpload property to false, indicated in the examples below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<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"/>
// in sightly <img src="${properties.fileReference}"/>

<fileupload-example-file
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
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"/>
// in sightly <img src="${properties.fileReference}"/>

// disable allow upload
<fileupload-example-downloadAsset
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldLabel="Download Asset"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image/*,video/*,audio/*,.pdf,.doc,.zip,.txt]"
multiple="{Boolean}false"
name="./downloadAsset"
title="Upload Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
// in sightly <img src="${properties.fileReference}"/>

sling:resourceType: cq/gui/components/authoring/dialog/fileupload
Documentation: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/fileupload/index.html

10. Color Picker Granite UI 1.0, Touch UI XML Example:

Note: the variant properties can be set for two different outcomes; “default” allows the authors to insert custom hex values, while the set value of “swatch” does not allow custom hex selection.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

//swatch example
<colorfield-swatch-example-brandColor
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
fieldLabel="Brand Color"
name="./brandColor"
emptyText="Please choose a color"
disabled="{Boolean}false"
required="{Boolean}true"
variant="swatch"
autogenerateColors="off"
showDefaultColors="{Boolean}false"
showProperties="{Boolean}false"
showSwatches="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<color1
jcr:primaryType="nt:unstructured"
value="#FF4136"/>
<color2
jcr:primaryType="nt:unstructured"
value="#0077D9"/>
</items>
</colorfield-swatch-example-brandColor>

//properties example (choosing colors from a color wheel
<colorfield-properties-example-brandColor
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
fieldLabel="Brand Color"
name="./brandColor"
emptyText="Please choose a color"
disabled="{Boolean}false"
required="{Boolean}true"
variant="default"
autogenerateColors="off"
showDefaultColors="{Boolean}false"
showProperties="{Boolean}true"
showSwatches="{Boolean}false"/>

sling:resourceType: granite/ui/components/coral/foundation/form/colorfield
Documentation: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/colorfield/index.html

Recommended Note:
If you want to understand how to convert Granite UI 1.0 Form Components from Adobe’s documentation to XML format, have a look at article. The article provides a step by step and easy to understand guide.

AEM Granite UI 1.0 Form Component’s XML Cheat Sheet Reference Guide