Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Check if the page is in editor or not

Avatar

Level 3

Hello,

 

I have a page level component that I want to hide on its editor page, and show otherwise (preview, published, etc).

 

So it would hide in the editor page:

http://localhost:4502/editor.html/content/projectname/page1.wvcresponsive.html

 

and show in these pages:
http://localhost:4502/content/projectname/page1.wvcresponsive.html?wcmmode=disabled

http://localhost:4502/content/projectname/page1.html

 


I know that AEM sets a cookie "wcmmode" that can changes value depending on the mode, but for all the pages above, they have the same value of "edit" so it would be useless for the purpose of distinguishing them.

sean12341_0-1692644566576.png

 

Is there a reliable AEM way to determine whether it is an editor page or not?

 

Preferably a frontend way (Cookie, browser object, etc) that can be implemented using Javascript.

 

Thank you,

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @sean12341

You can determine whether you're currently in editor mode from both the backend and the frontend. Feel free to choose either approach based on your needs. 

<!-- Sightly -->
<sly data-sly-test.editor=${wccmmode.edit}>.....</sly>
<!-- JavaScript -->
var isEditor = window.Granite && window.Granite.author ? true : false;
<!-- Java -->
WCMMode mode = WCMMode.fromRequest(request);

You can check available wcmmode options from here: https://developer.adobe.com/experience-manager/reference-materials/6-5/javadoc/com/day/cq/wcm/api/WC... 

 

 

View solution in original post

2 Replies

Avatar

Community Advisor

Hi @sean12341 -
In Sightly -  This can be achieved using the wcmmode context object with values like edit, preview and publish. You can hide/show the contents of component using a conditional check like below:

<sly data-sly-test.show="${wcmmode.preview || wcmmode.publish}"> 

 

In Javascript - You may try assigning the wcmmode values to data attributes and read them in JS.

Avatar

Correct answer by
Community Advisor

Hi @sean12341

You can determine whether you're currently in editor mode from both the backend and the frontend. Feel free to choose either approach based on your needs. 

<!-- Sightly -->
<sly data-sly-test.editor=${wccmmode.edit}>.....</sly>
<!-- JavaScript -->
var isEditor = window.Granite && window.Granite.author ? true : false;
<!-- Java -->
WCMMode mode = WCMMode.fromRequest(request);

You can check available wcmmode options from here: https://developer.adobe.com/experience-manager/reference-materials/6-5/javadoc/com/day/cq/wcm/api/WC...