Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Adding items on top in multifield component

Avatar

Level 1

Whenever a new entry is added in multifield component that will appear at the bottom and we need to manually move each row upwards unless it reaches top. Is there a way to add items on top in multifield component?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @sagars 

 

I have written a code snippet for you that should work.

 

To allow your multifield to add item to top, follow these steps:
1. Add granite:id property to your multifield node with value "multifield-custom-insert-first". That should look like this:
Screenshot from 2020-06-04 20-20-42.png

2. Create clientlib with category "cq.authoring.dialog" and add the below JS code to it.

 

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

    $(document).on("dialog-ready", function() {

        var MULTIFIELD_CUSTOM_FIRST_ID = "multifield-custom-insert-first";

    	var multifieldCustomItemsCount = 0;

		var customMultifield = $('#' + MULTIFIELD_CUSTOM_FIRST_ID);

		if (customMultifield.length) {
			multifieldCustomItemsCount = customMultifield[0].items.length;
		}

        $('#' + MULTIFIELD_CUSTOM_FIRST_ID).on("change",  function(event) {
            if(event.target.id == MULTIFIELD_CUSTOM_FIRST_ID){
                if(event.target.items.length != 1 && event.target.items.length > multifieldCustomItemsCount){
                    event.target.insertBefore(event.target.items.last(), event.target.items.first());
					multifieldCustomItemsCount = event.target.items.length;
                }
            }
        });
	});


})(document, Granite.$);

 

 

Try this and let me know.

 

Hope it helps!

Thanks,

Nupur



View solution in original post

8 Replies

Avatar

Community Advisor

I believe you might have to customize the multifield JS . 

Avatar

Community Advisor

Hi @sagars 

 

Can you tell which aem version are you using?  what is the resourceType of the multifield?

Avatar

Level 1
AEM 6.5 and resourceType is granite/ui/components/coral/foundation/form/multifield

Avatar

Correct answer by
Community Advisor

Hi @sagars 

 

I have written a code snippet for you that should work.

 

To allow your multifield to add item to top, follow these steps:
1. Add granite:id property to your multifield node with value "multifield-custom-insert-first". That should look like this:
Screenshot from 2020-06-04 20-20-42.png

2. Create clientlib with category "cq.authoring.dialog" and add the below JS code to it.

 

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

    $(document).on("dialog-ready", function() {

        var MULTIFIELD_CUSTOM_FIRST_ID = "multifield-custom-insert-first";

    	var multifieldCustomItemsCount = 0;

		var customMultifield = $('#' + MULTIFIELD_CUSTOM_FIRST_ID);

		if (customMultifield.length) {
			multifieldCustomItemsCount = customMultifield[0].items.length;
		}

        $('#' + MULTIFIELD_CUSTOM_FIRST_ID).on("change",  function(event) {
            if(event.target.id == MULTIFIELD_CUSTOM_FIRST_ID){
                if(event.target.items.length != 1 && event.target.items.length > multifieldCustomItemsCount){
                    event.target.insertBefore(event.target.items.last(), event.target.items.first());
					multifieldCustomItemsCount = event.target.items.length;
                }
            }
        });
	});


})(document, Granite.$);

 

 

Try this and let me know.

 

Hope it helps!

Thanks,

Nupur



Avatar

Community Advisor
I would say this is the right approach. handling using custom js using selector. If you are using multiple dropdown in same dialog then changed Id selector to class(granite:class) and use current multifield object. The above JS code also requires a little bit changes in order to support multiple dropdown in same dialog or in case of multifield..


Arun Patidar

Avatar

Level 1
Thank you @Nupur_Jain. The code snippet is really helpful and it works perfectly with multifield.

Avatar

Level 4

Hi @sagars,

Its whenever we adds item in multifield it will be added at bottom only. In order to make it on top We should try to overlay base component and need to add logic to JS for this.

You can overlay multifield component /libs/granite/ui/components/foundation/form/multifield/render.jsp and add custom js logic to add on top. While solution provided by @Nupur_Jain Should work.

Try and let us know the magic after adding js