Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Parsys invisible when component is empty

Avatar

Level 1

I have had this problem numerous times, where the parsys drag-icon doesn't show when a component is empty (i.e when you just created it). My code returns existing items (from the previous component version - backwards compatibility) and otherwise you have the option to add new ones via parsys.

MicrosoftTeams-image.png

Screenshot_1.png

A teammate of mine pointed out this is an issue caused by flexbox, but I am not sure about that. He recommended using this:Screenshot_2.png

Personally, this has never worked for me (but tbf I might have just done it wrong as well). Either way this is a persisting problem across multiple components I've written (they all use flexbox) and it's annoying me. Any ideas why the icon doesn't show?

 

For Reference: the class that contains my parsys item is styled using flexbox.

Screenshot_3.png

 

Update: I've tried setting flex-basis 100 for the parsys icon and it works for existing components but not new ones. I think the problem occurs because of the code in html. Maybe if the returned list is empty it just skips the whole container idk.

1 Accepted Solution

Avatar

Correct answer by
Level 6

I had the same issue. You can try core component templates here.
just check the screenshot

kaikubad_0-1682513158882.png

 

Checkout the code below. I guess this will solve your problem. I have used the same on teaser component.

 

<div data-sly-use.teaser="com.adobe.cq.wcm.core.components.models.Teaser"
data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
data-sly-use.imageTemplate="image.html"
data-sly-use.pretitleTemplate="pretitle.html"
data-sly-use.titleTemplate="title.html"
data-sly-use.descriptionTemplate="description.html"
data-sly-use.actionsTemplate="actions.html"
data-sly-test.hasContent="${teaser.imageResource || teaser.pretitle || teaser.title || teaser.description || teaser.actions.size > 0}"
</div>
<sly data-sly-call="${templates.placeholder @ isEmpty=!hasContent, classAppend='cmp-teaser__empty'}"></sly>

View solution in original post

1 Reply

Avatar

Correct answer by
Level 6

I had the same issue. You can try core component templates here.
just check the screenshot

kaikubad_0-1682513158882.png

 

Checkout the code below. I guess this will solve your problem. I have used the same on teaser component.

 

<div data-sly-use.teaser="com.adobe.cq.wcm.core.components.models.Teaser"
data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
data-sly-use.imageTemplate="image.html"
data-sly-use.pretitleTemplate="pretitle.html"
data-sly-use.titleTemplate="title.html"
data-sly-use.descriptionTemplate="description.html"
data-sly-use.actionsTemplate="actions.html"
data-sly-test.hasContent="${teaser.imageResource || teaser.pretitle || teaser.title || teaser.description || teaser.actions.size > 0}"
</div>
<sly data-sly-call="${templates.placeholder @ isEmpty=!hasContent, classAppend='cmp-teaser__empty'}"></sly>