Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Create TOC with multiple level

Avatar

Level 1

how can I create table of content of a page which has H2, H3,, H4.

 

I want al heading level to appear in TOC.

1 Reply

Avatar

Community Advisor

There are many ways to implement your required, but here's what you can try. 

  1. Create a section-container component (sling:superResourceType parsys or responsive-grid).
  2. The section-container will allow dialogue configurations to include a title & title header level.
  3. The section-container allows content components be added in its content body.
  4. Create a TOC component;
  5. The TOC component with one to one relationship with a Sling Model.
  6. The TOC component will have logic to search for all section-container components configured on the page and display the title & title header level properties.
  7. Complete.

The page will only be constructed with the section-container component. While the TOC component sites on top of the section-container component.

JCR View:

/content/my-site/page/jcr:content/par/toccomponent
/content/my-site/page/jcr:content/par/sectioncontainercomponent0
/content/my-site/page/jcr:content/par/sectioncontainercomponent1
/content/my-site/page/jcr:content/par/sectioncontainercomponent2
/content/my-site/page/jcr:content/par/sectioncontainercomponent3