Adobe Experience Manager Sites & More

Chandanhindustani · 7/22/20

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.

vanegi · 7/22/20

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

View solution in original post

Prince_Shivhare · 7/22/20

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 · 7/22/20

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 · 7/22/20

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

Shashi_Mulugu · 7/22/20

@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 · 7/22/20

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

arunpatidar · 7/22/20

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 -