Sling Resource Merger in AEM 6.3

Hello Everyone,
The Sling Resource Merger provides services to access and merge resources. It provides diff (differencing) mechanisms for both:

1. Overlays of resources using configured search paths
2. Overrides of component dialogs for the touch-optimized UI (cq:dialog), using the resource type hierarchy (by means of the property sling:resourceSuperType).

Note: sling:resourceMerger concept is basically used for Granite.So this concept is specifically applicable for touch UI.

1. Approach for Overlaying Resources: Resource Overlay works on the path which is having the same hierarchy in /apps. If there is a path in libs: “/libs/text/example”  then Its overlaying path can only be: “/apps/text/example”. This approach saves you from copying the entire structure of libs in apps when you need customizations.You can customize as much as required.

Fig - Overlaying the resource

Example: Customization the consoles

Reference: https://sgaem.blogspot.in/2017/03/display-name-instead-of-page-title-in.html

Fig - How Overlay works in Resource Merger?

2. Approach for Overriding Resources: This approach works on the property sling:resourceSuperType. This concept is also called inheritance of the resource in AEM.

Example: Configuring your page properties

Fig - Overriding the resource

Fig - How Override works in Resource Merger?

Goals of Resource Merger concept in AEM

1.Reduce the structure that is replicated from AEM and reusability of resources.
2.Ensure that any changes should not make in /libs.

Properties of Resource Merger

sling:hideProperties	String or String[]	Hide the properties,The wildcard(*)hides all.
sling:hideResource	Boolean	Indicates that the resource should be completely hidden with its children
sling:hideChildren	String or String[]	Hide the list of children of a particular resource. The wildcard(*)hides all the children.
sling:orderBefore	String	Contains the name of the preceding sibling.

Points to Remember

1.Overrides are not dependent on search paths.They use sling:resourceSuperType property to make a connection.
2.You must not change anything in /libs, The reason may be that when you upgrade your instance or apply any service pack/hotfix, It may be overwritten.So  Any customization you needed should be done in /apps.

Use cases of sling: ResourceMerger

1. Add a property
2. Redefine a property(not auto-created properties)
3. Redefined an auto-created property
4. Redefine a node and its children
5. Hide a property
6. Hide a node and its children
7. Hide Children of a node (while keeping the properties of the node)
8. Reorder nodes

Invoking the Sling Resource Merger from your code

The Sling Resource Merger includes two custom resource providers - one for overlays and another for overrides. Each of these can be invoked within your code by using a mount point:

• Overlay:
• purpose: merge resources based on their search path
• mount point: /mnt/overlay
• Usage: mount point + relative path
• Example: getResource('/mnt/overlay/' + '<relative-path-to-resource>');

• Override:
• purpose: merge resources based on their super type
• mount point: /mnt/override
• Usage: mount point + absolute path
• Example: getResource('/mnt/override' + '<absolute-path-to-resource>');

Since Long, I am trying to find a good example of explaining /mnt/overlay and /mnt/override concept in resource Merger. So finally I got a use case to justify with this concept.

Use Case: Recently I have gone through a scenario, where I want to add some more locales in the drop-down of page properties.

To know from where languages are getting listed out, I check the language widget in the page properties dialog.

Fig - language widget in the page properties dialog

So to populate languages, cq/gui/components/common/datasources/languages is playing an important role.

If I check the language.jsp under /libs/cq/gui/components/common/datasources/languages, you can see that all the languages are coming from /libs/wcm/core/resources/languages.

Fig - Source of language population in the dropdown

Now if I add some more languages in /apps/wcm/core/resources/languages, then the jsp will start taking the values from /apps not /libs, because /apps is having preference over /libs.

But I don’t want to duplicate all the locales in apps as well. So what to do?

1. Overlaying the languages hierarchy: Just add all the new locales in /apps/wcm/core/resources/languages and now overlay the language.jsp with the following modifications.

Fig - Merging the new locale and existing locale using mnt overlay

2. Overriding the languages hierarchy: Add new locales in any hierarchy example I have taken it “/apps/languages/core/resources/languages” and add a property sling:resourceSuperType to /libs/wcm/core/resources/languages.

Fig - Overriding the languages which are available under libs

Overlay the language.jsp with the following modifications.

Fig - Merging the new locale and existing locale using mnt override

Demonstration Video on the Sling Resource Merger (Overlaying + Overriding the Resource):

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.