Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Resuing the component

AdobeID24
Level 6
Level 6

Any Example of reusing one component A to make  90% identical component B ----> Most preferrally how we can do by using sling script resolution scheme ?

1 Accepted Solution
Anudeep_Garnepudi
Correct answer by
Community Advisor
Community Advisor

@AdobeID24 

Make Component A as parent(sling:resourecSuperType) to Component B.

  1. Create Component B
  2. Delete all the resources under Component B (will get 100% inheritance)
  3. Add your override to Component B

View solution in original post

6 Replies
Anudeep_Garnepudi
Correct answer by
Community Advisor
Community Advisor

@AdobeID24 

Make Component A as parent(sling:resourecSuperType) to Component B.

  1. Create Component B
  2. Delete all the resources under Component B (will get 100% inheritance)
  3. Add your override to Component B

View solution in original post

AdobeID24
Level 6
Level 6
@Anudeep_Garnepudi ...Thanks for the reply ...yeah thats the classic way of doing that ..Actually I am more interested in some scenerio where two almost identical component A and B resuing the different different script by sling resolution method ...supoose product.test1.html..and product.test2.html...or one level inside the component and on same level script ...As we know thta nearest script to the resource getting callled will bebest match for the sling ...using that kind of facilities can we make two componnet //if you have any real time use case on that please let me know .Thanks
Anudeep_Garnepudi
Community Advisor
Community Advisor

@AdobeID24

If you want to reuse the markup between components.

  • If Component A is parent of Component B, split the markup and include in main html

 

component-a.html
<div>
...
<sly data-sly-include="reuse.html"/> (or)
<sly data-sly-include="reuse.selector.html"/>
...
</div>

 

 component-a

     component-a.html

     reuse.html

component-b (sling:resourceSuperType: component-a)

     reuse.html

  • If component A and component B are not having relation 

include reuse.html in both component-a.html and component-b.html

  • You can create a HTL template and call in both the components(you can pass parameters also)
Ankur_Khare
Community Advisor
Community Advisor

Its same as we inherit any core component, so to reuse something u need to inherit the component and add the changes required for that component.

AdobeID24
Level 6
Level 6
Hi @Ankur_Khare , Thanks for the reply ...yeah thats the classic way of doing that ..Actually I am more interested in some scenerio where two almost identical component A and B resuing the different different script by sling resolution method ...supoose product.test1.html..and product.test2.html...or one level inside the component and on same level script ...As we know thta nearest script to the resource getting callled will bebest match for the sling ...using that kind of facilities can we make two componnet //if you have any real time use case on that please let me know .Thanks
BrianKasingli
Community Advisor
Community Advisor

You can do this via AEM's component building concept, overlay. An example is what you asked, there's an old but effect video from youtube where you can see learn how to create an overlay component, https://www.youtube.com/watch?v=jmzLzvtCSWY&ab_channel=AEMandDevopsTutorial