Empty Component Placeholder Text Missing | Community
Skip to main content
Level 3
Aug 16, 2018 3:53 PM UTC
Solved

Empty Component Placeholder Text Missing

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Daniel_Gordon
Daniel_GordonAccepted solution
Employee
Aug 17, 2018 3:02 PM UTC

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

7 replies

Level 3
Aug 17, 2018 3:53 PM UTC

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!

Translate
Daniel_Gordon
Daniel_GordonAccepted solution
Employee
Aug 17, 2018 3:02 PM UTC

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

Translate
Level 3
Aug 17, 2018 12:15 PM UTC

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>

Translate
smacdonald2008
Level 10
Aug 17, 2018 12:14 AM UTC

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

Translate
Level 3
Aug 16, 2018 6:06 PM UTC

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.

Translate
smacdonald2008
Level 10
Aug 16, 2018 5:13 PM UTC

I get this - which is the correct response.

Translate
smacdonald2008
Level 10
Aug 16, 2018 5:08 PM UTC

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

Translate