Nested multifield is not working properly with datasource
- November 13, 2024
- 2 replies
- 567 views
I've created a page template by adding "core/wcm/components/page/v2/page" as resourceSuperType. The XML is 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 items from datasource, I've created a servlet that set a list of dropdown. For simplicity, I've hardcoded the list in servlet. here is the code.
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);
}
}
I can add multiple news field & under each "CTA Text", I can add several "Select News" field. After adding several News field, while adding several
"Select News" field under "CTA Text", sometimes the "Select News" field is not adding properly & UI is breaking in the particular area only. The image is added here, please click to see.
In the image green marked area, I've clicked Add to add "Select News" field, & the field is added successfully. But in the red marked area, I've clicked the "Add" button but the second "Select News" field is not added, moreover, the UI is broken. I couldn't identify the reason of it. Can anyone help pls.
In the image green marked area, I've clicked Add to add "Select News" field, & the field is added successfully. But in the red marked area, I've clicked the "Add" button but the second "Select News" field is not added, moreover, the UI is broken. I couldn't identify the reason of it. Can anyone help pls.