Accessing Component Policies in AEM at the Component Sightly Level

Problem Statement:

How can I access component policies selected at the template level to control the visibility of specific field content in the component’s Sightly code?

Introduction:

AEM has integrated component policies as a pivotal element of the editable template feature. This functionality empowers both authors and developers to provide options for configuring the comprehensive behavior of fully-featured components, including deciding which fields to display, hide, or customize. This configuration is carried out at the template level, facilitating reuse across various templates or template-specific customizations.

Furthermore, AEM introduces a robust styling feature that empowers frontend developers to manage the visual appearance and user interface of components. This grants authors the capability to tailor the look and feel of the component.

Let’s illustrate this with an AEM core component as an example:

Requirement:

In a previous discussion, we outlined a step-by-step process for Accessing Component Policies in AEM at the Component Dialog Level. However, a situation has arisen a question where the field has already been authored on multiple pages, and we now need to avoid displaying this field on pages where it has already been authored. How can we achieve this?

If the “hidePretitle” checkbox is unchecked at the policy level, the Sightly code should display the content.

If the “hidePretitle” checkbox is checked at the policy level, the Sightly code should hide the content.

Solution:

This can be accomplished at the Sightly level by utilizing the Out of the Box (OOTB) implicit object called “currentStyle,” which implements “com.day.cq.wcm.api.designer.Style” as demonstrated below:

${!currentStyle.pretitleHidden}

<sly data-sly-template.pretitle="${@ teaser}">

    <p class="cmp-teaser__pretitle" data-sly-test.pretitle="${!currentStyle.pretitleHidden}">${teaser.pretitle}</p>

</sly>

This Sightly code dynamically controls the visibility of the “pretitle” based on the “pretitleHidden” property in the “currentStyle.”