Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

SOLVED: Displaying variables in editor mode on the component container

Avatar

Level 7

anasustic_0-1677758061543.png

I have a use case where I have to show only on the editor instance (not preview and not publish) the component name and a field that I retrieve from the model.

 

This is what I have done (code below) but that creates a new div whereas I would like to display the variable "on" the component container box just like now Articles and Drag component here shows. End result should be  Article :${model.blogTag} in the container box slighly grayed out.

 

<sly data-sly-use.model="xxx.component.content.ArticlesModel"
data-sly-use.template="core/wcm/components/commons/v1/templates.html"></sly>
<sly data-sly-call="${template.placeholder @ isEmpty=!model.tagDefined}"></sly>

<sly data-sly-test="${wcmmode.edit}">
<div data-sly-test="${model.tagDefined && model.authorInstance}">
Article :${model.blogTag}
</div>
</sly>

  

6 Replies

Avatar

Level 4

@anasustic can you try removing this div tag and add a sly instead from here?

<div data-sly-test="${model.tagDefined && model.authorInstance}">

 

Avatar

Community Advisor

@anasustic 

Please use data-sly-unwrap within html element to avoid these.

<p data-sly-use.nav="abc.js" data-sly-unwrap>Hello World</p>

produces

Hello world

Avatar

Level 7

Thanks for your reply @kirthim and @Rohit_Utreja 

 

It renders correctly (the rendering logic is correct) but it does not center nicely like the "Drop your component here" renders in the editor.

 

This is what I have done:

 

<sly data-sly-test="${wcmmode.edit}">
<div data-sly-test="${model.tagDefined && model.authorInstance}" class="l-horizontal l-horizontal--align-center" data-sly-unwrap>
Article :${model.blogTag}
</div>
</sly>

 

Avatar

Community Advisor

@anasustic Can you check if the css related to those classes are loading in author mode or not

Thanks,
Krishna

Avatar

Community Advisor

Can you try modifying the syntax to below.

<sly data-sly-call="${template.placeholder @ isEmpty=!model.tagDefined, classAppend='some-custom-class'}"></sly>

Avatar

Community Advisor

may be try this. it won't create a separate div

<div data-sly-test="${WCMMode.edit}" data-sly-unwrap>
<div class="clear"></div>
<div data-emptytext="

 Article :${model.blogTag}

" class="cq-placeholder"></div>
</div>