Tag: multifield

Coral 3 – Granite UI components

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&#8243;

Advertisements

Touch UI – Checkbox for multifield

Problem Description: Consider adding a multifield (with checkbox) to a Component Edit dialog in Touch UI.

An author selects one/many checkbox in multifield and saves the Dialog.

Issue: On reopening the dialog, the state of the checkbox is not retained. In other words, no checkbox is selected.

Solution (Verified on AEM 6.2 and ACS-Commons 3.3.0):

  1. Install ACS Commons. It would allow the multifield values to be stored via nodestore/jsonstore. Steps on how to create a multifield can be found at below mentioned links:
    • to persist values via NODE_STORE, visit link
    • to persist values via JSON_STORE, visit link
  2. Configure ‘value’ configuration for the checkbox as indicated below:
<fieldName
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/checkbox"
name="./persistent_property_name"
text="Field_Label"
value="some_value"/>

Verify the checkbox by checking, saving dialog & reopening dialog again.

Thanks !