cq:isContainer Property in AEM

 It’s a common use case to create components that include other components. These components are called “Container Components” e.g. parsys, etc and are denoted by adding cq:isContainer="{Boolean}true" as a property on the component.

Why is it important to add cq:isContainer property to container component?

The answer is simple to make sure the component must behave like a container component. You must be thinking what does it even mean? Let's understand this with an example.

I have 3 components, component-container, component-a, component-b

The component structure would be:

component-container

|----- component-a

|----- component-b

i.e.

/apps/weretail/components/demo/component-container/component-container.html

   <div class="c-component-container">

      <div data-sly-resource="${'a' @ resourceType='/apps/weretail/components/demo/component-a'}"/>

      <div data-sly-resource="${'b' @ resourceType='/apps/weretail/components/demo/component-b'}"/>

    </div>

What happens if component-container does not have cq:isContainer property

1. From the Content Tree the hierarchy does not maintain.

2. Let's try to create a livecopy of this page and break the inheritance of the parent component i.e. component-container component 

Livecopy without inheritance broken

After breaking the inheritance for component-container, the inheritance is broken for children components(component-a and component-b) as well. That was not the expectation.

Let's check above 2 scenarios again with cq:isContainer property

The component hierarchy maintains when view content from the Content Tree

The inheritance for children component is not broken when breaking the parent component i.e. component-container component inheritance.

Conclusion

Whenever you create a container component make sure you create proper configuration for the parent component. That could be adding cq:isContainer property or not allowing deleting childer component 

by adding cq:childEditConfig child node to a parent component

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

          jcr:primaryType="cq:EditConfig"

          cq:actions="[EDITANNOTATE]"/>

For more info you can read https://blogs.perficient.com/2019/02/19/how-to-prevent-authors-from-deleting-a-child-component/

You can create a component with all the container configurations and use supertype for other parent components. so can manage this configuration in one place.

AEM - Touch UI Dialog | Field Description with Image

In Touch UI dialog Coral/Granite type fields have fieldDescription property which displays the help text(tooltip) for a field. The value for this property is restricted to have plain text.

and It will show fields in a dialog like below:

Improve Authoring Experience

With the headless architecture where the presentation layer is separated from AEM and Author does not have a view on WYSIWYG, to provide a view of how the content is gonna render can be implemented in many ways. One of the options is to use an image in the field description.

OOTB Coral/granite type does not support the HTML tags(due to the encoding), which could have been used to add an image in fieldDescription property. 

To overcome this situation an image can be added as another property fieldDescriptionImage e.g. using data attribute

fieldDescriptionImage = /content/dam/aemlab/system/components/sample/dialog/text.png

The fieldDescriptionImage  property will be added to granite:data node for Coral3/Granite type and for Coral2 to field node.

Later this value from the data attribute(data-fielddescriptionimage) can be read and injected into the existing fieldDescription.

The rendition is used in the above screenshot is cq5dam.thumbnail.140.100.png, Other rendition can also be used.

ClientLibs Code 

1. Create a clientlibs of category 'cq.authoring.dialog'
2. Create js.txt , css.txt, dialog.fielddescription.image.css and dialog.fielddescription.image.js files (get the file from Github).

Package

You can install the below packages from https://github.com/arunpatidar02/aem63app-repo/blob/master/packages/aem-touchui-dialog-fielddescription-image/aem-touchui-dialog-fielddescription-image-sample-1.zip  to enable this feature for the Touch UI dialog. These works in AEM 6.3+


If you install this package, the Below files will be installed in the repository at 

• /apps/touchui-fielddescription-image/clientlibs/lib-touchui-image-field-desrciption/js.txt
• /apps/touchui-fielddescription-image/clientlibs/lib-touchui-image-field-desrciption/js/dialog.fielddescription.image.js
• /apps/touchui-fielddescription-image/clientlibs/lib-touchui-image-field-desrciption/css.txt
• /apps/touchui-fielddescription-image/clientlibs/lib-touchui-image-field-desrciption/css/dialog.fielddescription.image.css
• /apps/touchui-fielddescription-image/components/sample-component

Limitation:

Work only with along with fieldDescription property and Granite field type.

AEMaaCS - Setup JDK11, Author, Publish and Dispatcher

This tutorial walks through setting up a local development environment for Adobe Experience Manager (AEM) using the AEM as a Cloud Service SDK. Adobe official document Adobe Experience Manager as a Cloud Service Tutorials explain steps in more details.

https://docs.adobe.com/content/help/en/experience-manager-learn/cloud-service/local-development-environment-set-up/overview.html

But Objective of this document to share steps to setup AEM git project, AEM Author, AEM Publish and AEM Dispatcher and covers the

1. Download latest AEM SDK from Software Distribution
2. Create Maven Project
3. Download JAVA 11
4. File System Organization
5. Install AEM Jar with JDK 11.
6. Run AEM with JDK 11.
7. Setup Replication Agent
8. Dispatcher
9. Windows Hyper-V Feature

Download latest AEM SDK from Software Distribution

https://experience.adobe.com/#/downloads/content/software-distribution/en/aemcloud.html

The Downloaded ZIP contains AEM Jar and Dispatcher files -

Create a maven project using the latest archetype 

mvn -B archetype:generate -D archetypeGroupId=com.adobe.granite.archetypes -D archetypeArtifactId=aem-project-archetype -D archetypeVersion=23 -D aemVersion=cloud -D appTitle="AEM Lab" -D appId="aem-lab" -D groupId="com.community.aemlab" -D frontendModule=none -D includeExamples=n

Example - https://github.com/arunpatidar02/aemaacs-aemlab

Update Parent POM to update AEM SDK api version

Download JAVA 11

Download Java 11 from Software Distribution https://experience.adobe.com/#/downloads/content/software-distribution/en/general.html

Extract JAVA 11 at C:\Program Files\Java

Note: You can copy java11 in any other folder as well.

File System Organization

Extract the downloaded aemsdk zip and create the folder structure like below:

~/aem-sdk is a organizational folder containing the various tools provided by the AEM as a Cloud Service SDK

~/aem-sdk/author contain s the AEM Author Service

~/aem-sdk/publish contains the AEM Publish Service

~/aem-sdk/dispatcher contains the Dispatcher Tools

~/git-repo/<AEM maven project> contains the custom AEM Project source code

I have created aem-sdk and git-repo folder at C:\Users\Arun.Patidar\Desktop\AEM\AEMaaCS

Inside aem-sdk create author, publish and dispatcher folder

Inside author and publish folder copy AEM jar from extracted aem-sdk and rename jar file based on author and publish run mode.

Unpack the Dispatcher Tools into ~/aem-sdk/dispatcher

Windows: Unzip aem-sdk-dispatcher-tools-x.x.x-windows.zip into C:\Users\Arun.Patidar\Desktop\AEM\AEMaaCS\aem-sdk\dispatcher

macOS / Linux: Execute the accompanying shell script aem-sdk-dispatcher-tools-x.x.x-unix.sh to unpack the Dispatcher Tools

chmod a+x aem-sdk-dispatcher-tools-x.x.x-unix.sh && ./aem-sdk-dispatcher-tools-x.x.x-unix.sh

Note: out folder will be created when you work on dispatcher. This will be covered later. 

Copy maven project inside the git-repo folder

Install AEM with JDK 11.

You need java 11 to run cloud sdk aem jar, if you already have java 11 set as JAVA_HOME then you just need to double click on the aem jar, it will get installed similar to traditional aem jar. 

But if you don’t have java 11 set as JAVA_HOME and you need have java as default jdk 8 to work with traditionally AEM jar, then you can run aem cloud jar without setting up java 11 as JAVA_HOME by following below steps :

• Open CMD and go to author folder i.e. C:\Users\Arun.Patidar\Desktop\AEM\AEMaaCS\aem-sdk\author
• Run C:\Program Files\Java\jdk-11.0.6\bin\java -jar aem-author-p14502.jar

AEM installation will be started and it will take some time to extract jar. Once installation is done. AEM home page will be opened and you will the welcome screen where you need to enter Customer and Licence details, similar to traditional AEM installation.

If you want to start aem using batch file then you need to update start.bat(if you have java 8 as default java and want to use java 11 for cloud sdk).

update start.bat

1. Set java11 path in batch file

2. update all java command with %java_11%

e.g.

Now you can start AEM from CMD

using below command:

C:\Users\Arun.Patidar\Desktop\AEM\AEMaaCS\aem-sdk\author\crxquickstart\

bin>start.bat

You can stop AEM using Ctrl+C

Setup Replication Agent

Setup default replication agent to publish content on local AEM Publisher. You just need to enabled the Agent and update Transport URI and transport User

Dispatcher

To Setup dispatcher in local you need to follow the detail document at https://docs.adobe.com/content/help/en/experience-manager-learn/cloudservice/local-development-environment-set-up/dispatcher-tools.html but I will try to summarize here.

1. Download Docker Desktop from https://www.docker.com/products/dockerdesktop
2. Install Docker Desktop (with Hyper -V feature enable in Windows). Caution: When you enabled the Hyper-V feature in windows it will disabled the Wifi and you may no longer to use wifi with Hyper-V feature enable. To use wifi again, you need to disabled Hyper- V feature from windows. 
3. Open the docker and start if docker is not started. Once Docker is started you will see Docker is running in dashboard.

1. Once Docker is started. Open the command line and go to dispatcher folder i.e. C:\Users\Arun.Patidar\Desktop\AEM\AEMaaCS\aemsdk\dispatcher and run below command
1. Windows: bin\validator full -d out src
2. macOS / Linux: ./bin/validator full -d ./out ./src

This Command will generate the dispatcher configs inside out folder based on src folder. So whenever you have new dispatcher changes you need to delete out folder and generate new configs.

Run Dispatcher locally in the Docker container.

run below command
Windows: bin\docker_run <deployment-folder> <aem-publish-host>:<aem-publish-port> <dispatcher-port>
macOS / Linux: ./bin/docker_run.sh <deployment-folder> <aem-publish-host>:<aem-publish-port> <dispatcher-port>

e.g. host.docker.internal is used for localhost IP, so need to change this, only update AEM port and dispatcher port. example :
bin\docker_run out host.docker.internal:14503 8085

Once the dispatcher is running in docker container(This can be checked from Docker desktop dashboard), you can access the site using localhost:8085/<page_path>

To check caching or server logs use Docker CLI

Windows Hyper-V Feature

Docker creates virtual Ethernet which disabled the Wifi adapter and wifi stops working.

This feature can be turn on and off from Windows Features

When you don’t need to run docker, you can disabled the feature and vEthernet adapter

When vEthernet adapter is disabled you can enable Wi-Fi adapter again.