Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Update using javascript for coral touch ui tag based tagfield

srinivas_chann1
Level 7
Level 7

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
Ankur_Khare
Community Advisor
Community Advisor

Is ur javascript getting called?

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

Arun_Patidar
Community Advisor
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>');

srinivas_chann1
Level 7
Level 7

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