Coral 3 – Granite UI components – Adobe Experience Cloud Blog

There are few modifications to the way Granite UI components are configured for Coral 3 components. Example: radio, checkbox, multifield etc.

Sharing snippets for frequently used Granite UI components (verified on AEM 6.3):

Alert:

<readonlySelectedAlert
   granite:class="cmp-form-textfield-readonlyselected-alert"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/alert"
   size="S"
   text="Alert text"
   variant="warning"/>

Accordian:

<accordion
    granite:class="js-cq-IPEPlugin-container"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/accordion"
    variant="quiet">
    <items jcr:primaryType="nt:unstructured">
        <source
           jcr:primaryType="nt:unstructured"
           jcr:title="Source"
           sling:resourceType="granite/ui/components/coral/foundation/container"
           maximized="{Boolean}true">
            <items jcr:primaryType="nt:unstructured">
                <allowupload
                    granite:class="js-cq-ImageEditor-allowUpload"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                    checked="{Boolean}true"
                    deleteHint="{Boolean}false"
                    name="./allowUpload"
                    text="Allow asset upload from file system"
                    uncheckedValue="{Boolean}false"
                    value="{Boolean}true"/>
            </items>
           <parentConfig
               jcr:primaryType="nt:unstructured"
               active="{Boolean}true"/>
       </source>
       <orientation
               granite:class="js-cq-IPEPlugin-group"
               jcr:primaryType="nt:unstructured"
               jcr:title="Orientation"
               sling:resourceType="granite/ui/components/coral/foundation/container"
               maximized="{Boolean}true">
           <items jcr:primaryType="nt:unstructured">
               <rotate
                   jcr:primaryType="nt:unstructured"
                   jcr:title="Rotate"
                   sling:resourceType="cq/gui/components/authoring/dialog/inplaceediting/configuration/plugin"
                   features="right"
                   name="rotate"/>
               <flip
                   jcr:primaryType="nt:unstructured"
                   jcr:title="Flip"
                   sling:resourceType="cq/gui/components/authoring/dialog/inplaceediting/configuration/plugin"
                   features="horizontal,vertical"
                   name="flip"/>
           </items>
       </orientation>
       <crop
           granite:class="js-cq-IPEPlugin-group"
           jcr:primaryType="nt:unstructured"
           jcr:title="Cropping"
           sling:resourceType="granite/ui/components/coral/foundation/container"
           maximized="{Boolean}true">
           <items jcr:primaryType="nt:unstructured">
               <crop
                   jcr:primaryType="nt:unstructured"
                   jcr:title="Allow crop"
                   sling:resourceType="cq/gui/components/authoring/dialog/inplaceediting/configuration/plugin"
                   features="*"
                   name="crop"/>
                   <configWrapper
                       jcr:primaryType="nt:unstructured"
                       sling:resourceType="cq/gui/components/authoring/dialog/inplaceediting/configuration/wrapper"
                       configPath="./plugins/crop/aspectRatios">
                       <aspectratios
                           granite:class="cq-AspectRatio"
                           jcr:primaryType="nt:unstructured"
                           sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                           composite="{Boolean}true"
                           fieldLabel="Aspect ratios">
                           <field
                               granite:class="cq-AspectRatio-field"
                               jcr:primaryType="nt:unstructured"
                               sling:resourceType="granite/ui/components/coral/foundation/container"
                               name="./plugins/crop/aspectRatios">
                               <items jcr:primaryType="nt:unstructured">
                                   <name
                                       granite:class="cq-AspectRatio-name"
                                       jcr:primaryType="nt:unstructured"
                                       sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                       fieldLabel="Name"
                                       name="name"/>
                                   <ratio
                                       granite:class="cq-AspectRatio-ratio"
                                       jcr:primaryType="nt:unstructured"
                                       sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                       fieldLabel="Ratio"
                                       min="0"
                                       name="ratio"
                                       step="0.0001"/>
                               </items>
                           </field>
                       </aspectratios>
                </configWrapper>
            </items>
        </crop>
    </items>
</accordion>

Checkbox:

value: The submit value of the field when it is checked.
uncheckedValue: The submit value of the field when it is unchecked.
defaultChecked: Indicates if the checkbox is checked.
warning:: When setting “defaultChecked” = “true”, you have to set the value of “uncheckedValue” so that the form values will be always populated.
Otherwise Sling Post Servlet will remove the property from the form values, which makes the checkbox to be always checked.

<showDateFilter
    granite:class="cmp-form-option-item-active"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/checkbox"
    name="./selected"
    text="Show Date Filter"
    uncheckedValue="{Boolean}false"
    defaultChecked="{Boolean}true"
    value="{Boolean}true"/>

Text:

<inputgroup
    jcr:primarytype="nt:unstructured"
    sling:resourcetype="granite/ui/components/coral/foundation/text"
    text="Some text"/>

Textfield:

<filterSectionText
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="Some Text"
    name="./someText"/>

TextArea:

<pathbrowser
    jcr:primarytype="nt:unstructured"
    sling:resourcetype="granite/ui/components/coral/foundation/form/pathbrowser"
fieldlabel="Path Browser"
name="./searchPath"
rootpath="/etc/tags">

Fileupload:

<upload granite:class="cq-wcm-fileupload"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/fileupload"     async="{Boolean}true"     autoStart="{Boolean}false"     multiple="{Boolean}false"     name="./image/file.sftmp"     sizeLimit="100000000"     text="Upload Image"     uploadUrl="will_be_replaced">
    <granite:data
        jcr:primaryType="nt:unstructured"
        cq-msm-lockable="./image"/>
</upload>

Pathbrowser:

<pathBrowser
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
    fieldLabel="Path Browser"
    name="./searchPath"
    rootPath="/etc/tags"/>

Pathfield:

 <buttonLinkTo
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
    fieldLabel="Link to"
    name="./buttonLinkTo"
    rootPath="/content"
    suffix=".html"/>

Datepicker:

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

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

Select List:

					<listFrom
    granite:class="cmp-options--editor-type-v1"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/select"
    fieldLabel="List Item"
    name="./listItem">
    <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>
 </listFrom>

Radio:

<radio
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
   name="./color"
   vertical="{Boolean}true"
   fieldLabel="Radio">
     <items jcr:primaryType="nt:unstructured">
         <op1
             jcr:primaryType="nt:unstructured"
             text="OP 1"
             value="op1"/>
         <op2
            jcr:primaryType="nt:unstructured"
            text="OP 2"
            value="op2"/>
     </items>
 </radio>

Number field:

<radio jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
    name="./color"
    vertical="{Boolean}true"
    fieldLabel="Radio">
    <items jcr:primaryType="nt:unstructured">
        <op1  jcr:primaryType="nt:unstructured"
            text="OP 1"
            value="op1"/>
        <op2  jcr:primaryType="nt:unstructured"
            text="OP 2"
           value="op2"/>
   </items>
</radio>

Heading

<MainHeading
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/heading"
    level="{Long}3"
    text="Main"/>

Multifield:

The attached snippet has been verified for:

Checkbox
Textfield
Pathbrowser
Pathfield
Datepicker
Select list

 <pages
     jcr:primaryType="nt:unstructured"
     sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
     composite="{Boolean}true"
     fieldDescription="Click '+' to add a new page"
     fieldLabel="URLs">
     <field
         granite:clas="cmp-options--editor-item-multifield-composite-item coral-Well"
         jcr:primaryType="nt:unstructured"
         sling:resourceType="granite/ui/components/coral/foundation/container"
         name="./items">
         <items jcr:primaryType="nt:unstructured">
             <column
                 granite:clas="cmp-options--editor-item-multifield-composite-item coral-Well"
                 jcr:primaryType="nt:unstructured"
                 sling:resourceType="granite/ui/components/foundation/container">
                 <items jcr:primaryType="nt:unstructured">
                     <showDateFilter
                        granite:class="cmp-form-option-item-active"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/checkbox"
                        name="./selected"
                        text="Show Date Filter"
                        uncheckedValue="{Boolean}false"
                        value="{Boolean}true"/>
                     <filterSectionText
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Some Text"
                        name="./someText"/>
                     <pathBrowser
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                        fieldLabel="Path Browser"
                        name="./searchPath"
                        rootPath="/etc/tags"/>
                     <buttonLinkTo
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                        fieldLabel="Link to"
                        name="./buttonLinkTo"
                        rootPath="/content"
                        suffix=".html"/>
                     <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"/>
                    						<listFrom
                            granite:class="cmp-options--editor-type-v1"
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                            fieldLabel="List Item"
                            name="./listItem">
                          <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"/>
                        </items>
                    </listFrom>
                </items>
             </column>
         </items>
     </field>
 </pages>

More Granite UI components for Coral 3 are available at /libs/granite/ui/components/coral/foundation

Errors and resolution:

Error 1: Executing maven command, throws following error:

“The prefix “granite” for attribute “granite:class” associated with an element type “background-color-palette” is not bound.”

Resolution: Add following xml namespace to your content.xml

xmlns:granite=”http://www.adobe.com/jcr/granite/1.0″

2 thoughts on “Coral 3 – Granite UI components”

Saitama says:

September 30, 2017 at 10:02 pm

hi admin!
In Multifield: Pathfield, select, datepicker,… click OK, only PathBrowser click don’t working.
Link error: https://imgur.com/a/VYgAO

LikeLike

Dheeraj Moudgil says:

April 17, 2022 at 5:14 pm

Hi,
I am getting a slightly different error error as mentioned in ‘Errors and resolution’ section:
“The prefix “granite” for attribute “granite:class” associated with an element type “content” is not bound.”

Can this also be rectified using the same resolution?(xmlns:granite=”http://www.adobe.com/jcr/granite/1.0″)

LikeLike