AEM Sightly Component(s) Empty CQ PlaceHolder

In almost all cases, component’s that are not configured, dragged onto the page should have some sort of indicator telling content authors that they should configure the component; a few of us calls this the empty component placeholder or “cq-placeholder”. A novice AEM full-stack may not be geared with the right tools, and so they add unnecessary Sightly HTL code into the .html file, and try to create this indicator experience. Let’s not re-create the wheel. There’s actually an Adobe way to create the “placeholder” AEM component experience. This is using the Adobe WCM Core Component’s “core/wcm/components/commons/v1/templates.html” script; what exactly is the “core/wcm/components/commons/v1/templates.html”?

In the Adobe Core Component’s Library, you will be able to find this particular file “core/wcm/components/commons/v1/templates.html“. This file is a template that renders an HTML element on the page with the “cq-placeholder” cssClass that makes the rendered element on the page look something like this.

When we inspect the Adobe code, you will see the sightly HTL code as like this:

We understand that we are using Sightly HTL Version: 1.4; where this version enables the feature “template & calls”, and templates. From the code above, you can see that “core/wcm/components/commons/v1/templates.html” is a Sightly template, and its main purpose is to be called via “data-sly-use”. Line-1: This template accepts 3 parameters: isEmpty, classAppend, emptyTextAppend. Line-2: This template is declaring a new div, and only rendered when (edit or preview mode) and isEmpty = true. Line-3: This appends the cq-placeholder cssClass for this <div>, and include custom ${classAppend} if exists. Finally Line-4: renders the resource’s component.properties.jcr:title (component who calls this script) on the screen, and also appends ${emptyTextAppend} to the cq-placeholder’s text if present.

Examples:

1. Basic call example to “core/wcm/components/commons/v1/templates.html”

In this example, you can see us calling the Sling Model backend “com.sourcedcode.core.components.models.Teaser”, and capturing the Sling Model in a “model” variable. Line-3, we understand that the templates.html is accepting the “isEmpty” parameter. The “isEmpty” parameter is evaluated with “!model.titleText” (this means if the model.titleText is empty or null it will return true). When “isEmpty” is true, then the cq-placeholder will be rendered, and if false. It will never be rendered.

2. Second example to “core/wcm/components/commons/v1/templates.html”

In this example, Line-3, you will notice that model.titleText && model.descriptionText are being evaluated, and must not be null or empty. If the evaluation of isEmpty is true, cq-placeholder will be visible.

3. Third example to “core/wcm/components/commons/v1/templates.html”

In this example, Line-3, notice that we are using other parameters to construct the cq-placeholder; classAppend, where we are passing in cmp-teaser as a customCSSClass. Line-4, we are utilizing the parameter, emptyTextAppend, where we can add custom description to the cq-placeholder. The expected behavior here is, when the evaluation of isEmpty is true, we expect to see the rendered cq-placeholder with some description test. See the screenshot below for an example.