how to add tag multifield programattically

Question

I have to pull tags from page properties and add into dialog tagfield while dialog is loading using js.
i wrote below script for the same but its adding single field (last index) not all which are in loop.
if i directly set array without loop, it will show in single field in dialog while loading.
Can someone help me here?

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

let currentPagePath = window.location.pathname.replace("editor.html/","").replace(".html","");

$dialog = e.dialog;

var $dialogContent = $dialog.find(dialogContentSelector);

var dialogContent = $dialogContent.length > 0 ? $dialogContent[0] : undefined;

if (dialogContent) {

retrieveLocationData(currentPagePath);

for (let i = 0; i < locationTags.length; i++) {

$dialog.find(locationsTagsDialog).adaptTo("foundation-field").setValue(locationTags[i]);

}

});

giuseppebaglio · Accepted Answer

hi @sudarshanv1,

The issue with your code is that setValue() overwrites the previous value each time it's called in the loop, rather than adding to the existing values. For AEM Coral UI tag fields with property multiple="true", you need to manually append tags to the list:

if (dialogContent) {
    var locationTags = retrieveLocationData(currentPagePath);
    var $tagField = $dialog.find(locationsTagsDialog);
    var $tagList = $tagField.find('coral-taglist');

    // Clear existing tags first
    $tagList.empty();

    // Append each tag to the coral-taglist
    for (let i = 0; i < locationTags.length; i++) {
        $tagList.append('<coral-tag value="' + locationTags[i] + '">' +
            '<coral-tag-label>' + locationTags[i] + '</coral-tag-label>' +
            '</coral-tag>');
    }
}

Source of reference: method buildSelectedContainer > getTagHtml

SantoshSai · Answer

Hi @sudarshanv1,You should pass the entire array of tag values to setValue() once - but make sure the array matches the format expected by a tagfield (e.g., ["tag1", "tag2"]).Here’s how you can fix your code:$(document).on("dialog-loaded", function (e) {    let currentPagePath = window.location.pathname        .replace("editor.html/", "")        .replace(".html", "");    const $dialog = e.dialog;    const $dialogContent = $dialog.find(dialogContentSelector);    const dialogContent = $dialogContent.length > 0 ? $dialogContent[0] : undefined;    if (dialogContent) {        const locationTags = retrieveLocationData(currentPagePath);        // Ensure it’s an array        if (Array.isArray(locationTags) && locationTags.length > 0) {            const field = $dialog.find(locationsTagsDialog).adaptTo("foundation-field");            field.setValue(locationTags);  // <-- pass array once        }    }});

Sign up

Login with SSO

Login to the community

Login with SSO