Expand my Community achievements bar.

Nomination window for the Adobe Community Advisor Program, Class of 2025, is now open!

Update using javascript for coral touch ui tag based tagfield

Avatar

Level 8

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.

6 Replies

Avatar

Level 8

Any inputs from any one??

Avatar

Community Advisor

Is ur javascript getting called?

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

Avatar

Level 8

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

Avatar

Community Advisor

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



Arun Patidar

Avatar

Level 8

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

Avatar

Level 8

any input based on my query will help