Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

How can I inherit more than one component ?

Avatar

Level 1

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

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 2

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

View solution in original post

6 Replies

Avatar

Level 4

@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

Avatar

Level 4

@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

Avatar

Level 1

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. 

Avatar

Correct answer by
Level 2

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