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

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

  • November 2, 2015
  • 6 replies
  • 2931 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

    edubey
    edubey
    Level 10
    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

    M
    mtremblay33Author
    Level 2
    November 2, 2015

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

    M
    mtremblay33Author
    Level 2
    November 4, 2015

    Bump...

    smacdonald2008
    smacdonald2008
    Level 10
    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.

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    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
    M
    mtremblay33AuthorAccepted solution
    Level 2
    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

      Terms & ConditionsAccessibility statement

      Loading footer...