Parsys - what adds <cq data-config="..."> etc elements?

[dorianhallward]

Hi,

we are developing - with AEM 6.3 - some custom Sightly authoring components, which integrate some vue.js code.

When adding content under a parsys (foundation/components/parsys/new) and parsys/new, the markup is decorated (?) with <cq> elements.  So if we add a content item (in our case a 'card') by dragging it into the parsys, in preview mode we then end up with markup similar to the outline below.  I can see how the first 2 divs are drawn: there is the authored content and the markup rendered by new.jsp under parsys.jsp. What then adds the following 2 <cq> sibling elements?  I want to know so that I can figure out how to hide them in preview mode where a <cq data-config="..."> value somehow ends up with invalid json values (paths with missing forward slashes seems to be the symptom (possibly due to vue.js processing)) which then breaks the javascript run from /libs/cq/gui/components/authoring/editors/clientlibs/core.js.

<!-- snippets -->
<div class="card section cq-Editable-dom">
     <!--cq{"decorated":true,... -->
<div class="new section cq-Editable-dom">
          <!--cq{"decorated":true,... -->
<cq data-path="..." data-config="..."></cq>
<cq data-path="..." data-config="..."></cq>

[Hemant_arora]

Check if this solves your problem: The following properties and nodes can be applied to the components to control the behavior of their decoration tag: cq:noDecoration {boolean} : This property can be added to a component and a true value forces AEM not to generate any wrapper elements over the component. cq:htmlTag node : This node can be added under a component and can have the following properties: cq:tagName {String} : This can be used to specify a custom HTML tag to be used for wrapping the components instead of the default DIV element. class {String} : This can be used to specify css class names to be added to the wrapper. Other property names will be added as HTML attributes with the same String value as provided.

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/decoration-tag.html

[dorianhallward]

Thanks Hemant Arora​

Unfortunately I had already tried most of the suggestions on the decoration-tag page.  I still have an unwanted <cq> tag I can't seem to hide and which contributes to our issue.

1. cq:noDecoration affected my parsys such that adding content items results in them being added as siblings alongside the parsys rather than child elements.

2. Adding a node of type nt:unstructured called cq:htmlTag under parsys seemed to have no effect.  Adding cq:htmlTag under the parsys/new component produced custom tags but upset the parsys drag and drop area such that it doesn't show on the page.

3. Trying a Sightly dynamic approach unfortunately doesn't work either: we only see the problem in preview mode but with sightly similar to the snippet below I still seem to have the unwanted <cq data-path=...> element - for the containing parsys - and which contains the bad json at the root of our problem).

<sly data-sly-test="${wcmmode.edit}">
      <div>
        <sly data-sly-resource="${'foopar' @ resourceType='foo/components/widget/external/parsys', decoration='true'}"></sly>
      </div>
</sly>
<sly data-sly-test="${!wcmmode.edit}">
    <sly data-sly-resource="${'foopar' @ resourceType='foo/components/widget/external/parsys', decoration='false'}"></sly>
</sly>

[prabu2]

Hi @dorianhallward , Did you figure out a way to remove cq tags.
@arunpatidar Could you please help in this.

[arunpatidar]

The first cq can be removed by disabling config at com.day.cq.wcm.core.impl.WCMDeveloperModeFilter

the second one is added by WCMComponentFilter and can be removed using simple js e.g.

$(".parsys .cq-Editable-dom cq").remove();