I have a custom component and I want to inherit OOTB image component and text component in my newly created component.
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
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
@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
How can inherit CQ dialog of the components
@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
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/...
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
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
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies