Update using javascript for coral touch ui tag based tagfield

[#1]

Hi,

Does any one have any inputs as how can i fill tags when i get json response in javascript

I tried with below javascript code but the below tags does not show up under tag field when  touch ui dialog is loaded

========================================

$("#TagIdcomp").val(["Asset:Guide""]);

=====================================

I have the tag

<tags

granite:id="TagIdcomp"

                                                            jcr:primaryType="nt:unstructured"

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

                                                            fieldDescription="Category Tags"

                                                            fieldLabel="Select Tags"

multiple="{Boolean}true"

name="../../tagsRegion"/>

The issue is similar to https://forums.adobe.com/thread/2640879#11188688

But i need for tagfield

Thanks.

[#2]

Any inputs from any one??

[#3]

Is ur javascript getting called?

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

[#4]

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

[#5]

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

[#6]

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

[#7]

any input based on my query will help