Rearrange the Nodes in multifield in numberical order for all existing pages

[Nandheswara]

Hi all,

Initial Problem

I have a multifield in pageproperty and saving the node value based on the highest index but i have the problem let us assume we have three nodes (contentOwner_0, contentOwner_1, contentOwner_2) at the time, we are removing the 2nd node and try to add one more node, at this time its saving as contentOwner_3 but i need as contentOwner_2.
Also when a node is deleted, it should rearrange or rename the nodes and provide it in a numerical order as contentOwner_0, contentOwner_1, contentOwner_2.

Solution for this issue we handle it throught JS

(function ($, document) {
    "use strict";

    function renumberMultifieldItems(multifield) {
        multifield.children('.coral3-Multifield-item').each(function (index, element) {
            var item = $(element);
            var oldName = item.find(".contentOwner").attr("name");
            if (oldName) {
                var newName = oldName.replace(/contentOwner_\d+/, 'contentOwner_' + index);
                item.find(".contentOwner").attr("name", newName);
                item.find("input, textarea, select").each(function () {
                    var input = $(this);
                    var inputName = input.attr("name");
                    if (inputName) {
                        inputName = inputName.replace(/contentOwner_\d+/, 'contentOwner_' + index);
                        input.attr("name", inputName);
                    }
                });
            }
        });
    }

    $(document).on('click', '[coral-multifield-add], .coral3-Multifield-remove, #shell-propertiespage-doneactivator', function () {
        var multifield = $('.contentOwnerSelector');
            renumberMultifieldItems(multifield);
    });

})(jQuery, document);

But this code only execute when the multifield is added, removed or when the field is modified but i have lacks of pages so i need to cleanup the existing nodes in the pages and rearrange the nodes in numerical order which is previously authored, created or save.

For this case how we can rearrange the nodes, any suggestion or ideas please

Thanks

Nandheswara

[Ritesh_Mittal]

Hi @Nandheswara ,

I am assuming, you must be using this node name with numeric values for some kind of sorting or business logic, instead of using node names, can you think of having some property on node itself, may be some identifier. 

The reason is having such scripts which manipulates the OOTB functionalities might get impacted on product upgrade and might need a rework and also like you mentioned the existing nodes still need some rearrangement.

For existing node upgrade, if you use custom identifier property instead of node name change then it will be a simple service to update on all existing nodes based on your business requirement.

Thanks,

Ritesh Mittal

[partyush · Accepted solution]

Hi @Nandheswara 

The issue with the initial implementation was that the JavaScript code only handled rearranging and numbering nodes when the multifield was added, removed, or modified. However, it did not address the scenario where existing nodes needed to be rearranged and numbered correctly upon page load or before the page was saved.

Here is other approach, Please check and let me know in case of any doubt ! 

(function ($, document) {
    "use strict";

    function renumberMultifieldItems(multifield) {
        multifield.children('.coral3-Multifield-item').each(function (index, element) {
            var item = $(element);
            var oldName = item.find(".contentOwner").attr("name");
            if (oldName) {
                var newName = oldName.replace(/contentOwner_\d+/, 'contentOwner_' + index);
                item.find(".contentOwner").attr("name", newName);
                item.find("input, textarea, select").each(function () {
                    var input = $(this);
                    var inputName = input.attr("name");
                    if (inputName) {
                        inputName = inputName.replace(/contentOwner_\d+/, 'contentOwner_' + index);
                        input.attr("name", inputName);
                    }
                });
            }
        });
    }

    // Function to rearrange existing nodes on page load
    function rearrangeExistingNodes() {
        $('.contentOwnerSelector').each(function () {
            var multifield = $(this);
            renumberMultifieldItems(multifield);
        });
    }

    // Rearrange nodes on page load
    $(document).ready(function () {
        rearrangeExistingNodes();
    });

    // Rearrange nodes when multifield is added, removed, or modified
    $(document).on('click', '[coral-multifield-add], .coral3-Multifield-remove, .contentOwnerSelector input, .contentOwnerSelector textarea, .contentOwnerSelector select', function () {
        var multifield = $('.contentOwnerSelector');
        renumberMultifieldItems(multifield);
    });

    // Rearrange nodes before page is saved
    $(document).on('click', '#shell-propertiespage-doneactivator', function () {
        rearrangeExistingNodes();
    });

})(jQuery, document);

Thanks