AEM Learning Repository

Apart from the supported variables/functions in Expression Language, we can have custom variable created with help of ExpressionCustomizer( com.adobe.granite.ui.components.ExpressionCustomizer ) and the same can be made use of in Expression Language. One such variable is cqDesign used to fetch design properties as we do with currentStyle . Implementation Details: Design design = getDesign(); ExpressionCustomizer customizer = ExpressionCustomizer.from(request); customizer.setVariable("cqDesign", design); Usage in granite:hide: granite:hide property with cqDesign variable in EL has been used widely in Core Components. Illustration of Core List component related to this with screenshots has been mentioned in helpx link It controls the list displaying options of dialog using values/properties configured in Design mode of List component(in case of static template) or via Policy of List component (in case of Editable template) Given that "cqDesign" is associ...

Granite UI offers two ways of hiding the resource dynamically. FilteringResourceWrapper (granite:hide) RenderCondition (granite:rendercondition) UseCase: To hide/filter a resource from being rendered based on some custom conditions. Understanding the differences in terms of usage: granite:hide granite:rendercondition Decision making logic/condition is defined using Expression Language(EL) . Decision making logic/condition is defined in a component  ie. Separate rendercondition component will hold the logic. Supported Variables/functions in EL (for Granite UI resource) are available here OOB rendercondition components are available here .  Custom variable can also be registered using ExpressionCustomizer . One such variable is cqDesign  for fetching the design properties as we would do with currrentDesign  global object. (OOB core components uses this variable in EL- ${cqDesign. customproperty }) Custom rendercondition compone...

Responsive Layout/design in AEM web pages is achieved with the help of responsivegrid or Layout Container component. This provides a paragraph system which lets us to add components and position them within the responsive grid. Layout Container or responsivegrid component: ResourceType : /libs/wcm/foundation/components/responsivegrid To make use of this in our site, below needs to be done: Include the Layout container component in base page component or can be dragged and dropped from component browser. Include the responsive CSS Enable Emulator  Enable Layout mode. Including the component: Include the responsivegrid component via data-sly-resource or cq:include in HTL or JSP respectively in base page component using which templates would be created and hence the pages. In case of editable templates, we can explicitly define responsivegrid component under structure node of template-types . It can also allowed to be included from component browser via dra...