Solved: Find authoring modes Using Java Script in AEM - Adobe Experience League Community

View profile · 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.

View profile · 22-07-2020

Hi @Chandanhindustani,

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

In Sightly,

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

Veena_Vikram · ‎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

BrianKasingli · ‎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
        }

View profile · 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

View profile · 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.

Find authoring modes Using Java Script in AEM

Accepted Solutions (1)

Accepted Solutions (1)

Answers (4)

Answers (4)