Useful Properties of a Component in AEM 6.3

Hello Everyone,

Creating Components is our regular job in AEM. But if some properties can make the component better, so why we are not using them.

So today in this blog, we will talk about some of the very interesting properties of a component and how can we use them.

cq:icon:  If you see the icon of a component, by default it refers to the first two letters of a component Title as an abbreviation.

Fig - Default icons contains first two letter of component title

But the icon of a component can be modified by various ways using cq:icon property:

• Abbreviation: You can change the abbreviation by adding the property abbreviation in the cq:Component Node and can change the number of characters shown as component icons. But it's advisable to use only two characters for better visualization.

• Coral UI Icon : There are a lot of coral UI Icons available that can be used for the component icons.

Add cq:icon property in a component node and its value is from coral UI icon.

Fig - Added cq:icon property in component dialog

In the design mode, the icons of the component looks like this.

Fig - Coral UI icon added in a component

• PNG Images: You can configure a PNG Image as a component icon by adding image as cq:icon.png node of nt:file type under cq:component node.

PNG Images should have a transparent background and background set of #707070 color and size of 20px by 20px.However to accommodate retina displays 40px by 40px might be more preferable.

• SVG Images: You can configure SVG Images as component icon by adding image as cq:icon.svg of nt:file under cq:component node same as PNG Images.

SVG Images should have a background set of #707070 color and size of 20px by 20px.

helpPath: I ignored this property a lot, but the benefits of this property is like boon to an author.

We used to provide authoring guide to authors so that they can go to that and author the website.They just open the doc find the component which they want to author and continue their work.

Fig - Help icon in the component dialog

helpPath property links the help icon to a particular page.We can create an authoring guide page in AEM only and add that page path as a value of helpPath poperty.You can add also external path and if author starts authoring, he/she can just click on the icon and see the documentation.It is quite a useful property.

• For out-of-the box components this often references a page in the documentation.
• If no helpPath is specified, the default URL (documentation overview page) is shown.

Add caption

Demonstration video on cq:icon and helpPath properties of a component:

Decoration Tag: When a component is getting rendered on a page, an HTML element can be wrapped that component.

The reasons can be:

• The component can only be edited if it is wrapped with an HTML element.
• The wrapping element is used to apply HTML classes that provides Layout and Styling Information.

The following nodes and properties can be applied to a component to control the behavior of decoration tag.

• cq:noDecoration{Boolean}: If we add this property as true in the component node, all the default wrapper HTML elements won’t get displayed. But this property won’t let the component editable as wrapping elements are mandatory to open a dialog in the edit mode.

• cq:htmlTag : If you want to change the default class of wrapper element, put some styling over the component, you can create cq:htmlTag node under the component with the following properties:

1. cq:tagName:This property can be used to add a custom HTML tag in the wrapper of the component in place of default div element.
2. class: This property is used to add a custom class in the default wrapper.
3. Other property names will be added as HTML attributes with the same String value as provided.

Decoration Tags with HTL and JSP:
Decoration Tag behaves differently in both HTL and JSP.

HTL: In general, the wrapper behavior in HTL can be summarized as follows:

• No wrapper DIV is rendered by default (when just doing data-sly-resource="foo").
• All wcm-modes (disabled, preview, edit on both author and publish) render identically.

The behavior of the wrapper can also be fully controlled.

• The HTL script has full control over the resulting behavior of the wrapper tag.
• Component properties (like cq:noDecoration and cq:tagName) can also define the wrapper tag.

Use Cases for Decoration Tag

Let’s understand the different use cases for the decoration Tag.

+--content/page1

    +--parent(sling:resourceType=/apps/components/parent) [Parent Component]

       +--child(sling:resourceType=/apps/components/child)[Child Component]

+--/apps/components   
  +--parent  

        +--parent.html

    +--child

        +--child.html

         +--cq:htmlTag/

           +--@cq:tagName =”article”

           +--@class =”article-child”

1.Include a component for Code Reuse :

If you are including a child component in parent component just for the code reusability purpose and child component doesn’t have any dialog to author, cq:noDecoration can be true because no need to have any wrapper elements.

parent.html: <sly data-sly-resource="${'child' @ resourceType='/apps/aem-training/components/content/child'}"></sly> child.html: This is Child Page. Resulting output on /content/page1.html: This is Child Page.

2.Include an Editable Component: When the need of including the child component in the parent component in the editable format, so we need to have the wrapping elements for the child component to make it enable for working.

Since the included component is in this case an independent component, it needs a wrapper element for the editor to work, and to define its layout and style to apply. To trigger this behavior, we need to add cq:htmlTag node in the child component.

3.Custom Behavior: There can be any number of complex cases, which can be achieved easily by the possibility of HTL to provide explicitly:

• decorationTagName='ELEMENT_NAME' To define the element name of the wrapper.
• cssClassName='CLASS_NAME' To define the CSS class names to set on it.

parent.html:  <sly data-sly-resource="${'child' @ resourceType='/apps/aem-training/components/content/child',decorationTagName=article, cssClassName='child'}"></sly> child.html: Hello World! Resulting output /content/page1.html: <article class="child">Hello World!</article>

JSP: When including a component using cq:include or sling:include, the default behavior in AEM is to use a DIV to wrap the element. However, this wrapping can be customized in two ways:

• Explicitly tell AEM not to wrap the component using cq:noDecoration.

Use a custom HTML tag to wrap the component using cq:htmlTag/cq:tagName or decorationTagName.

Demonstration video on decoration tag in a component:

Note: Special recommendation of watching the Youtube video for decoration tag.

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!

Thanks and Happy Learning.

Useful Properties of Page Properties Dialog in AEM 6.3

Hello Everyone,

Generally we used to copy and paste the dialog and doesn’t understand the meaning of these attributes.

Here I am going to explain some of the page properties of dialog which are very useful.

So I am going to walk you through with each and every property in a detailed manner.

1.cq:showOnCreate :

• As classic UI is soon going to be deprecated from AEM, and we have started using touch UI for page Creation.
• When author create a page from sites, this needs to be notice that only two tabs are visible in the page properties dialog here.

Fig - Page Properties Dialog at the time page creation

Now the question comes that why only two tabs visible here while in the page properties dialog there are many tabs.The tabs/widgets are not visible in the dialog right now ,because if you see in the page properties dialog these tabs are having the property cq:showOnCreate as false.

So this property cq:showOnCreate plays a very important roles to show tabs or widgets at the time of page creation. That’s why if you want to author some fields at the time of page creation only, Just add this property with the value true in the tab /widget node.The default value of cq:showOnCreate is true.

Fig - showOnCreate property added in tab node of the dialog

2.cq:hideOnEdit: While editing the page, if you want to hide any property from the page properties dialog ,set this value of cq:hideOnEdit as true.

The default value of cq:hideOnEdit is false.

Fig - hideOnEdit property added in widget node of the dialog

Note: If you want to show any widget/tab at the time of page creation and at the time of edit you want to hide it, you can use a combination of cq:showOnCreate(as true) and cq:hideOnEdit(true).

3.allowBulkEdit : Sometimes many pages want to share same value of a widget(field).So there is no need to go to each and every page individually and change the property. Let suppose author want some tags to be shared across multiple pages. You can select more than one pages from the sites console and edit the property at all pages. This property enables the fields for bulk editing.

You can only bulk edit the pages:

• Share the same resourceType
• Are on part of live copy

Fig - allowBulkEdit property added in widget node of the dialog

4.cq-msm-lockable: One of the features built into AEM MSM is the ability to determine which properties of a page are inherited (“rolled out” in AEM terms) from the master site to its child sites (live copies).

Fig - cq-msm-lockable property added in widget node of the dialog

Fig - cq:LiveConfig node added under the live copy

How this property works:

1. This property will create the chain link in the dialog which indicates that these values will be fetched from the master copy.

Note: If the value is not present in the master copy, it will pick its own value.

2. This can be edited if inheritance from the master copy has been cancelled.

When cq-msm-lockable has been defined, breaking/closing the chain will interact with MSM in the following way:

The value of cq-msm-lockable can be relative and absolute.

a)Relative (e.g. myProperty or ./myProperty)

• It will add and remove the property from cq:propertyInheritanceCancelled.
• MSM does not operate with deep properties (e.g. ./image/fileReference), even though the dialog’s logic does. If the chain is opened a rollout of the page will overwrite ./image/fileReference, as the rollout of the image node will not "walk" up to the parent node to check cq:propertyInheritanceCancelled.

Fig - Properties in case of relative path when inheritance cancelled

Note: H2Solutions provide a Hotfix for AEM MSM Inheritance breaking with deep     properties problem in the GitHub Repository

b)Absolute (e.g. /myProperty)

• Breaking the chain will cancel inheritance by adding the cq:LiveSyncCancelled mixin to ./myProperty and setting cq:isCancelledForChildren to true.
• Closing the chain will revert inheritance.

Fig - Properties in case of absolute path when inheritance cancelled

NOTE : When you re-enable inheritance, the live copy page property is not automatically synchronized with the source property. You can manually request a synchronization (rollout configuration) if this is required.

Demonstration Video On Properties of Page Properties Dialog:

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!

Thanks and Happy Learning.