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 the article. The article provides a step by step and easy to understand guide.

References:
1. CheckboxGranite UI 1.0, Touch UI XML Example:
<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 FieldGranite UI 1.0, Touch UI XML Example:
<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:
<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:
<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:

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

<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

GroupGranite UI 1.0, Touch UI XML Example:

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

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

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