Highlighted

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

dorianhallward

08-01-2018

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>

Replies

Highlighted

Hemant_arora

09-01-2018

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

Highlighted

dorianhallward

09-01-2018

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>

Highlighted

Arun_Patidar

MVP

22-08-2020

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