Ad Code

Sunday, September 17, 2017

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.
image.PNG
Fig - Overlaying the resource
Example: Customization the consoles
overlays.PNG
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
overriding.PNG
Fig - Overriding the resource

override.PNG
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.

17 comments:

  1. Hey Saurabh,You are using overlay in both places under Invoking the Sling Resource Merger from your code. I think one of them, will be override.

    ReplyDelete
    Replies
    1. Yes Gaurav, You are right. Now, I have corrected that issue.

      Thanks for the informing us!!

      Delete
  2. Excellent article, congratulations.

    ReplyDelete
  3. Thanks for the article.

    can you provide an example of and

    ReplyDelete
    Replies
    1. I think it stripped my comment. eg. of relative-path-to-resource and absolute-path-to-resource

      Delete
    2. For your answer, I have added a use case in my blog. Please read and let me know if there is still any confusion.

      Delete
  4. Under section Overlaying the languages hierarchy
    there is a typo /apps//libs/wcm/core/resources/languages, this should be /apps/wcm/core/resources/languages.

    just to avoid copy-paste errors by other users.

    ReplyDelete
  5. I have use case like below where Node2 is including resource (Node1/child1). Node3 has property sling:resourceSuperType to override Node2 in case.
    When rendering Node3, only child2 is rendering. It should also render child3. Please suggest.

    Node1
    +child1
    +Child2
    -prop1
    -prop2
    +Child3
    -prop1
    -prop2

    Node2
    +child
    -rt = (granite/ui/components/foundation/include)
    path = /Node1/child1


    Node3
    +child3
    -resourceSuperType = /Node2/
    +child1
    +Child2
    -prop1
    -prop2

    ReplyDelete
  6. Indenting -
    Node1
    +child1
    +Child2
    -prop1
    -prop2
    +Child3
    -prop1
    -prop2

    Node2
    +child
    -rt = (granite/ui/components/foundation/include)
    path = /Node1/child1


    Node3
    +child3
    -resourceSuperType = /Node2/
    +child1
    +Child2
    -prop3
    -prop4

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hi Saurabh / Shivani,

      Do you have any idea about how to hide move button in dam, it appears when we select navigation (left side) and filter from the dropdown and select any of the asset I’m able to see Move option in the properties (right side) Which should be hidden for some particular users.

      Delete