Custom and native AEM components | Community
Skip to main content
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Manu_Mathew_

@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.

3 replies

aanchal-sikka
Community Advisor
aanchal-sikkaCommunity Advisor
Community Advisor
June 28, 2023

@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

 

Aanchal Sikka
    J
    Johnhenao10Author
    Level 2
    June 28, 2023

    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
      Tanika02
      Level 7
      June 28, 2023

      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.

        B
        BrianLi1
        Level 2
        June 28, 2023

        Yes

          BrianKasingli
          Community Advisor and Adobe Champion
          BrianKasingliCommunity Advisor and Adobe Champion
          Community Advisor and Adobe Champion
          June 28, 2023

          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)
            Terms & ConditionsAccessibility statement

            Loading footer...