Heena
- May 14, 2022

How To Create A Multi-field

Updated: Jul 23, 2023

What is a Multi-field?

Mulitifield allows you to create a set of input fields. Let's take Header Navigation Items as an example. In such case navigation items count is not constant and thus we need cannot create fixed list of fields. So, instead we will create a multi-field.

Let's create a multi-field with following input fields.

Name
URL

Steps to create nodes:(For all steps create nodes of type nt:unstructured)

1. Create node called "multifieldcollection" with following properties:

sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click + to add a new page"
fieldLabel="Multifield collection"

2. Create node named "field". Add following properties to it

name="./multifieldList"
sling:resourceType="granite/ui/components/coral/foundation/container"

3. Create node named "items" under "field".

4. Create "column" under "items" and add following property to it.

sling:resourceType="granite/ui/components/coral/foundation/container"

5. Create node named "items" under "column". Under items add all the input fields to be include in multi-field. In this example we will add two fields i.e name and url.

Create node named "name"


name="./name"
fieldLabel="Name"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

Create node named "url"


name="./url"
fieldLabel="URL"
rootPath="/content"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"

This is the end result:

Dialog:

Add following Java class to your bundle project:


import java.util.List;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.ChildResource;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;


@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public interface MultifieldExampleSlingModel {

	@ChildResource
	List<Item> getMultifieldList();

	@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
	interface Item {

		@ValueMapValue
		String getName();

		@ValueMapValue
		String getUrl();

	}
}

Add following code to your html:

<section data-sly-use.props="<YOUR JAVA CLASS PATH>"
	    data-sly-use.templates="core/wcm/components/commons/v1/templates.html">
    <div data-sly-list.multifielditem="${props.multifieldList}">
           <p>Title: ${multifielditem.name}</p>
           <p>URL: ${multifielditem.url}</p>
    </div>
</section>
<sly data-sly-call="${templates.placeholder @ isEmpty = !props.multifieldList}"></sly>

OUTPUT: