Update using javascript for coral touch ui tag based tagfield

Any inputs from any one??

Is ur javascript getting called?

what is category of the clientlib under which you have added this javascript code?

Javascript is getting called. Could you please provide any inputs like https://forums.adobe.com/thread/2640879#11188688 Update using javascript for  coral touch ui tag  based tagfield

which could solve this issue

var tagList=$(#TagIdcomp).find('.coral-taglist');

var tagTitle = 'Asset : Guide';

var tagVal = asset:guide

var nameProp = '../../tagsRegion';

tagList.append('<coral-tag class="coral3-Tag coral3-Tag--large" closable="" value="'+tagVal+'" role="option" aria-selected="false" tabindex="0" aria-label="'+tagTitle+'"><button is="coral-button" class="coral3-Button coral3-Button--minimal coral3-Tag-removeButton" size="M" variant="minimal" tracking="off" handle="button" type="button" icon="close" iconsize="XS" title="Remove" tabindex="-1" coral-close="" aria-hidden="true"><coral-icon class="coral3-Icon coral3-Icon--close coral3-Icon--sizeXS" icon="close" size="XS" role="img" aria-label="close"></coral-icon><coral-button-label></coral-button-label></button><coral-tag-label aria-hidden="true">'+tagTitle+'</coral-tag-label><input handle="input" type="hidden" name="'+nameProp+'" value="'+tagVal+'"></coral-tag>');

Hi Arun,

Thanks. I tried the below but does not show up the tags on the dialog for tagfield. Please let me know if i am missing anything

The xml i am using

<tagIndustry

jcr:primaryType="nt:unstructured"

multiple="{Boolean}true"

name="../../tagsRegion"

granite:id="TagIdcomp"

sling:resourceType="/libs/cq/gui/components/coral/common/form/tagfield"

mode="contains">

</tagIndustry>

<tag-hint-tagIndustry

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/hidden"

value="String[]"

ignoreData="{Boolean}true"

name="../../tagsRegion@TypeHint"/>

Javascript:-

var tagList=$(#TagIdcomp).find('.coral-taglist');

var nameProp='../../tagsRegion';

var tagTitle = "Business Unit";

       var tagVal = "business-unit:";

        tagList.append('<coral-tag class="coral3-Tag coral3-Tag--large" closable="" value="'+tagVal+'" role="option" aria-selected="false" tabindex="0" aria-label="'+tagTitle+'"><button is="coral-button" class="coral3-Button coral3-Button--minimal coral3-Tag-removeButton" size="M" variant="minimal" tracking="off" handle="button" type="button" icon="close" iconsize="XS" title="Remove" tabindex="-1" coral-close="" aria-hidden="true"><coral-icon class="coral3-Icon coral3-Icon--close coral3-Icon--sizeXS" icon="close" size="XS" role="img" aria-label="close"></coral-icon><coral-button-label></coral-button-label></button><coral- tag-label aria-hidden="true">'+tagTitle+'</coral-tag-label><input handle="input" type="hidden" name="'+nameProp+'" value="'+tagVal+'"></coral-tag>');

any input based on my query will help