AEM Multifield for Touch UI Dialogs

Multifields are used to group at field set together within AEM.  In a dialog they can be used to store a variable sized array or create a node hierarchy.

Single Field

For a single field the set up is very simple.  The field that can be added and removed is just put straight under the multifield value,


  <description-lines
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/multifield"
    fieldLabel="Description Lines"
    renderReadOnly="{Boolean}true">
    <field
      jcr:primaryType="nt:unstructured"
      sling:resourceType="granite/ui/components/foundation/form/textfield"
      name="./descriptionLines"/>
  </term-description>

This multifield will store an array of the values entered into the ./descriptionLines value in the JCR.

Field Set

For a genuine set of fields that need to be grouped together the hierarchy under the multifield definition is more complicated,

  <person
    jcr:primaryType="nt:unstructured"
    sling:resourceType="/apps/touch-ui-multi-field-panel/multifield"
    class="full-width"
    fieldDescription="Click '+' to add a new person"
    fieldLabel="People">
    <field
      jcr:primaryType="nt:unstructured"
      sling:resourceType="granite/ui/components/foundation/form/fieldset"
      name="./items">
      <layout
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
        method="absolute"/>
      <items jcr:primaryType="nt:unstructured">
        <column
          jcr:primaryType="nt:unstructured"
          sling:resourceType="granite/ui/components/foundation/container">
          <items jcr:primaryType="nt:unstructured">
            <name
              jcr:primaryType="nt:unstructured"
              sling:resourceType="granite/ui/components/foundation/form/textfield"
              fieldDescription="Enter Name"
              fieldLabel="Name"
              name="./name"/>
            <age
              jcr:primaryType="nt:unstructured"
              sling:resourceType="granite/ui/components/foundation/form/textfield"
              fieldDescription="Enter Age"
              fieldLabel="Age"
              name="./age"/>
          </items>
        </column>
      </items>
    </field>
  </person>

This multifield creates a subnode under ./items each of which contains a 'name' and 'age' field as defined as textfields in the set up.