Empty Component Placeholder Text Missing | Community
Skip to main content
T
Thomas-1977
Level 3
August 16, 2018
Solved

Empty Component Placeholder Text Missing

  • August 16, 2018
  • 7 replies
  • 9208 views

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.
Best answer by Daniel_Gordon

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

smacdonald2008
smacdonald2008
Level 10
August 16, 2018

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
smacdonald2008
Level 10
August 16, 2018

I get this - which is the correct response.

T
Thomas-1977Author
Level 3
August 16, 2018

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
smacdonald2008
Level 10
August 17, 2018

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

T
Thomas-1977Author
Level 3
August 17, 2018

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
Adobe Employee
Daniel_GordonAdobe EmployeeAccepted solution
Adobe Employee
August 17, 2018

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

T
Thomas-1977Author
Level 3
August 17, 2018

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!

Terms & ConditionsAccessibility statement

Loading footer...