How can we duplicate the authoring contents of a field in a multifield

Avatar

Avatar
Level 1
RkR_F5
Level 1

Likes

0 likes

Total Posts

9 posts

Correct reply

0 solutions
View profile

Avatar
Level 1
RkR_F5
Level 1

Likes

0 likes

Total Posts

9 posts

Correct reply

0 solutions
View profile
RkR_F5
Level 1

02-04-2021

Got a usecase like, while authoring in a multifield dialog, all the contents present in a field will get duplicated to the other field when clicking on add button.

 

For Example, lets say , in a multifield we have a textfield and a numberfield and once we author both fields, next on click of add button the authored contents should reflect in this new filed added inside multifield.

 

Is this even possible or a valid usecase in a multifield?

 

@kautuk_sahni 

@Arun_Patidar 

@Jörg_Hoh 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

02-04-2021

@RkR_F5 

There is no such OOTB functionality. You should write custom listener to achieve this. Why you want to duplicate the content?

  • Write a listener on multifield add click
  • Get nth and (n-1)th multifield-items
  • Get the content of (n-1)th item and set to nth item's fields

[Update]: Just gone through your use case. One way I think of is, you set default value to each of the filed with in multi-filed, so on adding multi field item will get the default values.

 

Blow code to execute logic on multifield add click

$(document).on("dialog-ready", function(){
	$("coral-multifield").children("button[coral-multifield-add]").on("click", function() {
		//Logic
	});
});

 

Answers (4)

Answers (4)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,441 likes

Total Posts

3,313 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,441 likes

Total Posts

3,313 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

04-04-2021

Hi,

What is the business use case here. Simply duplicating values in the multifield dialog does not make sense instead of you can use counter 😛

Please let me know the use case there might be a better approach.

RkR_F5

Hi Arun,

 

Usecase is : We have a component where we are displaying different recipes based on the container we have( that is being populated through a dropdown). Based on this drop down selection, the content in UI changes. The authoring capability in component is quite huge. we have around 15 fields in a multifield.

Now  problem is the delta changes with different recipes are quite minimal and most of the time it's just numerical changes, so business does not want to author most of the contents again and again. We do think of content fragmant but that did not work .

 

So we got this usecase, where we need to duplicate the content every time and then just update the delta changes.

 

Please do let me know for any better approach.

Arun_Patidar
This kind of use case generally handle using container and child component. e.g. A container component which allows the control/settings/configuration and the recipes component which can be authored instaeof of using multifield. you can easily copy past author recipes comoponent inside container and delete as well. it is easy for authors as well. But still if you want to go with multifield, then you have to write a listener and need to prefilled other multifieldd item fields.
RkR_F5
Can you please help me the OOB clientlibs path which gets triggered on click of add button of multifield ?
Arun_Patidar

you can write your own logic e.g.categories="[cq.authoring.dialog]", no need to modify existing.

e.g. Below code explain how to disabling multifield add button when there are may 2 buttons for teaser core component.

 

 

(function($, $document) {
    "use strict";
    $(document).ready(function() {
        const CTA_SELECTOR = '.cmp-teaser__editor-multifield_actions';
        const CTA_ADD_BTN = '.cmp-teaser__editor-multifield_actions > button.coral3-Button--secondary';
        const MULTI_ITEM = 'coral-multifield-item';

        $(document).on('click', CTA_ADD_BTN, function() {
            let items = $(CTA_SELECTOR).find(MULTI_ITEM);
            if(typeof items !== 'undefined' || items != null){
                if(items.length >= 2){
                    $(this).attr('disabled', 'disabled');
                }
            }
        })
        
        $document.on("dialog-ready", function() {
            let items = $(CTA_SELECTOR).find(MULTI_ITEM);
            if(typeof items !== 'undefined' || items != null){
                if(items.length >= 2){
                    $(CTA_ADD_BTN).attr('disabled', 'disabled');
                }
            }
        })
    });
})($, $(document));

 

 

 

 

RkR_F5

Thanks Arun for this response.

Is there a way to disable the OOB listener that gets triggered on click of add button?

 

OOB js path : /libs/clientlibs/granite/coralui3/js/all.js

Arun_Patidar
I would not recommend to update the OOTB javascript because the common file is used for other places as well. Just write your own js and disable button if you want.
RkR_F5

Hi Arun,

 

I tried with below js logic :

 

(function($, $document) {
"use strict";
$(document).ready(function() {
const CTA_SELECTOR = '.cmp-recipe__editor-multifield_actions';
const CTA_ADD_BTN = '.cmp-recipe__editor-multifield_actions > button[coral-multifield-add]';
const MULTI_ITEM = 'coral-multifield-item-content';

$(document).on('click', CTA_ADD_BTN, function() {
let items = $(CTA_SELECTOR).find(MULTI_ITEM);
if(typeof items !== 'undefined' || items != null){
if(items.length >= 2){

for(var i=1; i<items.length; i++){
var cln = items[i-1].cloneNode(true);

items[i].replaceWith(cln);

}
}
}
})


});
})($, $(document));

 

Functionality is working but problem is that after replacing the value of name attribute of each field is getting changed, that is for second field in multifield , value should be ./blender/item1/./quantityimperial but it is changed to ./blender/item1/./blender/item0/./quantityimperial and same for other fields.

 

Is there a way to fix this or any other logic that I can try?

Arun_Patidar

Avatar

Avatar
Establish
Level 4
Rohit_Utreja
Level 4

Likes

44 likes

Total Posts

45 posts

Correct reply

15 solutions
Top badges earned
Establish
Give Back 3
Give Back
Boost 5
Boost 3
View profile

Avatar
Establish
Level 4
Rohit_Utreja
Level 4

Likes

44 likes

Total Posts

45 posts

Correct reply

15 solutions
Top badges earned
Establish
Give Back 3
Give Back
Boost 5
Boost 3
View profile
Rohit_Utreja
Level 4

02-04-2021

Hi @RkR_F5,

 

You can write a touch UI clientlibs and read the value from the first field of multifield. Can copy the value from the first field and add it in the DOM object of dialog as and HTML using JS. 

You can refer below link for the clienlib creation for multifield.

https://techforum.medium.com/how-to-enable-custom-validation-on-multifield-touch-ui-adobe-experience...

Avatar

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile
asutosh_jena
Level 10

02-04-2021

Hi @RkR_F5 

First of all this should not be a use case. In my view, let's say we have a multifield which has 2 fields i.e. Text Field and a RTE field. Now when you configure the dialog for the first time, you will need to author the content for the first list item. On second list I agree that we can copy the content from first list item and it can be done by writing some additional logic. But why will someone want to duplicate the content in a list? Also let's say we want to change the content after copying and you have 2 different content in 2 list. Now for the next item when you will click on "Add" which field it will copy from? Should it copy from list 1 or from list 2? So I don't think this should be an use case!

 

OOTB functionality is the best one where it gives an option to add the content as required.

Avatar

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

124 likes

Total Posts

192 posts

Correct reply

79 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

124 likes

Total Posts

192 posts

Correct reply

79 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
rush_pawan
Level 7

02-04-2021

hello,

the Add button is to populate default set of field not to copy the previously entered field. It's not OOTB use case, now if you want or have a use case then

 

1. write a listener at dialog level which listens to add button call and do according to your use case

refer - http://experience-aem.blogspot.com/2015/04/aem-6-sp2-touchui-adding-dynamic-select-options.html or https://aemsimplifiedbynikhil.wordpress.com/2018/07/30/touchui-dialog-listeners-aem-6-3/ 

2. or you can populate default values in those field by configuring the default value during field configuration

 

thanks!!