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

Empty Component Placeholder Text Missing

Avatar

Level 3

I'm working a new component after following some WKND examples online for the Card component and I can't get my new component to properly display placeholder text, aka the name/title of the component, when the component is dragged onto the page.

I thought it was just pulling the name from the jcr:title property is this not the case?

Using AEM 6.3.2.

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

The code looks good. The placeholder template just pulls from the component jcr:title property. I'm wondering if maybe there is an error with the ts.isEmpty method? What happens if you just change:

data-sly-test.hasContent="${false}"

and

<sly data-sly-call="${placeholderTemplate.placeholder @ isEmpty=true}"></sly>

Also FWIW I'd recommend using Sling Models over WCMUsePojo as a best practice

View solution in original post

7 Replies

Avatar

Level 10

Try downloading the package from Github for 6.3 and see if you get different results. That will be a great place to start.

Avatar

Level 10

I get this - which is the correct response.

Cards.png

Avatar

Level 3

Which package are you specifically referring to?  I follow the instructions and the card component works just fine.  I was creating a brand new component from scratch and when I drag it onto my WKND Article template it doesn't show any title by default when it's empty.

For instance when you drag the Card or any other component on it says the components name/title.  I wanted to know exactly where this is set/pulls from to ensure my new component was configured correctly.

Avatar

Level 10

It all depends on how you program the component. Are you using HTL and Sling Model?

Avatar

Level 3

I'm using HTL, code below, and it's backed by a normal WCMUsePojo java object.

<div data-sly-use.ts="com.pnc.core.components.ThoughtStarter"

data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"

data-sly-test.hasContent="${!ts.isEmpty}"

class="cmp-ts">

<div class="cmp-ts__content" style="background-image: url('${ts.imagePath @ context='styleString'}');">

<h1 data-sly-test.heading="${ts.heading}">${heading}</h1>

<div class="cmp-ts__description" data-sly-test.description="${ts.description}">

${description}

</div>

<a data-sly-test="${ts.intType == 'text'}" class="cmp-ts__link" href="${ts.linkUrl}">${ts.linkText}</a>

<div class="cmp-ts__btn-wrapper" data-sly-test="${ts.intType != 'text'}">

<form action="${ts.linkUrl}">

<input class="cmp-ts__input" type="text" maxlength="7" value="${ts.linkText}"/>

        <button class="cmp-ts__button" type="submit">${ts.linkText}</button>                  

</form>

</div>

</div>

</div>

<sly data-sly-call="${placeholderTemplate.placeholder @ isEmpty=ts.isEmpty}"></sly>

Avatar

Correct answer by
Employee Advisor

The code looks good. The placeholder template just pulls from the component jcr:title property. I'm wondering if maybe there is an error with the ts.isEmpty method? What happens if you just change:

data-sly-test.hasContent="${false}"

and

<sly data-sly-call="${placeholderTemplate.placeholder @ isEmpty=true}"></sly>

Also FWIW I'd recommend using Sling Models over WCMUsePojo as a best practice

Avatar

Level 3

Yep that was it my isEmpty method was returning false instead of true.  Once that was fixed these settings properly took effect and the placeholder template shows the name now.  Thanks!