Using nested multifield is not working as expected in page template
- November 13, 2024
- 2 replies
- 593 views
I've created a page template by using "core/wcm/components/page/v2/page" as resourceSuperType. I've used nested multifield there with datasource. The XML is added here.
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Multifield Component"
sling:resourceType="cq/gui/components/authoring/dialog">
<content jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="true">
<items jcr:primaryType="nt:unstructured">
<general
jcr:primaryType="nt:unstructured"
jcr:title="General"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="true">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<title
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Title"
name="./title" />
<accordion
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="News">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./multifield">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<linkText
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="CTA Text"
name="./linkText" />
<accordiontwo
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="News body">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./multifieldtwo">
<items
jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items
jcr:primaryType="nt:unstructured">
<newsItem
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Select News"
name="./newsItem"
useFixedInlineToolbar="{Boolean}true">
<datasource
jcr:primaryType="nt:unstructured"
sling:resourceType="/apps/project/components" />
</newsItem>
</items>
</column>
</items>
</field>
</accordiontwo>
</items>
</column>
</items>
</field>
</accordion>
</items>
</column>
</items>
</general>
</items>
</tabs>
</items>
</content>
</jcr:root>
To get the dropdown list from datasource I've created a servlet, & for simplicity I'm using hardcoded list.
package com.abbvie.pro.core.servlets;
import com.adobe.granite.ui.components.ds.DataSource;
import com.adobe.granite.ui.components.ds.SimpleDataSource;
import com.adobe.granite.ui.components.ds.ValueMapResource;
import org.apache.commons.collections4.Transformer;
import org.apache.commons.collections4.iterators.TransformIterator;
import org.apache.jackrabbit.JcrConstants;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.ResourceMetadata;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.api.servlets.HttpConstants;
import org.apache.sling.api.servlets.ServletResolverConstants;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;
import org.apache.sling.api.wrappers.ValueMapDecorator;
import org.osgi.framework.Constants;
import org.osgi.service.component.annotations.Component;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import javax.servlet.Servlet;
import java.util.HashMap;
import java.util.Map;
import java.util.TreeMap;
@Component(
service = Servlet.class,
property = {
Constants.SERVICE_DESCRIPTION + "=data source",
ServletResolverConstants.SLING_SERVLET_METHODS + "=" + HttpConstants.METHOD_GET,
ServletResolverConstants.SLING_SERVLET_RESOURCE_TYPES + "=/apps/project/components",
}
)
public class DynamicDataSourceServlet extends SlingSafeMethodsServlet {
protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) {
ResourceResolver resourceResolver = request.getResourceResolver();
Map<String , String> data = new TreeMap<>();
for (int i = 0; i < 5; i++) {
data.put("text"+i, "value"+i);
}
// Creating the data source object
@SuppressWarnings({"unchecked", "rawtypes"})
DataSource ds = new SimpleDataSource(new TransformIterator<>(data.keySet().iterator(), (Transformer) o -> {
String dropValue = (String) o;
ValueMap vm = new ValueMapDecorator(new HashMap<>());
vm.put("text", dropValue);
vm.put("value", data.get(dropValue));
return new ValueMapResource(resourceResolver, new ResourceMetadata(), JcrConstants.NT_UNSTRUCTURED,
vm);
}));
request.setAttribute(DataSource.class.getName(), ds);
}
}
The servlet is setting the dropdown list nicely and XML is also retrieving it. While I'm adding "News body" field inside the "News", its getting the dropdown well. But while I'm adding several "Select News" items under same "CTA Text" It's not adding as expected & the UI is breaking in that particular area only. The image is added also(please click multi-field to see below). In green marked field, the "Select News" is added successfully after clicking add. But in the red marked field, "Select News" is not added although I've clicked add button, The UI is also get broken in that area.