portiva-o365 / webpart-tableofcontents

This web part generates a table of contents on a Modern Page based on headings used in the text web parts.

Table of Contents web part

The Table of Contents web part shows on a modern page a table of contents of all headings / paragraphs on the page. When the end user clicks an item in the table of contents, the page jumps to the head in the page.

Repository

• Repository can be found here > How to use the repository?
• SPPKG files > How to use the package?

Features

• Automatic generator for a table of contents on a modern page
• Indicate which texttype - i.e. Heading 1, 2 or 3 - should be used
• Generate a link Back to Top under each paragraph option
• Adjust title, labels and icons options
• Adjust the background color of the table of contents option
• Export and import settings, useful to quickly apply the same settings on other pages option
• Multiple languages supported; Dutch and English

Building and packaging

• run command "npm run package" inside rootfolder.

Images

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

webpart-tableofcontents's Issues

Add parent and child level

Awesome webpart. Looks and works great. Would it be possible to optionally add H2 and H3 as child categories?

• H1
  • H2
    • H3

TOC not working in IE11

The new version of the TOC web part is working with Edge and Chrome but with IE11 only the first selected header is visible. Other links are blank. I did use a setting to show Header 2 level titles as links in TOC and had multiple sections on the page with headers.

Downloaded package does not show the TOC

When downloading the package file only, the table of contents does not show any content. It just stays in the edit mode of the web part.

Steps:

• install package
• add to page
• add text web part and add text content with H2
• save the page

The web part does not show the H2 in the tabl of contents.

Pinning shortens content

Hi, a issue in the newest version 1.0.0.17. When Pinning is activated, the shortens the content in the ToC WebPart.

with pinning:

without pinning, it looks good:

Table of content webpart stopped displaying headers from last 4 days.

Initially the webpart worked fine and it has displayed all the headers, worked as expected. The functionality is not working from last few days in production environment. now I am able to see web part main heading. please find attached screenshot for reference. If anyone facing same issue, please share thoughts and inputs. Thank you for all help.

Mobile view issue

Another thing I found @Portiva-O365 is that the webpart doesn’t view properly on a mobile device (iOS 13.3.1). It is partly off screen.

Screenshot: