How can I inherit more than one component ?

[muneshgoyal123]

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

[ayush-804]

@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

[muneshgoyal123]

How can inherit CQ dialog of the components

[ayush-804]

@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

[aanchal-sikka]

@muneshgoyal123 

In order to reuse the dialogs of other component, you can use https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

https://competitiveprogrammingarchives.home.blog/2020/05/09/aem-reusing-touch-dialog-fields-tabs-usi... 

[Satyam_Gupta]

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-804  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 · Accepted solution]

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