Does anyone have official documentation of cq:htmlTag? | Community
Skip to main content
M
murilod74686477
Level 3
August 9, 2016
Solved

Does anyone have official documentation of cq:htmlTag?

  • August 9, 2016
  • 14 replies
  • 12989 views

I am trying to use it, but I could not find a official good documentation.

The link from the docs at the cq:htmlTag is broken

    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 murilod74686477

    Replace the automatically include outer div.

    I was missing cq:tagName.

    My issue is solved, thank you for the help.

    Just a head-ups as the documentation is broken.

    14 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    August 9, 2016

    Hi

    I have asked Documentation team to help you here.

    For you help as of now:-

    To change the default div tags to something else , use cq:htmlTag nodes in your components. This lets you modify the tag , classes and id associated with the decorator tag.

    • Create cq:htmlTag node [primaryType:nt:unstructured] under your component.
    • Add cq:tagName property [type:String] with the tag to be used as value.
    • Add class property [type:String] with class(es) to be added to the enclosing tag **

    • Add id property [type:String] with id to be added to the enclosing tag

    // Link:- http://www.codermag.net/2016/02/remove-component-wrapper-divs-in-cqaem.html

    Using the cq:htmlTag to manipulate component divs

    Out of the box AEM components creates a number of wrapper div in the generated HTML code which are used by the editing system and to identify various components in the DOM.
    However sometimes this may cause unnecessary problems as the HTML structure becomes different from the one you started with.
    We can use cq:htmlTag to manipulate the wrapper divs.
    First we need to create a nt:unstructured node under our component.
    This node will contain the following:
    1. class - The CSS class names that may be used for styling.
    2. id - The id of the element in the rendered HTML.
    3. cq:tagName - The tag that will be used to represent our component in the DOM (div, span, p, etc.)

    [img]https://1.bp.blogspot.com/-7PniUsdjAiA/VtWYxtivtDI/AAAAAAAAAW4/PRoAPnkJMy0/s1600/cq_nodecoration%2Bexample%2B2%2Bcoderma… ​[/img]

    this will render the component as:-

        <span id="mycomponent" class="modern-style">
        …
        </span>

    I hope this would help you.

    Thanks and Regards

    Kautuk Sahni

    Kautuk Sahni
    smacdonald2008
    smacdonald2008
    Level 10
    August 9, 2016

    What are you trying to do? 

    M
    murilod74686477AuthorAccepted solution
    Level 3
    August 10, 2016

    Replace the automatically include outer div.

    I was missing cq:tagName.

    My issue is solved, thank you for the help.

    Just a head-ups as the documentation is broken.

    smacdonald2008
    smacdonald2008
    Level 10
    August 10, 2016

    what topic is broken? Let me know and I will log a bug, 

    Tuhin_Ghosh
    Tuhin_Ghosh
    Level 8
    August 11, 2016

    if your issue is solved kindly close the ticket and let Scott know about the broken topic so that it could be fixed.

    krish1442
    krish1442
    Level 2
    August 16, 2016

    We can use cq:htmlTag to write our custom tags and attributes to be added to the DIV as mentioned in the below page.

    https://helpx.adobe.com/in/experience-manager/kb/ComponentDiv.html

    But, the question is we can only add static values where I would like to add dynamic values like I want to add component content node path as a data attribute to the auto generated DIV

    For example,

    <div class="title"></div>

    Should be

    <div class="title" res="/content/geometrixx/en/jcr:content/par/title"></div>

    Any references are will be helpful.

    Thanks in advance.

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    August 17, 2016

    We have created a documentation bug for this. Documentation team will work on this. Once done i will inform you.

    ~kautuk

    Kautuk Sahni
    M
    mayurs7918097
    Level 2
    April 6, 2017

    Hi All,

    We have used the cq:htmlTag node to override the CQ generated div for the component.

    Its working fine in author instance, but however it is not working in publish instance, we are getting the auto-generated CQ div class instead of our overridden class.

    Please help me on the urgent basis.

    Thanks,

    Mayur Sharma

      aaaa2222
      aaaa2222
      July 26, 2017

      hi kirsh1442,

      were you able to find solution for your problem of adding dynamic values of component content node path as a data attribute to the auto generated DIV?

      Y
      ybharath264
      Level 2
      June 14, 2018

      Hi, I completely wanted to remove the auto generated <div> tag, so I made the cq:tagName = "".

      But in author instance, when ever I save the dilog, the component gets hidden and the parsys looks broken until the page is refreshed again manually.

      This is happening in 6.3.2.0.

      Any help or suggestion to avoid it ?

      Show more replies
      Terms & ConditionsAccessibility statement

      Loading footer...