Custom Component in Content Fragment

[Ronnie09]

I have created common dialog properties in the /apps/my-project/component/commondialog/.....items/ ... I want those dialog properties to appear as it is on Content Fragment component.

I tried 2 possible ways but they didn't worked

• 
  sling:resourcesuperType =
  /apps/my-project/component/commondialog/cq:dialog/content/items/tabs/items/properties/items/columns/items/column/items/text
  
  
• sling:resourcesuperType =
  /apps/my-project/component/commondialog/cq:dialog/content/items/tabs/items/properties/items/columns/items/column/items

[aem1234567]

For sling override to work, you will need to extend the component and not just dialog. So in your case,

sling:resourcesuperType =
my-project/component/commondialog

You do not need to provide path until dialog. Hope this helps!

[kautuk_sahni]

@Ronnie09 

You tried to make the common dialog properties appear on the Content Fragment component by setting the sling:resourcesuperType property to the path of the common dialog properties. However, this didn't work because the sling:resourcesuperType property only applies to the root node of a component. In other words, it only applies to the node that represents the entire component. The common dialog properties are nested within the component, so the sling:resourcesuperType property doesn't affect them.

To make the common dialog properties appear on the Content Fragment component, you need to create a new component that inherits from the common dialog properties component. This new component will have all of the same dialog properties as the common dialog properties component, and they will be available in the Content Fragment component.

Here are the steps on how to create a new component that inherits from the common dialog properties component:

1. Create a new component in the /apps/my-project/components folder.
2. In the component's properties, set the jcr:primaryType property to cq:Dialog.
3. Set the sling:resourceSuperType property to the path of the common dialog properties component.
4. Save the component.

Now, the new component will have all of the same dialog properties as the common dialog properties component. You can use the Content Fragment component to add this new component to your pages.

[aanchal-sikka · Accepted solution]

hello @Ronnie09 

If the new component is an extension of " Content Fragment component.", then use sling:resourceType at the component level. As suggested by @kautuk_sahni  @aem1234567 

Otherwise, if you intend to reuse a part of dialog, then use        

sling:resourceType="granite/ui/components/coral/foundation/include"

How to configure it, is explained in blog.

https://sourcedcode.com/blog/aem/aem-touch-ui-granite-ui-tabs-example-code