Highlighted

Removing unsued divs in components

Avatar

Avatar

aemFrontend

Avatar

aemFrontend

aemFrontend

29-02-2020

shawns34163620_0-1582990147586.png

 

I'm using/customizing AEM core components but they generate a bunch of unused divs, is there a way to turn these off or remove them.

 

Thanks

 

Replies

Highlighted

Avatar

Avatar

BrianKasingli

MVP

Avatar

BrianKasingli

MVP

BrianKasingli
MVP

29-02-2020

Hi @aemFrontend,

The automatically rendered HTML element can be controlled via Decoration Tag, out of the box behavior by AEM.

  1. 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.
  2. 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.

Visit Adobe's documentation about Decoration Tags here - https://docs.adobe.com/content/help/en/experience-manager-64/developing/components/decoration-tag.ht...

Highlighted

Avatar

Avatar

aemFrontend

Avatar

aemFrontend

aemFrontend

29-02-2020

@BrianKasingli 

 

Thanks for the quick response.

Tried the cq:noDecoration = true this method works but you cannot edit the component in the edit mode, is there another way to use/access the property in the HTL directly

Highlighted

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

29-02-2020

You can create a java model to check preview/publish mode and add decoration tag.

Example -

https://aemlab.blogspot.com/2018/11/aem-restrict-component-editing-and.html

 

Highlighted

Avatar

Avatar

BrianKasingli

MVP

Avatar

BrianKasingli

MVP

BrianKasingli
MVP

29-02-2020

Hello Shawn, 
Here's a quick fix, try this:
1. use cq:noDecoration

2. add custom code into HTL as follows: 

<div 
     data-sly-unwrap="${wcmmode.disabled}"
class="section" style="user-select: auto;"> <<<<YOUR_CODE_GOES_HERE>>>> </div>
Highlighted

Avatar

Avatar

aemFrontend

Avatar

aemFrontend

aemFrontend

02-03-2020

Thanks, @BrianKasingli  but no luck I still cannot edit the component in the template

Highlighted

Avatar

Avatar

BrianKasingli

MVP

Avatar

BrianKasingli

MVP

BrianKasingli
MVP

02-03-2020

What does the rendered code look like after you apply this?
Try this:

// show div when in edit mode, else hide.
// I've added the section class && changed the conditional

<div 
     data-sly-unwrap="${wcmmode.edit}"
class="section" style="user-select: auto;"> <<<<YOUR_CODE_GOES_HERE>>>> </div>

 

Highlighted

Avatar

Avatar

aemFrontend

Avatar

aemFrontend

aemFrontend

24-10-2020

Finally, got back to this; found `${wcmmode.disabled}` removes the wrapper `div` in publish mode only way I was able to get it done...

 

 

<div 
     data-sly-unwrap="${wcmmode.disabled}"
     class="section"
     style="user-select: auto;">
     <<<<YOUR_CODE_GOES_HERE>>>>
</div> 

ref: http://aemconcepts.blogspot.com/2017/03/wcmmodes-aem.html