How to identify if URL contains editor.html in Sightly

[saukaush]

I need to differentiate between below URLs in Sightly html.

http://localhost:4502/content/abc/xyz/test.html and

http://localhost:4502/editor.html/content/abc/xyz/test.html

How can I achieve the same? I tried using wcmmode.edit but it evaluates to true in both cases.

[SureshDhulipudi]

you can use wcmmode

data-sly-test="${wcmmode.edit}">

[saukaush]

It will give true in both cases. So not able to differentiate.

[bkhatr]

Are you trying to differentiate between preview and authoring mode?.

[Jaideep_Brar]

I don't believe sightly supports this, you can use js OR java code(Sling Model) to do this:

Some steps copied from a similar post:

1. Your class adaptable from SlingHttpServletRequest

2 Add the following inject 

@inject

private Page currentPage;

3: check path contains editor.html

currentPage.path.contains("editor.html")

[1] http://www.aemcq5tutorials.com/tutorials/adobe-aem-cq5-tutorials/sling-model-sightly-aem/

[saukaush]

Not exactly @bkhatr, I can enter preview mode with editor.html in the URL. I need know which property or variable can differentiate whether editor.html is present in the URL.

[davidjgonzalezzzz]

Well the problem here, is /editor.html loads the AEM Page that has your custom components via an iframe.

If you try to resolve the URL server-side, it's going to be the path to the AEM Page (since the components/page are on the URL loaded by the iframe IN the page editor, rather than Page Editor's URL).

So, if you have a component on an AEM Page loaded via the Page Editor (aka via its iframe),  The component's access of slingRequest.getRequestUrl() will be something like /content/foo/bar.html and NOT /editor.html/content/foo/bar.html

You probably need to do something clientside to handle this, as that will be able to check if its window is the top, and/or if youre doing top-down, if the top-context is the page editor.

TBH, it sounds like wccmode=edit (or maybe even wcmmode != disabled) is what you want here. .. im not sure what valid use cases you'd have where wcmmode != disabled, and you're not in the page editor. 

[saukaush]

My Use case is - My component should be visible if URL contains editor.html and it should be hidden when editor.html is not present.

[bkhatr]

What are you trying to achieve by locating "editor.html" in URL?.

[Mariia_Lukianet]

Your current WCM Mode doesn't depend on the presence of "/editor.html". It depends on "wcmmode=disabled" parameter.
For example, even http://localhost:4502/editor.html/content/abc/xyz/test.html?wcmmode=disabled will evaluate "wcmmode.edit" to false.

currentPage.path will not contain "/editor.html". I checked HTL global object, Java object will most likely return the same.

${currentPage.path}

If you can use JavaScript clientlib for your use case this will do the trick:

window.location.href.indexOf("/editor.html") > -1

[1] https://experienceleague.adobe.com/docs/experience-manager-htl/using/htl/global-objects.html?lang=en... 

[saukaush]

Thanks, but even window.location.href do not contain /editor.html

[davidjgonzalezzzz]

As mentioned in few other posts here, JS YOUR page loads will have a window.location.href pointing to YOUR Page. If you want to look for /editor.html you'd have to check window.top.location.href since it loads your page in an iframe

[kautuk_sahni]

@Mariia_Lukianet, Thank you for posting the solution with AEM Community. This helps in posterity. Keep the wonderful contribution going (both as learner and contributor).

[Anudeep_Garnepudi]

@saukaush 

What is version of AEM? Did you try ${slyWcmHelper.mode.edit}? Give a try.

[BrianKasingli]

You can achieve this using Sightly or Javascript.

<script type="text/javascript">
if (window.href.location.indexOf('/editor.html/content') != -1) {
 alert('Editor');
}
</script>

<h1 data-sly-test="${!wcmmode.disabled}">Author Mode</h1>

[saukaush]

window.location.href do not contain /editor.html.

[BrianKasingli]

When you are in edit mode, /editor.html or /cf# will exist. Can you share your window.location.href please?

[BrianKasingli]

@saukaush,

I recommend using the sightly data-sly-test with !wcmmode.disabled. This guarantees that when you view your webpage on the dispatcher web server, the block of code will never be shown. From the author, you can also append this a href param into the URL, ?wcmmode=disabled, and you will be able to see the page as if you are not on editor.html.

<div data-sly-test="${!wcmmode.disabled}">
     ...custom code here
</div>

[davidjgonzalezzzz · Accepted solution]

Your use case: "My component should be visible if URL contains editor.html and it should be hidden when editor.html is not present."

So you have a component that you want to display when the page is:

* Being Edited in Edit mode

* Being Previewed in Preview mode

* (Or any of the other views provided by Page Editor).

The only view you don't want this component to display is when it's outside of the Page Editor, which effectively means its in "Disabled" mode (youre just looking at the rendered web page and you cannot interact with it).

I wouldn't think about this as "is it in the page editor" but rather "what are the AEM author users *doing* in AEM that dictates when this component should show/hide".

So, it certainly sounds like you could do it by wcmmode == disabled

Remember, if youre trying to do stuff like window.location.href.indexOf('/editor.html') .. you would actually have to do window.top.location.href('/editor.html') .. as i mentioned in my previous post, the page with your components/code is being loaded in an IFRAME _BY_ the editor.