Overview

This widget observes contents of a Mendix page for any header with a "toc" class assigned. The user can place an empty HTMLElement with tag "ul" and class "list-toc-generated" anywhere within the 'Table of Content' widget. The widget will insert list items for all headers up to configurable depth from 1 to 6.

This widget is intended to work in combination with the 'Document Generation' module and the 'Document Layout' widget.

Documentation

Typical usage scenario

This widget is useful when your app generates PDF documents from Mendix pages and you want a dynamically generated table of content based on the headers on your page. It is intended for, but not limited to be used in combination with the Document Generation module and the Document Layout widget.

Features and limitations

The widget is a container which can be placed on your Mendix page, for instance inside the body area of the Document Layout widget. The location of the actual table of content can be chosen freely inside the container, by placing an HTML Element with tag "ul" and class "list-toc-generated". The widget supports a depth between 1 and 6 in line with available HTML header tags.

The resulting PDF contains links from the table of content to the actual page. Therefore, a generated "id" attribute is added to the header element, if missing.

The widget comes with some basic styling for levels 1 to 3. In order the help the developer customizing the table of content, each entry has a style class "toc-element".  In addition, the level of each entry is indicated by another class "toc-element-level-1" up to "toc-element-level-6".

This widget cannot create table of contents for merged PDFs. The table of content will not contain page numbers. 

Dependencies

This widget has no direct dependencies. It is best used in combination with the Document Generation module and the Document Layout widget, though.

Installation

Just download the widget from the marketplace.

Configuration

Set the desired depth of the content tree in the properties of the widget. The default is 3. Place an HTML Element with tag "ul" and class "list-toc-generated" where you want the generated table of content to appear.

Known bugs

- The calculation of the table of content appears to trigger a bit too soon in the web view, so the table of content might disappear on-screen when interacting with the page. Results in the generated PDF document appear to be stable though.

- There are currently too many log messages for production environment

Frequently Asked Questions 

- Why is there a container-like widget, but not a widget for the table of content itself? The container is needed to define a react component that limits the part of the DOM that could be modified. Besides, having this container means, that you can have multiple table of contents on the same page (e.g. for each tab of a tab container). Sure, you could have an additional widget for the actual table of content as a cherry on top, but to bundle two related widgets, you would need an entire module. We want to start as simple as possible and go from there.