Introduction

Adding a table of contents to your publication or ebook provides end users with a hierarchical view of the content (we call it a contents tree view or even TOC). Users click a topic listed in the table of contents, and are taken directly to the information they are looking for.

  You can design your table of contents so that the HTML pages (or PDF documents) contained in your publication are organized by subject or by category. You can organize your subject topics in the table of contents using icons that identify main topics and subtopics. For example, if you use the default icons, HTML Executable provides a "chapter" (or header) icon for main topics and a "page" icon for subtopics. You can of course change the default icons: special icons indicating new or updated pages are available to help end users quickly scan the table of contents for new information.

  When an end user opens the table of contents and clicks a topic title (or press Return), the HTML page associated with that title will open.

  Updating the TOC at runtime

Configuring TOC properties

You can modify the properties for the contents tree thanks to the Application Settings => Components => Contents Bar object.

You may want to show all topics or show only those topics that beginning users are likely to need. When designing a table of contents, keep the following in mind:

•Book icons represent headings. Double-clicking a book icon enables users to see the subentries under that heading. Subentries can be other book icons or page icons.

•Page icons represent topics. Double-clicking a page icon enables users to display a topic or run a macro.

Managing TOC entries

You can manage your TOC visually using the Tree editor as shown on this snapshot:

•Add Header: This option allows you to add a new "node chapter" to the contents tree. Chapters are generally not associated with any HTML page, but you can assign HTML pages or PDFs to chapters if desired. You will be prompted to enter the name of the chapter.

•Add Page: This will prompt you to select one or more HTML page(s) or PDF(s) from the publication's file list, and then the associated page node(s) will be created. The title of the node is directly read from the HTML code (`<TITLE>` tag).

•Remove: Use this button to delete an existing node.

•XML Tools: Click this, then select Export to save your Table of Contents (TOC) to an external XML file. Enter the filename when prompted. You can edit this XML file with your preferred XML editor or even Notepad, and it can be shared with different projects. To import an XML file back into the project, click XML Tools, select Import, and choose the file to import.

•Up and Down buttons: Use these to move nodes within the TOC.

•Parent/Child buttons : If you want a node to become a child of another node, use these buttons. The left button will make the selected child node have the same parent as its own parent. The right button will make the selected node become the child of the previous one. Use these four buttons (Up, Down, Parent, Child) to arrange and reorder the nodes as desired.

•Drag/Drop operations: You can move and exchange node positions using drag and drop. Two modes are available: right-click on the tree editor, and you can choose between "Exchange dropped and target nodes" (the node being dragged will swap places with the destination node), and "Move dropped node to new location" (the node is moved to just before the destination node).

•Delete Entire TOC: To delete all nodes of the Table of Contents at once, right-click and choose the context menu command "Delete Entire TOC".

• 

HTML and multiline support

The Table of Contents (TOC) feature in HTML Executable supports the use of HTML tags within the title elements. This means you can use tags such as `<b>` for bold text, `<i>` for italicized text, and so on, to further customize your TOC entries. Moreover, it also supports multiline title entries. However, please note that multiline support is only available if the user initially sets a greater height than the default. This can be done by going into the TOC properties and adjusting the `itemheight` property. The default value of `itemheight` is 18, so if you intend to use multiline titles, you would need to set it to at least 36 or higher, depending on your needs.

Editing TOC entries

To edit a TOC entry, just select the node you wish and its properties will be listed in the node editor (below the tree editor). There are four properties:

•Title indicates the title of the entry that will appear in the contents tree.

•URL defines the HTML page to be displayed when end users click on the entry in the contents tree. You can click the button on the right with '...' to select an existing page in the publication's file list. You are even allowed to use HEScript calls, external Internet links like https://www.gdgsoft.com/. URL is optional: in case you leave the field blank, nothing will happen when end users click on it (example: chapter nodes).

•ImageIndex defines the icon to be displayed in the contents tree. Click on the '...' button to select an icon visually from the default icon list.

•Open ImageIndex defines the icon to be displayed when the entry is selected by the user in the TOC, or when the entry has children that are visible. Generally, ImageIndex and Open ImageIndex have the same value, except for chapter nodes.

•Target: optional, indicates the frame target for the TOC entry. It can be a special HTML Executable target.

•Expanded: shows subentries under the heading at startup.

•Visibility HEScript function: for advanced users only. Reference to a Boolean HEScript function that defines whether the TOC entry is visible or not. See dynamically updating the TOC.

How to add/export custom images to the TOC

You can import custom images and associate them to the TOC entries. In the node editor, select the ImageIndex property and click the '...' button to open the SVG Image Manager:

Click "Add" and select the image file you want to import. It must be in SVG format.

Using it for a browse sequence

The Table of Contents can be used to define a browse sequence.

Updating the TOC at runtime

You can modify the TOC at runtime thanks to HEScript: see the Dynamically updating the TOC page.