TagInputField widget with custom template | Community
Skip to main content
A
Anonymous
October 16, 2015
Solved

TagInputField widget with custom template

  • October 16, 2015
  • 4 replies
  • 1328 views

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by edubey

    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-namespaces.html

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

    Thanks

    4 replies

    edubey
    edubey
    New Participant
    October 16, 2015

    Hi Dave,

    Can you share you dialog XML?

    Didn't you tried displayTitles  = false ?

    Thanks

    A
    Anonymous
    October 16, 2015

    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>
    edubey
    edubeyAccepted solution
    New Participant
    October 16, 2015

    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-namespaces.html

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

    Thanks

    A
    Anonymous
    October 16, 2015

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

      Terms & ConditionsAccessibility statement

      Loading footer...