Creation of new component from projects existing component

[MaheshaGu]

Hello Team,

In my project, I have a component:  /apps/abc/components/myComponent/
having: sling:resourceSuperType : one of the core component

Now, I need to create new component: myTestComponent for the same project under "commerce" section. /apps/abc/components/commerce/myTestComponent/
Functionality wise, this is 90% similar to the above myComponent

What is the best way to create the new component: myTestComponent

obviously copy pasing the html file, cq:dialog of myComponent is not the right choice.

Can someone guide me?

Thanks in advance

[konstantyn_diachenko · Accepted solution]

Hi @MaheshaGu,

Create /apps/abc/components/commerce/myTestComponent with sling:resourceSuperType="abc/components/myComponent". It will automatically inherit cq:dialog. If you need to override some dialog representation you can use Sling Resource Merger: https://sling.apache.org/documentation/bundles/resource-merger.html .

To re-use functionality of myComponent you can split myComponent.html on few files and extract logic that can be overridden in myTestComponent to a separate file with meaningful name and include it in the component. Example:

/apps/abc/components/myComponent

myComponent.html

<div>
...
   <sly data-sly-include="part.html"></sly>
...
</div>

part.html

<div>
   <p>This is part from myComponent</p>
</div>

Under /apps/abc/components/commerce/myTestComponent you will need to have only part.html:

part.html

<div>
   <p>This is part from commerce/myTestComponent</p>
</div>

[MaheshaGu]

Thanks a lot @konstantyn_diachenko  for your dedicated effort to explain section by section. For my application scenario, this is the perfect solution.

[ambersingh121]

Hi @MaheshaGu,

The solution suggested by @konstantyn_diachenko is an excellent one. Although I would like to propose a different approach here.

Before creating a new component we should really introspect and analyze if we do we need a new one. Increased number of custom components more often than not, tend to increase the overall code complexity and long term maintenance costs.

In your use-case you mentioned the two custom components are "90%" similar functionality wise.

We can look to create two different variations in the same component instead of creating a new one. These variations can be controlled using a simple select field in the component dialog which allows to choose one of the variations. In the component HTL, use data-sly-template or data-sly-include construct to include the markup and clientlib of the selected variation.

This will help in keeping the component count low and at the same time leveraging the core component through sling inheritance.

Do let me know if this approach makes sense for your use-case.

Regards,

Amber

[MaheshaGu]

Thanks @ambersingh121 for your effort to think and explain in a different way.

Need to think your scenario as well.