Find authoring modes Using Java Script in AEM | Community
Skip to main content
C
Chandanhindustani
July 22, 2020
Solved

Find authoring modes Using Java Script in AEM

  • July 22, 2020
  • 5 replies
  • 6980 views

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.
Best answer by vanegi

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

5 replies

Prince_Shivhare
Community Advisor
Prince_ShivhareCommunity Advisor
Community Advisor
July 22, 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

    ChitraMadan
    Community Advisor
    ChitraMadanCommunity Advisor
    Community Advisor
    July 22, 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
            }

     

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

        vanegi
        Adobe Employee
        vanegiAdobe EmployeeAccepted solution
        Adobe Employee
        July 22, 2020

        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!!
          arunpatidar
          Community Advisor
          arunpatidarCommunity Advisor
          Community Advisor
          July 22, 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 -

           

          Arun Patidar
            VeenaVikraman
            Community Advisor
            VeenaVikramanCommunity Advisor
            Community Advisor
            July 22, 2020
            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.
            Terms & ConditionsAccessibility statement

            Loading footer...