How can I remove the decoration tags only in preview/publish mode in AEM sightly?
I have seen the question and answer: AEM/CQ: Conditional CSS class on decoration tag
This removes the decoration but stops me from editing the components because it removes the decoration in edit and design mode as well. What is the condition required so that it will only remove the decoration tags in preview/publish?
I have also seen that it is possible to add the following code into the activate method of my java-use class:
if (!getWcmMode().isEdit() && !getWcmMode().isDesign()) {
IncludeOptions.getOptions(getRequest(), true).setDecorationTagName("");
}
This removes all but one of the decoration tags see example below:
HTML in wcmmode=disabled without the above code in the activate method:
<ul class="timeline">
<div class="section timelineTag">
<div class="section timelineTag">
<div class="section timelineTag">
<li class="clear"></li>
</ul>
HTML in wcmmode=disabled with the above code in the activate method:
<ul class="timeline">
<div class="section timelineTag">
<li class="event" href="#">
<li class="event" href="#">
<li class="clear"></li>
</ul>
How can I remove the first decoration DIV tag in the ul as it does not disappear when I add the specified code to the activate method?
As requested here is a detailed look at the component in question (updated 07/05/2015):
Java Class
public class TimelineClass extends WCMUse {
@Override
public void activate() throws Exception {
//Remove default wrapping performed by AEM for the preview mode
if (!getWcmMode().isEdit() && !getWcmMode().isDesign()) {
IncludeOptions.getOptions(getRequest(), true).setDecorationTagName("");
}
}
}
HTML code: - There are two components involved in this. First of all the container component that includes the ul tag - Then the tag component which is dragged and dropped from the sidekick into the container to create, in publish, the lists shown above.
Container code:
<div class="az-timeline row">
<section class="small-12 columns">
<section class="wrapper">
<ul class="timeline">
<!-- /* The parsys where all of the timeline tags will be dropped */ -->
<div data-sly-resource="${'par-wrapper' @ resourceType='foundation/components/parsys'}" data-sly-unwrap></div>
<li class="clear"></li>
</ul>
</section>
</section>
Tag component which is dragged and dropped into the container parsys above:
<li data-sly-use.timelineTag="TimelineClass" class="event" href="#">
<img style="width: 165px;" data-sly-test="${properties.outerImage}" alt="placeholder" src="${properties.outerImage}"/>
<article>
<h5>${properties.heading || 'Timeline heading'}</h5>
<h4>${properties.subheading || 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt labore molestias perspiciatis reiciendis.'}</h4>
<p>${properties.text || 'Sed molestie, mauris sit amet egestas malesuada, felis magna commodo urna, vel consequat lorem enim ac diam. Aenean eget ex vitae enim cursus facilisis ac feugiat nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'}</p>
<img style="height: 130px;" data-sly-test="${properties.innerImage}" alt="" src="${properties.innerImage}" />
<a data-sly-test="${properties.link}" class="az-sbButton" href="${properties.link}">${properties.linkText || 'More'}<span class="owi-az-linkIcon internal"></span></a>
</article>
</li>
Several of the tag components are dragged and dropped into the parsys in the container and the result in wcmmode=disabled is the second ul shown above with the first item in the list surrounded by a div tag
