Creation of new component from projects existing component | Community
Skip to main content
M
MaheshaGu
Level 2
October 3, 2024
Solved

Creation of new component from projects existing component

  • October 3, 2024
  • 2 replies
  • 924 views

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

 

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by konstantyn_diachenko

    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>

     

    2 replies

    konstantyn_diachenko
    Community Advisor
    konstantyn_diachenkoCommunity AdvisorAccepted solution
    Community Advisor
    October 3, 2024

    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>

     

    Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
      M
      MaheshaGuAuthor
      Level 2
      October 5, 2024

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

      ambersingh121
      ambersingh121
      Level 2
      October 5, 2024

      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

        M
        MaheshaGuAuthor
        Level 2
        October 5, 2024

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

        Need to think your scenario as well.

        Terms & ConditionsAccessibility statement

        Loading footer...