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>

Looking for Help? Or need a mentor?

If you need help to super drive your AEM career road map, you can hire me for a one-hour session on codementor.io; We can work together on a price works just for you. https://www.codementor.io/@briankasingli. I'd be happy to help you along your way to becoming a high-quality AEM full-stack engineer.

Was this post helpful?

Hello, I am an enthusiastic Adobe Community Advisor and a seasoned Lead AEM Developer. I am currently serving as an AEM Technical Lead at MNPDigital.ca, bringing over a decade of extensive web engineering experience and more than eight years of practical AEM experience to the table. My goal is to give back to the AEM Full Stack Development community by sharing my wealth of knowledge with others. You can connect with me on LinkedIn.

Leave a Reply

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

Back To Top