How To Create A Multi-field

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.

1. Name

2. 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:

This is how the authored content will be stored:

Remember we set composite to TRUE? If we change it to FALSE, the values will be stored as shown below:

Feel free check my git project in case of confusion:

That's all for today! If you've found this blog post informative or helpful, I’d greatly appreciate it if you could give it a like. It keeps me motivated 💛

☕️ Click Here to Buy me a coffee ☕️

Enjoying my ad-free blog? Support by buying me a coffee! I've kept this space ad-free, sponsoring it myself to maintain its purity. Your contribution would help keep the site afloat and ensure quality content. Thanks for being part of this ad-free community.