ACS Commons multi-field extension, acs-commons-nested, checkbox is not working

This article will provide a solution to the ACS Commons multi-field extension, checkbox Granite UI Component.

While utilizing the ACS Commons multi-field extension, for everything I tried, I am not able to get the checkbox Granite UI component working as expected. Not an elegant way to solve the problem, but something that actually works and is sustainable.

I found a solution that is simple. Instead of using the checkbox Granite UI Component, use the select Granite UI Component, granite/ui/components/coral/foundation/form/select. This works; problem solved.

Scroll near the bottom of this page to find the example code where the solution can be found.

Not Working Checkbox

As you can see here, in line:24, the acs-commons-nested property is not picking up the Granite UI Component, checkbox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<links
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/foundation/form/multifield">
  <field
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/fieldset"
    acs-commons-nested=""
    name="./links">
    <items jcr:primaryType="nt:unstructured">
      <column
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <items jcr:primaryType="nt:unstructured">
          <linkTitle
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
            fieldLabel="Link Title"
            name="./linkTitle"/>
          <linkPath
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
            fieldLabel="Link Path"
            name="./linkPath"/>
          <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"/>
        </items>
      </column>
    </items>
  </field>
</links>

Solved: Working Boolean

In line:24, replacing the checkbox with the select Granite UI Component, solves the issue.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<links
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/foundation/form/multifield">
  <field
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/fieldset"
    acs-commons-nested=""
    name="./links">
    <items jcr:primaryType="nt:unstructured">
      <column
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <items jcr:primaryType="nt:unstructured">
          <linkTitle
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
            fieldLabel="Link Title"
            name="./linkTitle"/>
          <linkPath
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
            fieldLabel="Link Path"
            name="./linkPath"/>
          <isChecked
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/select"
            fieldLabel="isChecked"
            name="./isChecked">
            <items jcr:primaryType="nt:unstructured">
              <false
                jcr:primaryType="nt:unstructured"
                selected="{Boolean}true"
                text="False"
                value="{Boolean}false"/>
              <true
                jcr:primaryType="nt:unstructured"
                text="True"
                value="{Boolean}true"/>
            </items>
          </isChecked>
        </items>
      </column>
    </items>
  </field>
</links>

Was this post helpful?

Hello, I am an active Adobe Community Advisor & a certified Lead AEM Developer who is currently working as a Senior AEM Full Stack Developer. I have over a decade of overall web engineering experience and many years (more than 6) of AEM experience in practice. I hope to give back to the AEM Full Stack Development community by sharing my knowledge with the world.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top