Custom and native AEM components

[Johnhenao10]

Is there a way to make a custom component but still allow using native components?

thank you so much

[aanchal-sikka]

@Johnhenao10 

The Custom, extended and the OOTB wcm core components can co-exist.

Each of the components would belong to component Group. By using template policies, we can configure if an entire component group or selective components should be configurable on a page. Using different Component Groups, authors can easily distinguish OOTB from custom component.

Few more details:

The OOTB wcm core components are accessed via proxy components (which are extended components with no customization. You can customize them if needed).

If you need to customize an OOTB component say Title:

- then create another title-abc component extending OOTB title

- Append a different component group.

- Customize and configure via template policy, to be available on a template

[Johnhenao10]

For example, here it allows me to make my custom component and adds the text component

<div class="custom-component">
<h2>Custom header</h2>
<div data-sly-resource="${'text' @ resourceType='foundation/components/text'}"></div>
</div>

But how could I make it a container or any type of component instead of text?

[Tanika02]

Hello @Johnhenao10 - 

To make your custom component act as a container and include other components instead of just the Text component, you can modify the markup and use the appropriate resource type for the desired component.

Here's an example of how you can modify your custom component to act as a container and include other components:

<div class="custom-component">
  <h2>Custom header</h2>
  <div data-sly-resource="${'path/to/your/component' @ resourceType='your/component/resourceType'}"></div>
</div>

In the above example, you can replace 'path/to/your/component' with the path to your desired component and 'your/component/resourceType' with the resource type of that component. By doing so, you can include any component of your choice within your custom component.

For example, if you want to include the Image component from the Core Components library, you can modify the markup as follows:

<div class="custom-component">
  <h2>Custom header</h2>
  <div data-sly-resource="${'path/to/image/component' @ resourceType='core/wcm/components/image/v2/image'}"></div>
</div>

Summarizing you actual question here : 

So, while including the component, you are still referencing the specific path to the component's resources in the AEM repository. However, the resource type is used by AEM to identify and render the component dynamically during runtime. The resource type provides flexibility, reusability, and decoupling benefits, as explained in the previous response.

[Manu_Mathew_ · Accepted solution]

@Johnhenao10 You could use the parsys component inside your custom component:

<div class="custom-component">
<h2>Custom header</h2>
<sly data-sly-resource="${'parsys' @ resourceType='wcm/foundation/components/parsys', decorationTagName='div'}"/>
</div>

 You could also proxy the parsys component and customize it according to your usecases.

[2490242973]

Yes

[BrianKasingli]

I am going to give you a simple answer, and it is yes. My understanding of your question is... in your project you'd like to use the AEM Core Components, button, and also have your own completely custom button component.

So say if you wish to create a button called "hero-button", then within the .context.xml, you do not need sling:resourceSuperType

But however, if you do wish to re-use the AEM Core Components, 

Under your /apps/my-site/button, in the .context.xml you can include sling:resourceSuperType="core/wcm/components/button/v2/button"

In theory, you will have two components in your project

• /apps/my-site/hero-button (completely custom, sling:resourceSuperType (not required))
• /apps/my-site/button (this is a proxy component, which means it inheriting from the parent sling:resourceSuperType (required)