Coral 3 – Granite UI components - AEM Tutorials for Beginners

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

Accordion:

<accordion

granite:class="js-cq-IPEPlugin-container"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/accordion"

variant="quiet">

<source

jcr:primaryType="nt:unstructured"

jcr:title="Source"

sling:resourceType="granite/ui/components/coral/foundation/container"

maximized="{Boolean}true">

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

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

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

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

<column

granite:clas="cmp-options--editor-item-multifield-composite-item coral-Well"

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/container">

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

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

AEM Tutorials for Beginners

December 10, 2020
Estimated Post Reading Time ~

Coral 3 – Granite UI components

No comments:

Post a Comment

Get Posts In Your Inbox

December 10, 2020 Estimated Post Reading Time ~

Coral 3 – Granite UI components

No comments:

Post a Comment

December 10, 2020
Estimated Post Reading Time ~