• Heena Shirke

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:

GitHub Lik

68 views

Recent Posts

See All