how to add tag multifield programattically

[SudarshanV1]

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 solution]

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

[SudarshanV1]

this solution works thanks.

[SantoshSai]

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
        }
    }
});

[SudarshanV1]

this will adopt as a single field not multi.

Solution provided above by giuseppebaglio is working. thanks