I have two requirements and both are linked to multifield. Lets start with the simpler one first.
In the AEM forms, metadataschema editor, there are a list of component on the right side. I would like to create a multifield that encompasses various data elements. When a user clicks "add" in the multifield, it should present one textfield, two dropdowns, and one checkbox. In the metadata schema editor, all elements on the right rail are simple, and even the mvtextfield is essentially a multifield with single text data. However, my requirement involves multiple data elements of different data types within the multifield. After implementing the below mentioned two code changes, I observed the appearance of a "Custom Component" on the right rail in the metadata schema UI. However, upon dragging it onto the page, I noticed that it initially displays a multifield with two text fields (I added two text fields for simplicity, though I intend to have different fields as detailed earlier). Unfortunately, upon reloading the page, it reverts back to a single textfield instead of retaining the intended two text fields. Any insights or guidance on this matter would be highly appreciated.
First Change -
I have overlayed builditems.jsp to this location /apps/dam/gui/coral/components/admin/schemaforms/formbuilder/v2/builditems.jspI have added below code there.
<li class="field" data-fieldtype="text" tabindex="-1" role="menuitem">
<div class="formbuilder-template-title"><coral-icon icon="text" alt="" size="M"></coral-icon><span><%= i18n.get("Custom Comp") %></span></div>
<script class="field-properties" type="text/x-handlebars-template">
<sling:include resource="<%= fieldTemplateResource %>"
resourceType="dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/mvtextfieldcustom" />
</script>
</li>
2nd change -
Then I've created a /apps/dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/mvtextfieldcustom/mvtextfieldcustom.jsp and added below code.
<%
%><%@include file="/libs/granite/ui/global.jsp" %><%
%><%@ page session="false" contentType="text/html" pageEncoding="utf-8"
import="org.apache.sling.api.resource.ValueMap" %><%
ValueMap fieldProperties = resource.adaptTo(ValueMap.class);
String key = resource.getName();
String resourcePathBase = "dam/gui/coral/components/admin/schemaforms/formbuilder/formfieldproperties/";
%>
<div class="formbuilder-content-form" role="gridcell">
<label class="fieldtype">
<coral-icon alt="" icon="text" size="XS"></coral-icon>
<%= xssAPI.encodeForHTML(i18n.get("Multi Value Text Field")) %>
</label>
<sling:include resource="<%= resource %>" resourceType="dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/textfield"/>
<sling:include resource="<%= resource %>" resourceType="dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/textfield"/>
</div>
<div class="formbuilder-content-properties">
<input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key) %>">
<input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/jcr:primaryType") %>" value="nt:unstructured">
<input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/resourceType") %>" value="granite/ui/components/coral/foundation/form/multifield">
<input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/sling:resourceType") %>" value="dam/gui/components/admin/schemafield">
<input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/granite:data/metaType") %>" value="mvtext">
<input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/field") %>">
<input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/field/jcr:primaryType") %>" value="nt:unstructured">
<input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/field/sling:resourceType") %>" value="granite/ui/components/coral/foundation/form/textfield">
<sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + "labelfields"%>"/>
<%request.setAttribute("cq.dam.metadataschema.builder.field.relativeresource", "field"); %>
<sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + "metadatamappertextfield"%>"/>
<%request.removeAttribute("cq.dam.metadataschema.builder.field.relativeresource"); %>
<sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + "placeholderfields"%>"/>
<%request.removeAttribute("cq.dam.metadataschema.builder.field.relativeresource"); %>
<sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + "titlefields" %>" />
<coral-icon class="delete-field" icon="delete" size="L" tabindex="0" role="button" alt="<%= xssAPI.encodeForHTMLAttr(i18n.get("Delete")) %>" data-target-id="<%= xssAPI.encodeForHTMLAttr(key) %>" data-target="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "@Delete") %>"></coral-icon>
</div>
<div class="formbuilder-content-properties-rules">
<label for="field">
<span class="rules-label"><%= i18n.get("Field") %></span>
<%
String[] fieldRulesList = {"showemptyfieldinreadonly"};
for(String ruleComponent : fieldRulesList){
%>
<sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + ruleComponent %>"/>
<%
}
%>
</label>
<label for="requirement">
<span class="rules-label"><%= i18n.get("Requirement") %></span>
<% String requiredField = "v2/requiredfields"; %>
<sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + requiredField %>"/>
</label>
<label for="visibililty">
<span class="rules-label"><%= i18n.get("Visibility") %></span>
<% String visibilityField = "visibilityfields"; %>
<sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + visibilityField %>"/>
</label>
</div>
