Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Create TOC with multiple level

Avatar

Avatar
Ignite 1
Level 1
purushothamanv
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
Top badges earned
Ignite 1
View profile

Avatar
Ignite 1
Level 1
purushothamanv
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
Top badges earned
Ignite 1
View profile
purushothamanv
Level 1

17-02-2020

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

 

I want al heading level to appear in TOC.

Replies

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

610 likes

Total Posts

587 posts

Correct Reply

230 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

610 likes

Total Posts

587 posts

Correct Reply

230 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

08-04-2020

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