Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

DOM values of existing Multifield Items changing after adding New

Avatar

Level 3

I have a custom tab in page properties where I have a multifield, the multifield consist of a coral-textfield which I convert to a coral-autocomplete through jquery on page load like below example :

 

 

 

 

    Coral.commons.ready(autocomplete, function () {
        autocomplete = new Coral.Autocomplete().set({
            placeholder: "place holder",
            name: "/xyz",
            match: "startswith",
            required: true,
            delay: 600
        });

 

 

This works quite well the first time despite I add one or 10 items and also saves my autocomplete data at ./xyz in JCR, my issue starts when I load the saved page property and try to add more items to existing multifield, the moment I click add, the name attribute of existing coral-autocomplete in existing multifield-item changes to something like ./xyz./xyz and value becomes empty, and existing fields despite having data shows required, in this whole scenario the newly added item remains correct, similary if I start with 2 and later add 3rd first 2 will get wrong name and value and soon as I click add button of multifield to add 3rd item.

 

I am on 6.5 and use coral UI3

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Hi,

 

When initializing the Coral Autocomplete component, refrain from setting the name attribute to a generic value like "/xyz." Instead, employ a more unique and robust naming convention. Consider appending a unique identifier or counter to the name attribute, such as "/xyz_1," "/xyz_2," and so forth. This adjustment will help prevent conflicts with AEM's multifield naming conventions.

Coral.commons.ready(function () {
// Utilize a unique name attribute, e.g., /xyz_1, /xyz_2, etc.
var uniqueName = "/xyz_" + uniqueIdentifier;

var autocomplete = new Coral.Autocomplete().set({
placeholder: "place holder",
name: uniqueName,
match: "startswith",
required: true,
delay: 600
});
});

 

  • Secondly, When loading the page properties dialog and populating the multifield with pre-existing data from the Java Content Repository (JCR), exercise care in setting the name attribute for each Coral Autocomplete field appropriately based on the data retrieved from the JCR.

 

View solution in original post

2 Replies

Avatar

Administrator

@mahi1729 @ManviSharma  Can you please review this Question and share your thoughts? 



Kautuk Sahni

Avatar

Correct answer by
Employee Advisor

Hi,

 

When initializing the Coral Autocomplete component, refrain from setting the name attribute to a generic value like "/xyz." Instead, employ a more unique and robust naming convention. Consider appending a unique identifier or counter to the name attribute, such as "/xyz_1," "/xyz_2," and so forth. This adjustment will help prevent conflicts with AEM's multifield naming conventions.

Coral.commons.ready(function () {
// Utilize a unique name attribute, e.g., /xyz_1, /xyz_2, etc.
var uniqueName = "/xyz_" + uniqueIdentifier;

var autocomplete = new Coral.Autocomplete().set({
placeholder: "place holder",
name: uniqueName,
match: "startswith",
required: true,
delay: 600
});
});

 

  • Secondly, When loading the page properties dialog and populating the multifield with pre-existing data from the Java Content Repository (JCR), exercise care in setting the name attribute for each Coral Autocomplete field appropriately based on the data retrieved from the JCR.