Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

How to identify if URL contains editor.html in Sightly

saukaush
Level 2
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
davidjgonzalezzzz
Correct answer by
Level 5
Level 5

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
SureshDhulipudi
Community Advisor
Community Advisor

you can use wcmmode

 

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

saukaush
Level 2
Level 2
It will give true in both cases. So not able to differentiate.
bkhatr
Level 1
Level 1
Are you trying to differentiate between preview and authoring mode?.
jbrar
Employee
Employee

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

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
Level 2
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.
bkhatr
Level 1
Level 1
What are you trying to achieve by locating "editor.html" in URL?.
Mariia_Lukianet
Employee
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... 

saukaush
Level 2
Level 2
Thanks, but even window.location.href do not contain /editor.html
davidjgonzalezzzz
Level 5
Level 5
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
Community Manager
Community Manager
@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
Community Advisor
Community Advisor

@saukaush 

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

 

BrianKasingli
Community Advisor
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>

 

 

BrianKasingli
Community Advisor
Community Advisor
When you are in edit mode, /editor.html or /cf# will exist. Can you share your window.location.href please?
BrianKasingli
Community Advisor
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>

 

davidjgonzalezzzz
Correct answer by
Level 5
Level 5

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