Empty Component Placeholder Text Missing

[Thomas_H77]

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.

[smacdonald2008]

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

[smacdonald2008]

I get this - which is the correct response.

[Thomas_H77]

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.

[smacdonald2008]

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

[Thomas_H77]

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>

[Daniel_Gordon · Accepted solution]

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

[Thomas_H77]

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!