Find authoring modes Using Java Script in AEM

Accepted Solutions (1)

Accepted Solutions (1)

vanegi

Employee

22-07-2020

Hi @Chandanhindustani,

WCMMode can be captured in Sightly or Java code as follows:

 
In Sightly,
 
<div data-sly-test.author="${wcmmode.edit || wcmmode.design || wcmmode.preview}">
 
In Sightly Java code that extends WCMUse ,
 
getWcmMode().isEdit(), getWcmMode().isDesign() or getWcmMode().isPreview()
 
But, finding this in Jquery or Javascript is not straight forward. We need to make use of the cookies like
 
if($.cookie('cq-editor-layer') == "Preview") {
console.log("Preview Mode");
}else if ($.cookie('cq-editor-layer') == "Edit") {
       console.log("Edit Mode");
}

or

if($.cookie('wcmmode') == "preview") {
console.log("Preview Mode");
}else if ($.cookie('wcmmode') == "edit") {
       console.log("Edit Mode");
}
Also, you can find the AuthoringUIMode is touch or classic with the cookie
 
if($.cookie('cq-authoring-mode') == "Touch") {
console.log("Touch UI");
}else if($.cookie('cq-authoring-mode') == "Classic") {
console.log("Classic UI");
}
 
Hope this helps!
 
Thanks!!

Answers (4)

Answers (4)

Arun_Patidar

MVP

22-07-2020

It is doable in use api but does not make any sense for just finding wcmmode. You can use wcmmode global object and inject mode as data-attribute. But on publish, there is always one mode.

 

I am sharing the Javascript Use-API example , in case if really want to try -

 

Screenshot 2020-07-22 at 9.56.29 PM.png

ChitraMadan

MVP

22-07-2020

Hi @Chandanhindustani ,

 

Another option, if you don't want to check cookie is to may be use data-attribute

 

<body data-wcm-mode="${wcmmode.toString}">.....</body>
$(document.body).attr('data-wcm-mode') === "DISABLED"){
//do something
}

 

Prince_Shivhare

22-07-2020

Hey, Why you want to do it with UseApi, if you can do it with sightly code.
Can you tell me if any specific reason?

 

"<div data-sly-test="${wcmmode.edit}">
edit...
</div>
<div data-sly-test="${wcmmode.preview}">
preview...
</div>"

 

Cheers,
Prince

Shashi_Mulugu

MVP

22-07-2020

@Chandanhindustani Easiest way is to identify runmode in Sightly and pass to useAPI rather than put complex logics in useapi, u can also inject the identified wcmmode as class or data attribute store at body/container level to identify using Javascript.