Level 6

SOLVED: Displaying variables in editor mode on the component container

Forum|Forum|3 years ago
March 2, 2023
3 replies
1749 views

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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

P

pixislinger

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}">

Rohit_Utreja

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

A

anasusticAuthor

Level 6

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