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″
hi admin!
In Multifield: Pathfield, select, datepicker,… click OK, only PathBrowser click don’t working.
Link error: https://imgur.com/a/VYgAO
LikeLike
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