Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Removing unsued divs in components

Avatar

Avatar
Validate 1
Level 1
aemFrontend
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Validate 1
Level 1
aemFrontend
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
View profile
aemFrontend
Level 1

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

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

612 likes

Total Posts

590 posts

Correct Reply

230 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

612 likes

Total Posts

590 posts

Correct Reply

230 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
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...

Avatar

Avatar
Validate 1
Level 1
aemFrontend
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Validate 1
Level 1
aemFrontend
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
View profile
aemFrontend
Level 1

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

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,356 likes

Total Posts

3,227 posts

Correct Reply

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

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,356 likes

Total Posts

3,227 posts

Correct Reply

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

 

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

612 likes

Total Posts

590 posts

Correct Reply

230 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

612 likes

Total Posts

590 posts

Correct Reply

230 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
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>

Avatar

Avatar
Validate 1
Level 1
aemFrontend
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Validate 1
Level 1
aemFrontend
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
View profile
aemFrontend
Level 1

02-03-2020

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

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

612 likes

Total Posts

590 posts

Correct Reply

230 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

612 likes

Total Posts

590 posts

Correct Reply

230 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
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>

 

Avatar

Avatar
Validate 1
Level 1
aemFrontend
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Validate 1
Level 1
aemFrontend
Level 1

Likes

0 likes

Total Posts

11 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
View profile
aemFrontend
Level 1

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