Unable to identify which is edit mode page & author page in author instance | Community
Skip to main content
J
Jerome_Lesly_v
Level 2
June 27, 2024
Solved

Unable to identify which is edit mode page & author page in author instance

  • June 27, 2024
  • 4 replies
  • 2106 views

Hi Everyone,

                   page Link: http://localhost:4502/editor.html/content/proj/in/en.html

                                     http://localhost:4502/content/proj/in/en.html

            I need to find which is edit mode page(editor.html) and without editor.html one, technically both are editor page only but still I have find it. I have tried with couple of things mentioned below but didn't worked.

            window.Granite.author - this will come in both pages

             window.Coral  & window.Granite.DialogUtils - this will come only in editor.html page but it's not working because project client lib js loading before aem server script loading

 

Many identifications are there in editor.html it will work if we are checking in browser console, but via ui code it wont' work because before granite server script loading our client lib script will load quickly. 

    It will be better if you guys helped me on this, I have refered many things but nothing helped me. Thanks in advance.

 

CC: @arunpatidar @aanchalsikka @briankasingli 

 

 

 

 

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 MukeshYadav_

It will have, I replied after testing only.

Actually in editor.html case our component load from iframe so it will have referrer.

 

Thanks,

 


Hi @jerome_lesly_v ,

PFA

 

 

4 replies

aanchal-sikka
Community Advisor
aanchal-sikkaCommunity Advisor
Community Advisor
June 27, 2024

@jerome_lesly_v 

 

If sightly would suffice the requirement, 

 

 

<div data-sly-test="${wcmmode.edit}" class="abcd xyz myclass"> ..context here.. </div> <div data-sly-test="${wcmmode.preview || wcmmode.disabled}" class="abcd_prod xyz2_prod myclass2_prod"> ....context here... </div>

 

 

For JS, please check if this thread helps https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/find-authoring-modes-using-java-script-in-aem/m-p/371689

 

Also, I would suggest to use  http://localhost:4502/content/proj/in/en.html?wcmmode=disabled

 

The AEM's switcher for edit and preview mode appends the wcmmode query param. Else, it would still recognize it as "In Edit Mode"

 

Aanchal Sikka
    J
    Jerome_Lesly_vAuthor
    Level 2
    June 27, 2024

    wcmmode=disabled I can find easily, but I have to identify the page of editor.html and non editor.html only so using htl it will not work. Using window Objects also not helping much. It's there any other possibilities?

    below point I agree ideally we should go with this way but still we are trying to identify within those pages- Also, I would suggest to use  http://localhost:4502/content/proj/in/en.html?wcmmode=disabled


      MukeshYadav_
      Community Advisor
      MukeshYadav_Community Advisor
      Community Advisor
      June 27, 2024

      Hi @jerome_lesly_v ,

      Could you plz add more info like- condition check required in some js (frontend ) or java code.

      Thanks,

        MukeshYadav_
        Community Advisor
        MukeshYadav_Community Advisor
        Community Advisor
        June 27, 2024
        Hi @jerome_lesly_v 
        AEM doesn't provide ootb method. AEM treats edit mode by default if we don't put wcmmode=disabled explicitly in query Param

        Below logic fits for yours use case.

        @SlingObject
        SlingHttpServletRequest slingRequest;

        public boolean getRefererEditor(){
            String referer=slingRequest.getHeader("Referer");
            return referer != null && !referer.isBlank() && referer.contains("editor.html");
        }

        Sightly
        <p>Is Referer Editor ${model.refererEditor}</p>
          J
          Jerome_Lesly_vAuthor
          Level 2
          June 27, 2024

          It won't work right, because what if I directly lands to  http://localhost:4502/editor.html/content/proj/in/en.html this page, it will not have any referrer. Correct me If I am wrong

            MukeshYadav_
            Community Advisor
            MukeshYadav_Community Advisor
            Community Advisor
            June 27, 2024

            It will have, I replied after testing only.

            Actually in editor.html case our component load from iframe so it will have referrer.

             

            Thanks,

             

              arunpatidar
              Community Advisor
              arunpatidarCommunity Advisor
              Community Advisor
              June 27, 2024

              Hi @jerome_lesly_v 
              You can try to look for a 'aem-AuthorLayer-Edit' class, it is availble only in EDIT mode.

               

               

              Arun Patidar
                J
                Jerome_Lesly_vAuthor
                Level 2
                June 27, 2024

                I have already tried with root html element's class name it's not working because client side script is loading before server side script render

                  kautuk_sahni
                  Community Manager
                  kautuk_sahniCommunity Manager
                  Community Manager
                  July 8, 2024

                  @jerome_lesly_v Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you! 

                  Kautuk Sahni
                  Terms & ConditionsAccessibility statement

                  Loading footer...