How to identify if URL contains editor.html in Sightly | Community
Skip to main content
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by davidjgonzalezzzz

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.

 

 

11 replies

SureshDhulipudi
Community Advisor
SureshDhulipudiCommunity Advisor
Community Advisor
March 3, 2021

you can use wcmmode

 

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

    S
    saukaushAuthor
    Level 2
    March 3, 2021
    It will give true in both cases. So not able to differentiate.
    bkhatr
    bkhatr
    March 3, 2021
    Are you trying to differentiate between preview and authoring mode?.
    U
    Adobe Employee
    user05162Adobe Employee
    Adobe Employee
    March 3, 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/

      S
      saukaushAuthor
      Level 2
      March 3, 2021
      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.
      D
      Adobe Employee
      davidjgonzalezzzzAdobe Employee
      Adobe Employee
      March 3, 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. 

       

       

       

        S
        saukaushAuthor
        Level 2
        March 4, 2021
        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
        bkhatr
        March 3, 2021
        What are you trying to achieve by locating "editor.html" in URL?.
        M
        Adobe Employee
        mariia_lukianetsAdobe Employee
        Adobe Employee
        March 3, 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#htl 

          S
          saukaushAuthor
          Level 2
          March 4, 2021
          Thanks, but even window.location.href do not contain /editor.html
          Anudeep_Garnepudi
          Community Advisor
          Anudeep_GarnepudiCommunity Advisor
          Community Advisor
          March 3, 2021

          @saukaush 

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

           

            BrianKasingli
            Community Advisor and Adobe Champion
            BrianKasingliCommunity Advisor and Adobe Champion
            Community Advisor and Adobe Champion
            March 3, 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>

             

             

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

               

                Show more replies
                Terms & ConditionsAccessibility statement

                Loading footer...