Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to identify if URL contains editor.html in Sightly

Avatar

Level 2

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.

1 Accepted Solution

Avatar

Correct answer by
Employee

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.

 

 

View solution in original post

18 Replies

Avatar

Community Advisor

you can use wcmmode

 

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

Avatar

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

Avatar

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

Avatar

Employee Advisor

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

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

Avatar

Employee

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

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

Avatar

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

Avatar

Employee

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

Level 2
Thanks, but even window.location.href do not contain /editor.html
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

Avatar

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


Kautuk Sahni

Avatar

Community Advisor

@saukaush 

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

 

Avatar

Community Advisor

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

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

Avatar

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

Avatar

Community Advisor

@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

Correct answer by
Employee

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.