How to identify if URL contains editor.html in Sightly

Avatar

Avatar

saukaush

Avatar

saukaush

saukaush

03-03-2021

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

davidjgonzalezzzz

Avatar

davidjgonzalezzzz

davidjgonzalezzzz

04-03-2021

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.

 

 

Answers (7)

Answers (7)

Avatar

Avatar

BrianKasingli

MVP

Avatar

BrianKasingli

MVP

BrianKasingli
MVP

04-03-2021

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

 

Avatar

Avatar

BrianKasingli

MVP

Avatar

BrianKasingli

MVP

BrianKasingli
MVP

03-03-2021

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>

 

 

Avatar

Avatar

Anudeep_Garnepudi

MVP

Avatar

Anudeep_Garnepudi

MVP

Anudeep_Garnepudi
MVP

03-03-2021

@saukaush 

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

 

Avatar

Avatar

Mariia_Lukianet

Employee

Avatar

Mariia_Lukianet

Employee

Mariia_Lukianet
Employee

03-03-2021

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

Avatar

Avatar

davidjgonzalezzzz

Avatar

davidjgonzalezzzz

davidjgonzalezzzz

03-03-2021

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. 

 

 

 

Avatar

Avatar

jbrar

Employee

Avatar

jbrar

Employee

jbrar
Employee

03-03-2021

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/

Avatar

Avatar

SureshDhulipudi

MVP

Avatar

SureshDhulipudi

MVP

SureshDhulipudi
MVP

03-03-2021

you can use wcmmode

 

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