Hi @nirmal_kumar1 ,
To achieve renaming nodes in a multifield component to maintain numerical order after deleting a node, you will need to implement custom JavaScript as AEM does not provide built-in functionality to handle this automatically.
Here is a step-by-step approach to implement this custom JavaScript solution:
Step 1: Add Custom JavaScript to Your Component
You need to create or update a client library to include the custom JavaScript for your multifield component.
Create/Update Client Library
- Ensure you have a client library defined for your component. If not, create one under /apps/your-project/clientlibs/your-component.
<!-- /apps/your-project/clientlibs/your-component/.content.xml -->
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="[your-component-category]"
dependencies="[cq.jquery]"/>
Include JavaScript File
- Create a JavaScript file in your client library, for example, multifield-reorder.js.
// /apps/your-project/clientlibs/your-component/multifield-reorder.js
(function ($, document) {
"use strict";
// Function to renumber the multifield items
function renumberMultifieldItems(multifield) {
multifield.children('.coral-Multifield-item').each(function (index, element) {
var item = $(element);
var oldName = item.find("[data-cq-multifield-item-name]").attr("data-cq-multifield-item-name");
if (oldName) {
var newName = oldName.replace(/field_\d+/, 'field_' + index);
item.find("[data-cq-multifield-item-name]").attr("data-cq-multifield-item-name", newName);
item.find("input, textarea, select").each(function () {
var input = $(this);
var inputName = input.attr("name");
if (inputName) {
inputName = inputName.replace(/field_\d+/, 'field_' + index);
input.attr("name", inputName);
}
});
}
});
}
// Event listener for multifield add/remove actions
$(document).on('click', '.coral-Multifield-add, .coral-Multifield-remove', function () {
var multifield = $(this).closest('.coral-Multifield');
setTimeout(function () {
renumberMultifieldItems(multifield);
}, 500); // Slight delay to allow the DOM to update
});
})(jQuery, document);
Include the JavaScript in the Dialog
- Ensure your dialog includes this client library.
<!-- /apps/your-project/components/your-component/_cq_dialog/.content.xml -->
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:cq="http://www.day.com/jcr/cq/1.0"
jcr:primaryType="nt:unstructured"
cq:dialogMode="floating"
jcr:title="Your 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">
<yourField
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
fieldLabel="Your Multifield">
<field jcr:primaryType="nt:unstructured" name="./yourField">
<items jcr:primaryType="nt:unstructured">
<!-- Your multifield item configuration -->
</items>
</field>
</yourField>
</items>
</content>
<cq:clientlibs
jcr:primaryType="cq:ClientLibrary"
categories="[your-component-category]"/>
</jcr:root>
Step 2: Deploy and Test
Deploy the changes to your AEM instance.
mvn clean install -PautoInstallPackage
Test the functionality:
- Open the dialog of the component with the multifield.
- Add and remove items from the multifield.
- Verify that the names of the fields are renumbered correctly after each add/remove action.
By adding this custom JavaScript to your AEM project, you ensure that the fields within the multifield are renumbered correctly after an item is removed, preventing gaps in the numbering sequence. This approach ensures a consistent and predictable order for the multifield items.