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

AEM Development Quick Reference Touch UI
briankasingli

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:

  1. Checkbox
  2. Text Field
  3. Text Area
  4. Path Field
  5. Multifield
  6. Select
  7. Radio Group
  8. Number Field
  9. File Upload
  10. Color Picker
  11. 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
<isChecked
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
   fieldLabel="isChecked?"
   name="./isChecked"
   text="isChecked flag"
   uncheckedValue="{Boolean}false"
   value="{Boolean}true"/>

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

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.
Hello, I am an enthusiastic Adobe Community Advisor and a seasoned Lead AEM Developer. I am currently serving as an AEM Technical Lead at MNPDigital.ca, bringing over a decade of extensive web engineering experience and more than eight years of practical AEM experience to the table. My goal is to give back to the AEM Full Stack Development community by sharing my wealth of knowledge with others. You can connect with me on LinkedIn.
Website https://www.linkedin.com/in/briankasingli

2 thoughts on “AEM Granite UI 1.0 Form Component’s XML Cheat Sheet Reference Guide”

Leave a Reply

Your email address will not be published. Required fields are marked *


Related Posts

Back To Top