Explore Expression Customizer in AEM

Expression Customizer is an extension of Expression Language and available since AEM 6.3, but i have seen very few developers making use of it. Nearly in every AEM sites project we came across a scenario where we need to update component dialog field values based on selection in design dialog.

For example hiding a title field in dialog if we select hide title checkbox in design dialog. In order to implement this requirement, usually developers write custom java script/jquery in client libraries and add cq.authoring.dialog client library category to it, to trigger js when content authors open dialog. But writing this java script code is a time consuming process and waist lot of productive time, because dialog’s are getting complex day by day.

Expression Customizer provides implicit cqDesign object which developers can directly use inside dialog field properties and update dialog visibility/behavior dynamically based on design dialog selection.

Lets see more about it in detail. After completing this tutorial you will have clear idea about:-

  • Overview of Expression Customizer.
  • How to use Expression Customizer.
  • What all use cases can be solved using Expression Customizer.
  • Limitations

Overview

Due to increasing complexity of component dialog’s to have numerous options for content authors. It’s becoming very difficult to keep user interface simple although they may require only a fraction of options at particular moment. By using Expression Customizer hide conditions we can make content authors life very simple by hiding unnecessary options. Content authors, template authors or admin users can enable to disable options from design dialog at any point of time. Below is a snippet of how cqDesign implicit object is created.

 Design design = getDesign();
 ExpressionCustomizer customizer = ExpressionCustomizer.from(request);
 customizer.setVariable("cqDesign", design);

How to use Expression Customizer.

Using cqDesign Object is very simple, developer can goto dialog field and add  (e.g. cqDesign.myProperty) on node property to access design dialog property values. Expression Customizer is used through out core components in aem. Lets explore few of most commonly used scenerios.

Examples of Expression Customizer

Lets understand using example of teaser core component.

1. Hiding fields based on Design Dialog Selection:-

By default content/page authors has option to add Title and Description for Teaser component. Lets see how core component team is hiding and showing this field.

aem-teaser-hide-field

In the design dialog of Teaser component authors can select an option to hide title and hide description. Go ahead and select these check boxes next to them and click on save.

hide-title-desription-aem-teaser

A policy node is created under /conf/we-retail/settings/wcm/policies/weretail/components/content/teaser with a property titleHidden and descriptionHidden set to true.

save-design-values-teaser-aem

The hide condition is defined as the value of a granite:hide property on the dialog property node :-
/apps/core/wcm/components/teaser/v1/teaser/cq:dialog/content/items/tabs/items/text/items/columns/items/column/items/titleGroup

/apps/core/wcm/components/teaser/v1/teaser/cq:dialog/content/items/tabs/items/text/items/columns/items/column/items/descriptionGroup

save-design-values-teaser-aem

Title and Description option is not longer visible on dialog.
It’s just a 5 minute activity and saved around 4-5 hours of development effort.

hide-text-description-teaser-aem

2. Fetch value from design dialog and populated in dialog field:-

In this example we will see how to fetch design dialog values from policy node and populate it on dialog property. This is useful when you have a requirement to populate some default text which can also be authorable using design dialog and if content authors want they can change it on specific page.

To understand this also lets take an example to teaser core component. In order to fetch the description of the template you can use

${cqDesign._jcr_description}

If we want to fetch value from design dialog, assuming we have a property by name description in design dialog. We can use below expression language.

${cqDesign.description}

Note:- You can also write complex expression language and make use of cqDesign object for specific requirements. Few examples are listed below:-\

${cqDesign.myProperty}
${!cqDesign.myProperty}
${cqDesign.myProperty == 'someText'}
${cqDesign.myProperty != 'someText'}
${cqDesign.myProperty == true}
${cqDesign.myProperty == true}
${cqDesign.property1 == 'someText' || cqDesign.property2 != 1 || header.myHeader}

${not empty cqDesign.myProperty ? cqDesign.myProperty : false}

Limitations of Expression Customizer (cqDesign):-

  • Hiding a resource based on an expression does not replace ACL permissions. Content remains editable but is simply not displayed. To be more specific for example if a component is interacting with server for some data and population the field, the interaction will still happen only the field is hidden.
  • All out of the box properties doesn’t honor cqDesign. What i mean to say is that for example for a checkbox(granite/ui/components/coral/foundation/form/checkbox) checked property is supported but text property might not be supported using cqDesign object.

For more information visit :- Expression Customizer Docs

Spread the love
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.