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

Avatar

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
dorianhallward
Level 3

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

Avatar

Avatar
Validate 1
Level 7
Hemant_arora
Level 7

Likes

92 likes

Total Posts

290 posts

Correct reply

54 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 50
View profile

Avatar
Validate 1
Level 7
Hemant_arora
Level 7

Likes

92 likes

Total Posts

290 posts

Correct reply

54 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 50
View profile
Hemant_arora
Level 7

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

Avatar

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
dorianhallward
Level 3

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>

Avatar

Avatar
Give Back
Level 1
prabu2
Level 1

Likes

0 likes

Total Posts

1 post

Correct reply

0 solutions
Top badges earned
Give Back
View profile

Avatar
Give Back
Level 1
prabu2
Level 1

Likes

0 likes

Total Posts

1 post

Correct reply

0 solutions
Top badges earned
Give Back
View profile
prabu2
Level 1

21-08-2020

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

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,442 likes

Total Posts

3,314 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,442 likes

Total Posts

3,314 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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();