Skip to main content
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
Adobe 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 in thread

11 replies

Prince_Shivhare
Community Advisor
Prince_ShivhareCommunity Advisor
Community Advisor
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
    ChitraMadan
    Community Advisor
    ChitraMadanCommunity Advisor
    Community Advisor
    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
      Adobe Champion and Community Advisor
      BrianKasingliAdobe Champion and Community Advisor
      Adobe Champion and Community Advisor
      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
      Shashi_Mulugu
      Community Advisor and User Group Leader
      Shashi_MuluguCommunity Advisor and User Group Leader
      Community Advisor and User Group Leader
      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
        vanegi
        Adobe Employee
        vanegiAdobe EmployeeAccepted solution
        Adobe 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
          arunpatidar
          Community Advisor
          arunpatidarCommunity Advisor
          Community Advisor
          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
            Community Advisor
            VeenaVikramanCommunity Advisor
            Community Advisor
            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
            Terms & ConditionsAccessibility statement

            Loading footer...