Tuesday 2 November 2021

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]"/>



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.


Monday 31 May 2021

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.



property



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.txtdialog.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 - Core Component's Children Editor

If you are using core components, you should be familiar with the children-editor for Tabs, Accordion, and Carousel. These components are th...

About Me

My photo
https://www.linkedin.com/in/arunpatidar26/ https://experienceleaguecommunities.adobe.com/t5/user/viewprofilepage/user-id/6786635 https://community.adobe.com/t5/user/viewprofilepage/user-id/12372253 https://forums.adobe.com/people/Arun+Patidar