Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Find authoring modes Using Java Script in AEM

Avatar

Level 1

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.

1 Accepted Solution

Avatar

Correct answer by
Employee

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

View solution in original post

11 Replies

Avatar

Community Advisor

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

Community Advisor

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

Community Advisor
I think this is a pretty great option. Very Simple, no Java-Use API required, and simply Sightly..

Avatar

Community Advisor

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

Avatar

Correct answer by
Employee

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

Avatar

Community Advisor

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



Arun Patidar

Avatar

Community Advisor
Hey @arunpatidar , what was this tool which you use to get the outputs in single go ? I remember you mentioning this in some post but really forgot the name.

Avatar

Community Advisor
@Veenna_Vikram, you might be mentioning the sightly code, mentioned by @Chitra-maden, where ${wcmmode.toString} will expose the mode of the page context. EDIT, PREViEW, DISABLED, DESIGN, etc...