How to hide labels when going from Edit mode to Preview mode? | Community
Skip to main content
M
mtremblay33
New Participant
November 2, 2015
Solved

How to hide labels when going from Edit mode to Preview mode?

  • November 2, 2015
  • 6 replies
  • 2930 views

Let's say I have a label like

<p class="my-label" data-sly-test="${wcmmode.edit}">A useful label</p>

I find this type of label useful because in edit mode, it can indicate things to authors. When switching to Preview mode however, the label does not disappear. It only disappears when I do a page refresh. I've got a listener like,

channel.on('cq-layer-activated', function (event) {...});

that can force the page refresh, but to me this is not elegant. How can the component refresh itself when switching between modes?

Maybe a better question is, how can I add overlays to my component such that they only appear during authoring?

Thanks!

    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 mtremblay33

    Thanks. That solution didn't work for me. Here's the CSS (in .less) that worked:

    .my-label { // style for my label .aem-Author--hidePlaceholder & { display: none; } }

    In the iframe, switching from Edit to Preview adds the aem-Author--hidePlaceholder class to the html element, which I hadn't spotted before. Thanks to all those who replied

    6 replies

    M
    mtremblay33AuthorAccepted solution
    New Participant
    November 5, 2015

    Thanks. That solution didn't work for me. Here's the CSS (in .less) that worked:

    .my-label { // style for my label .aem-Author--hidePlaceholder & { display: none; } }

    In the iframe, switching from Edit to Preview adds the aem-Author--hidePlaceholder class to the html element, which I hadn't spotted before. Thanks to all those who replied

      kautuk_sahni
      kautuk_sahni
      Employee
      November 5, 2015

      Hi

      I just found out a reference article "How to hide edit components in preview without a refresh" :

      Link:- http://nathanaelmowbray.tumblr.com/post/65311849929/how-to-hide-edit-components-in-preview-without-a

      I request you to go through it, if it would work for you.

      I will ask my internal team to look into this this, if they know the solution.

       

      Thanks and Regards

      Kautuk Sahni

      Kautuk Sahni
      smacdonald2008
      smacdonald2008
      New Participant
      November 5, 2015

      This use case is not documented in Sightly docs. We will look into how this use case can be performed in Touch Ui.

      M
      mtremblay33Author
      New Participant
      November 4, 2015

      Bump...

      M
      mtremblay33Author
      New Participant
      November 2, 2015

      Thanks for your reply. I'm working in Touch UI, so the Sidekick does not apply...

      edubey
      edubey
      New Participant
      November 2, 2015

      When you click on Preview, there is no need to add any listener to reload page. 

      Sidekick code should do this for you. 

      CQ.WCM.launchSidekick("${currentPage.path @ context='uri'}", { propsDialog: "${wcmInit.dialogPath @ context='uri'}", locked: ${currentPage.locked @ context="scriptString"}, previewReload: "true" });

      Article has shown above behavior : https://helpx.adobe.com/experience-manager/using/domparser.html

      Terms & ConditionsAccessibility statement

      Loading footer...