Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list

SOLVED: Displaying variables in editor mode on the component container

Avatar

Level 5

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 3

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

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

 

Avatar

Level 6

@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 5

Thanks for your reply @kirthi_murali 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

Level 5

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

Thanks,
Krishna

Avatar

Level 6

Can you try modifying the syntax to below.

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

Avatar

Level 4

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>