Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

TagInputField widget with custom template

Avatar

Level 4

I have used the "tags" xtype on a component dialog, but I would like to render the tag picker with a slightly different template.  Rather than displaying the tags' titles, I'd like to display the name.

Is this possible?  From the docs, I've tried to use the tpl config option, but I can't get it working.

Help, please?  Thank you.

1 Accepted Solution

Avatar

Correct answer by
Level 10

As this is not provided by OOTB, you need to override the JS and write your custom on top of it. For some get going, Here is the article who talks about customization:-

http://experience-aem.blogspot.in/2015/02/aem-6-sp2-classic-ui-tags-widget-show-sub-folders-as-names...

Let me know if both are still not on same page.

Thanks

View solution in original post

4 Replies

Avatar

Level 10

Hi Dave,

Can you share you dialog XML?

Didn't you tried displayTitles  = false ?

Thanks

Avatar

Level 4

Thanks edubey,


I had not noticed the displayTitles property.  Thank you for pointing me to that.  I have now tried it, and unfortunately, it only applies to the "current tags" field, not the tag picker panel (which is arguably more important in this case).

I have learned, however, that retrieving the title from a tag object escapes (actually, replaces with a space) colons and slashes.  As we are trying to use the tag's title for CSS media queries, having colons and slashes removed was problematic.  For now, we have mitigated this by storing the media query in the tag's description, instead of the title.  Of course, we also could have left the media query as the title and retrieved the title from the Resource instead of the Tag, but then we're back to square one with the original question.

So, again I ask, is there any way to configure the tags' picker panel to display the name instead of the title?


Thanks again!

 

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:Panel" title="Breakpoints"> <items jcr:primaryType="cq:WidgetCollection"> <tags jcr:primaryType="cq:Widget" allowBlank="{Boolean}false" cls="cq-propsdialog-tags" fieldLabel="Applies to" fieldDescription="Required Field: The media queries that this rendition applies to." name="./breakpoints" namespaces="[breakpoints]" xtype="tags"/> </items> </jcr:root>

Avatar

Correct answer by
Level 10

As this is not provided by OOTB, you need to override the JS and write your custom on top of it. For some get going, Here is the article who talks about customization:-

http://experience-aem.blogspot.in/2015/02/aem-6-sp2-classic-ui-tags-widget-show-sub-folders-as-names...

Let me know if both are still not on same page.

Thanks

Avatar

Level 4

I suspected that this may require a custom extension to the widget, and you have confirmed this for me.  Thanks again, Praveen.