Level 4

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

Forum|Forum|8 years ago
January 9, 2018
2 replies
3053 views

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>

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

Hemant_arora

Level 8

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

D

dorianhallwardAuthor

Level 4

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>