Adding items on top in multifield component

Avatar

Avatar
Level 1
sagars
Level 1

Likes

0 likes

Total Posts

3 posts

Correct reply

0 solutions
View profile

Avatar
Level 1
sagars
Level 1

Likes

0 likes

Total Posts

3 posts

Correct reply

0 solutions
View profile
sagars
Level 1

04-06-2020

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?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile
Nupur_Jain
MVP

04-06-2020

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



Answers (3)

Answers (3)

Avatar

Avatar
Ignite 1
Level 3
khamat_bn
Level 3

Likes

31 likes

Total Posts

55 posts

Correct reply

12 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 5
Boost 3
View profile

Avatar
Ignite 1
Level 3
khamat_bn
Level 3

Likes

31 likes

Total Posts

55 posts

Correct reply

12 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 5
Boost 3
View profile
khamat_bn
Level 3

04-06-2020

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 🙂 

 

Avatar

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile
Nupur_Jain
MVP

04-06-2020

Hi @sagars 

 

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

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

04-06-2020

I believe you might have to customize the multifield JS .