Check if the page is in editor or not

[sean12341]

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.

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,

[Fanindra_Surat]

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.

[Mahedi_Sabuj · Accepted solution]

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