Find authoring modes Using Java Script in AEM | Community
Skip to main content
Chandanhindustani
New Participant
Jul 22, 2020 3:24 PM UTC
Solved

Find authoring modes Using Java Script in AEM

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
vanegi
vanegiAccepted solution
Employee
Jul 22, 2020 7:47 PM UTC

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 reply

11 replies

arunpatidar
arunpatidar
New Participant
Jul 22, 2020 8:00 PM UTC

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 -

 

Translate
Arun Patidar
    VeenaVikraman
    VeenaVikraman
    New Participant
    Jul 22, 2020 8:48 PM UTC
    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.
    Translate
    vanegi
    vanegiAccepted solution
    Employee
    Jul 22, 2020 7:47 PM UTC

    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!!
    Translate
      Shashi_Mulugu
      Shashi_Mulugu
      New Participant
      Jul 22, 2020 5:56 PM UTC

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

      Translate
        ChitraMadan
        ChitraMadan
        New Participant
        Jul 22, 2020 4:38 PM UTC

        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
                }

         

        Translate
          BrianKasingli
          BrianKasingli
          New Participant
          Jul 22, 2020 7:48 PM UTC
          I think this is a pretty great option. Very Simple, no Java-Use API required, and simply Sightly..
          Translate
          Prince_Shivhare
          Prince_Shivhare
          New Participant
          Jul 22, 2020 3:36 PM UTC

          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

          Translate
            Terms & ConditionsAccessibility statement

            Loading footer...