Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Find authoring modes Using Java Script in AEM

Chandanhindustani
Level 1
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
vanegi
Correct answer by
Employee
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
Prince_Shivhare
Level 9
Level 9

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

ChitraMadan
Community Advisor
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
}

 

BrianKasingli
Community Advisor
Community Advisor
I think this is a pretty great option. Very Simple, no Java-Use API required, and simply Sightly..
Shashi_Mulugu
Community Advisor
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. 

vanegi
Correct answer by
Employee
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

Arun_Patidar
Community Advisor
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

Veena_Vikram
Community Advisor
Community Advisor
Hey @Arun_Patidar , 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.
BrianKasingli
Community Advisor
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...