AEM Granite UI 1.0 Form Component’s XML 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://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/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://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/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://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/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
70
71
72
// Multifield Empty Body
<multifieldParent
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
    fieldLabel="Multifield Config">
    <multifield
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container"
        name="./multifield">
        <items jcr:primaryType="nt:unstructured">
            <fieldset
                jcr:primaryType="nt:unstructured"
                jcr:title="Items"
                sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                <items jcr:primaryType="nt:unstructured">
                    ...
                </items>
            </fieldset>
        </items>
    </field>
</multifieldParent>

// Navigation Links
<navigationLinksMultifield
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
    fieldLabel="Navigation Links">
    <navLinks
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container"
        name="./navLinks">
        <items jcr:primaryType="nt:unstructured">
            <fieldset
                jcr:primaryType="nt:unstructured"
                jcr:title="Link Field Set Items"
                sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                <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>
            </fieldset>
        </items>
    </navLinks>
</navigationLinksParent>

sling:resourceType: granite/ui/components/coral/foundation/form/multifield
Documentation: 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/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://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/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://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/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://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/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
<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"/>

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

sling:resourceType: cq/gui/components/authoring/dialog/fileupload
Documentation: https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/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://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/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.

Was this Article Helpful?

Certified AEM Developer who has been working on AEM software developer for the past 5 years.

Leave a Reply

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

Back To Top