How do you configure an extended core component?

[Art_Bird]

I'm reading the docs on the core Table of Contents Component. The GitHub readme says "./includeClasses - defines an array of strings representing the configured class names to include in the TOC." Where do you add the ./includeClasses property and does it need a true value set for it to work?

I've read the docs and clearly missing something.

Link to GitHub readme for Component Policy Configuration Properties - https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

[arunpatidar]

Hi @Art_Bird 
Please check https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/t... 

[partyush · Accepted solution]

Hi @Art_Bird 

When extending an AEM core component, you typically achieve configuration through a process called "overlays." Here's how to configure the "./includeClasses" property for your custom Table of Contents component:

1. Create a New Component:

   • In CRXDE Lite, navigate to your project's /apps directory.
   • Create a folder structure mirroring the core component's path (e.g., /apps/yourproject/components/content/toc if the core component is at /libs/foundation/components/toc).

2. Define the Overlay:

   • Inside your new component folder (e.g., /apps/yourproject/components/content/toc), create a file named .content.xml.
   • Within this file, define a node of type cq:component that inherits from the core component using the sling:resourceSuperType property. Here's an example:
   XML

   <cq:component xmlns:sling="http://sling.apache.org/sling/sling-content/1.0"
                jcr:primaryType="cq:Component"
                sling:resourceSuperType="/libs/foundation/components/toc">
   
     </cq:component>

3. Set the "./includeClasses" Property:

   • Inside the cq:component node you created, add a child node of type sling:property. Set the following attributes for this node:
     • name: Set this to ./includeClasses.
     • value: Set this to an array of strings representing the class names you want to include (e.g., value="['MyCustomClass1', 'MyCustomClass2']").

   Here's the complete example with the "./includeClasses" property:

   XML

   <cq:component xmlns:sling="http://sling.apache.org/sling/sling-content/1.0"
                jcr:primaryType="cq:Component"
                sling:resourceSuperType="/libs/foundation/components/toc">
   
     <sling:property name="./includeClasses" value="['MyCustomClass1', 'MyCustomClass2']" />
   
     </cq:component>
   
   
   
   
   

• This approach leverages AEM's content repository (CRX) to configure the extended component.
• You don't need to set the property to "true". The presence of the property with the desired value (the array of class names) is sufficient.
• Remember to activate your changes after saving the .content.xml file.
  
  

Thanks 

[RikVanB]

Hi @Art_Bird 

You can just extend the Table of Contents Component like they did with the Byline Component in the official course of Adobe: https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-wknd-tutorial-de...

Just make sure that the sling:resourceSuperType is pointing to the right Core Component, in this case core/wcm/components/tableofcontents/v1/tableofcontents.

If you do this all the configuration options like includeClasses will be available on your extended core component.

Hope this helps!

Greetings

Rik

[EstebanBustamante]

@Art_Bird Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community

[EstebanBustamante]

@Art_Bird ?