How can I inherit more than one component ? | Community
Skip to main content
M
muneshgoyal123
July 6, 2023
Solved

How can I inherit more than one component ?

  • July 6, 2023
  • 4 replies
  • 1733 views

I have a custom component and I want to inherit OOTB image component and text component in my newly created component.

Best answer by Shahid_Siddiqui_04

You can do for the OOTB inherit 

<div data-sly-resource="${'par1' @ resourceType='core/wcm/components/image/v2/image'}"></div>

and for your custom component you can simply apply the above code with your component path,

for eg, I am taking wknd project then your path will be: 

<div data-sly-resource="${'par2' @ resourceType='wknd/components/yourcomponent'}"></div>

 

Now if you want to include only one field from a component then you can use below code and use it in HTL,

for eg. a component name nearbycomponent have 4 field and you want only one field then you can use the below code:

 

<firstName jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/include" path="/apps/wknd/components/nearbycomponent/cq:dialog/content/items/column/items/firstName"/>

Here, I have take firstName field from nearbycomponent. you can just paste this code in your newly created component cq dialog. and use in your HTL by properties object or by calling model.

Thanks,

let me know for any other help

4 replies

ayush-anand
ayush-anand
Level 4
July 6, 2023

@muneshgoyal123 If you want to add OOTB image and text component inside your component, then you can try the below code in your HTL.


<div data-sly-resource="${'par1' @ resourceType='core/wcm/components/image/v2/image'}"></div>

<div data-sly-resource="${'par2' @ resourceType='core/wcm/components/text/v2/text'}"></div>

 

Hope this helps.

 

Regards,

Ayush

    M
    muneshgoyal123Author
    July 6, 2023

    How can inherit CQ dialog of the components

      ayush-anand
      ayush-anand
      Level 4
      July 6, 2023

      @muneshgoyal123 You can create a node parallel to the nodes of other tabs node and add the below properties. You can specify the path of the tabs of cq:dialog of the OOTB components which you want to include.

       

      sling:resourceType="granite/ui/components/coral/foundation/include"
path="core/wcm/components/text/v2/text/cq:dialog/content/items/tabs/items/properties"/>

      Regards,

      Ayush

        Satyam_Gupta
        Satyam_Gupta
        July 6, 2023

        Hi @muneshgoyal123 

        As your requirement you can use data-sly-resource to add a component inside a component as we know

        data-sly-resource is used to inject components. 

        according to your need @ayush-anand  already provide solution.

        But in some case,

         we don`t know which component we want to add,

        sometine it is OOTB and sometime it is custom component so, when we go for this scenario we can use 

         

        data-sly-resource="${resource.path @                         resourceType='wcm/foundation/components/parsys/newpar', appendPath='/*'}
         
        this will provide a placeholder where you can add a component which you want it may be OOTB or it may be Custom Component. 
          Shahid_Siddiqui_04
          Shahid_Siddiqui_04Accepted solution
          Level 2
          July 6, 2023

          You can do for the OOTB inherit 

          <div data-sly-resource="${'par1' @ resourceType='core/wcm/components/image/v2/image'}"></div>

          and for your custom component you can simply apply the above code with your component path,

          for eg, I am taking wknd project then your path will be: 

          <div data-sly-resource="${'par2' @ resourceType='wknd/components/yourcomponent'}"></div>

           

          Now if you want to include only one field from a component then you can use below code and use it in HTL,

          for eg. a component name nearbycomponent have 4 field and you want only one field then you can use the below code:

           

          <firstName jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/include" path="/apps/wknd/components/nearbycomponent/cq:dialog/content/items/column/items/firstName"/>

          Here, I have take firstName field from nearbycomponent. you can just paste this code in your newly created component cq dialog. and use in your HTL by properties object or by calling model.

          Thanks,

          let me know for any other help

            Terms & ConditionsAccessibility statement

            Loading footer...