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

[Jerome_Lesly_v]

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 @aanchal_sikka @BrianKasingli 

[aanchal-sikka]

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

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"

[Jerome_Lesly_v]

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_]

Hi @Jerome_Lesly_v ,

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

Thanks,

[Jerome_Lesly_v]

js or java anywhere is fine, but comparsion should be between below page

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

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

[aanchal-sikka]

@Jerome_Lesly_v 

Since you are using JS ideally, following should have worked

  $(document).ready(function() {
    if (window.location.href.indexOf("editor") > -1) {
      alert("your url contains the name editor");
    }
  });

[MukeshYadav_]

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>

[Jerome_Lesly_v]

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_]

It will have, I replied after testing only.

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

Thanks,

[MukeshYadav_ · Accepted solution]

Hi @Jerome_Lesly_v ,

PFA

[MukeshYadav_]

You may add one more condition,

  if (mode== edit && referer==editor.html) ==> then its (logical edit mode) 

  else other mode

Note:- Additional check is required because when we do View as Published-

           mode will be disabled but referrer will be still editor.html 

[MukeshYadav_]

Hi @Jerome_Lesly_v , 

Even If you directly lands up on   http://localhost:4502/editor.html/content/proj/in/en.html still it will have referrer because our component get called(loads) in iFrame whose referrer will be editor.html

[arunpatidar]

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

[Jerome_Lesly_v]

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]

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