AEM 6.0 - Preview Mode Still Has Edit Bar Placeholders - How to Remove "new section" Divs | Community
Skip to main content
timlwhite
timlwhite
Level 2
April 1, 2016

AEM 6.0 - Preview Mode Still Has Edit Bar Placeholders - How to Remove "new section" Divs

  • April 1, 2016
  • 3 replies
  • 7368 views

Hello - 

 When entering "Preview" mode in AEM 6.0, the edit header is gone, but the "add component here" divs (with class="new section") are still there (although empty), and still have a defined height.  As a result the page looks terrible, as it's full of space where the edit bars were.

 Why are these still here in "Preview" mode, and can I set up AEM to not include them?

 Thanks!

Tim

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

3 replies

Kunal_Gaba_
Kunal_Gaba_
April 1, 2016

You can remove this divs by adding the following lines of code in global.jsp file- 

(WCMMode.fromRequest(request) != WCMMode.EDIT && WCMMode.fromRequest(request) != WCMMode.DESIGN) { IncludeOptions.getOptions(request, true).forceSameContext(Boolean.TRUE); }
timlwhite
timlwhiteAuthor
Level 2
April 5, 2016

This snippet did not work, and I was unable to remove it once I put it in my global.jsp - I had to rebuild my server completely because the JSP cache would not clear.  I tried adding the imports that weren't called out in the snippet above, and that caused yet more errors. :)

Kunal_Gaba_
Kunal_Gaba_
April 5, 2016

Apologies for the wrong code snippet. You can follow this KB article for the correct API - https://helpx.adobe.com/experience-manager/kb/ComponentDiv.html. 

 This should fix the problem-

<%@ page session="false" import="com.day.cq.wcm.api.WCMMode, com.day.cq.wcm.api.components.IncludeOptions" %> if (WCMMode.fromRequest(request) != WCMMode.EDIT && WCMMode.fromRequest(request) != WCMMode.DESIGN) { IncludeOptions.getOptions(getRequest(), true).setDecorationTagName(""); }
timlwhite
timlwhiteAuthor
Level 2
April 5, 2016

Specifically -  here is a screenshot of what "Preview Mode" for a page.  You can see that the "<div class="section new"> are still there, although the CSS is setting them to display:none.

Unfortunately, this causes lots of issues with the CSS and HTML structure in a responsive design, so we always have to have our authors use ?wcmmode=disabled to preview their content, instead of using preview mode.  They are finally revolting wondering why AEM Preview Mode "doesn't work".

In addition, when including templates, even if we set wcmmode=disabled as part of the include, the placeholders are still included, and not set to display:none.

So if we need one part of the template to only be authorable in one place, but not included on every page, it will still space out the included template as if the edit zone were there:

<section class="utility-header"><div data-sly-resource="${'/content/aemhelp/hidden/header/jcr:content/utility-par' @ wcmmode='disabled'}" data-sly-unwrap></div></section>

Even with that include, the <div class="section new"> elements are coming through from that resource include in edit mode (and display:none in preview mode), even though the resource is coming through as wcmmode=disabled.

Thank you!

Kunal_Gaba_
Kunal_Gaba_
April 5, 2016

Thanks for the detailed explanation. I didn't know that you were using sightly to include the components. Please refer the following thread which has solution to this problem - http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__7whj-i_am_using_sightlyf.html

I guess your custom par - /content/aemhelp/hidden/header/jcr:content/utility-par should inherit /libs/wcm/foundation/components/parsys and not /libs/foundation/components/parsys

 
timlwhite
timlwhiteAuthor
Level 2
April 5, 2016

Yes, I tried that as well, and it made no difference...

L
leeasling
Level 8
April 5, 2016

I can't offer a fix because i don't believe there is one for this issue (it get's posted a lot), but, a somewhat work around to make this easier on your authors would be to add a "Preview" link to the page some where, maybe affixed to the footer, that when clicked opens the current page URL with ?wcmmode=disabled appended.  It's not perfect, but it works.

Terms & ConditionsAccessibility statement

Loading footer...