Expand my Community achievements bar.

Join us in celebrating the outstanding achievement of our AEM Community Member of the Year!

Table of contents Delegation

Avatar

Level 3

Hi, Table of contents is a core component and it seems to suit our project requirements well. I have created a copy of it with supertype pointing to the ootb component. But, I do not require the page name that's displayed as part of the TOC list. I tried to check  the implementation and seems like a filter is being used which I am unable to delegate. Moreover, the rendering of the component is not in html and I am trying to see how the rendering is done. Any information on the end-end flow of the component functionality will be useful to achieve my requirements. Thanks !

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

5 Replies

Avatar

Community Advisor

Hi,

 

AFAIK, the table of contents doesn't display any "page" information (if we're talking about an AEM page). Instead, it relies on the HTML rendered on the page. It scans the content and based on what it finds, it generates the table of contents. You can check that code here how this is being rendered: https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w... 

 

So, if you need to change the text in the ToC, you’ll need to update the title of the corresponding element. For example:

EstebanBustamante_0-1736273946541.png

 

 

I hope this helps.

 



Esteban Bustamante

Avatar

Level 3

Thank you for the reply @EstebanBustamante . I understand the functionality works by parsing the h1 - h5 tags, but what about the Title/Pagename "Esteban Demo site". I tried to exclude the class name that page title uses but it didn't work. I want to omit the title it displays.

Avatar

Community Advisor

Sorry, I misunderstood your question. In that case, what Arun pointed out will work. You need to add a "unique distinctive class" to your title component (the <h> element), and then include this class in the Table of Content component policy.

 

Something like this:

EstebanBustamante_0-1736341739199.png

Then in the component policy: 

EstebanBustamante_1-1736341801340.png

Result, the first title has the "ignore-toc" class and won't appear in the ToC component:

EstebanBustamante_2-1736341846791.png

 

You could also provide an option for authors to toggle the "ignore-toc" class, allowing them to choose whether to display or exclude the title from the Table of Contents.

 

Hope this helps

 



Esteban Bustamante

Avatar

Level 3

Thank you @arunpatidar and @EstebanBustamante , as per suggestions I added a unique class and then added it to the list of classes to be ignored in TOC style policy. It worked.