SPA/React show component name in wcmmode | Community
Skip to main content
J
JuanEc2
Level 3
August 25, 2022
Solved

SPA/React show component name in wcmmode

  • August 25, 2022
  • 1 reply
  • 811 views

How do we show component name like this for SPA/React ->  
this was made using sightly, where the file resided in the same folder as the component dialog. 

<div data-sly-test="${wcmmode.edit}" class="cq-placeholder" data-emptytext="Edit Page Section"></div> <section data-sly-test="${properties.centeredThickBorder}" class="row"> <section class="small-12 columns"> <article class="${properties.centeredThickBorder}"> <hr> </article> </section> </section>

SPA/React version ->   

How can I access {wcmmode.edit} to display component name the same as the latter, instead of the blue square on the bottom right?

 

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 Sachin_Arora_

In that case you should always make isEmpty to pass true. 

isEmpty: function(props) {
        return true;
    }

 

1 reply

Sachin_Arora_
Community Advisor
Sachin_Arora_Community Advisor
Community Advisor
August 26, 2022

Please refer this sample code for your requirement. You have to add similar in your component JS file for example : ui.frontend\src\components\Text\Text.js

const TextEditConfig = {
emptyLabel: 'Text',

    isEmpty: function(props) {
        return !props || !props.text || props.text.trim().length < 1;
    }
};

The above code is responsible for determining when to render the placeholder in the AEM author environment. If the isEmpty method returns true then the placeholder will be rendered.

Link : https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/map-components.html?lang=en#inspect-the-text-spa-component

Refer point 3 of this link.

 

    J
    JuanEc2Author
    Level 3
    August 26, 2022

    Yes that makes sense but I am trying to render it when empty and also when it is not empty, to make it easier for authors to visually see the components names without having to hover over them. Is this possible?

      Sachin_Arora_
      Community Advisor
      Sachin_Arora_Community AdvisorAccepted solution
      Community Advisor
      August 26, 2022

      In that case you should always make isEmpty to pass true. 

      isEmpty: function(props) {
        return true;
    }

       

        Terms & ConditionsAccessibility statement

        Loading footer...