Find authoring modes Using Java Script in AEM

Avatar

Chandanhindustani

22-07-2020

How to find the authoring modes like edit, trageting or preview in javascript or by using Useapi. Is it possbile to find without using the cookies.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

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)

Avatar

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

Avatar

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
        }

 

Avatar

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

Avatar

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.