Skip to main content Skip to navigation

CleverTOC Javascript

Overview

Sometimes we need to build a page of contents dynamically, based on a query that returns a list of pages or data list entries (e.g. glossary), and have the list of pages displayed in a specified format. The clevertoc.js utility code does just that. Provide it with a url (based on the Sitebuilder json api) and a template of the html code to be used for displaying each record returned, and it will create a sequence of clones of that template html, populated with the correct data for each record. The template might be for a list item, a paragraph, div, or any other DOM element that you want to repeat.

The results are styled using css referenced in the template and provided in the page (or a css include specified in the page). Variations on this allow for the keywords returned for each record to be listed, and actions to be attached to each keyword (for exampe to show a glossary definition, or to filter the list). The code is written using JavaScript object oriented programming (OOP) techniques, so that we can provide custom code for creating the copies of the template or the keywords and their actions.

A series of useful applications are shown and explained in the following pages.

Name Description
CleverTOC simple list
Clever TOC listing data list page items
CleverTOC with inline filtering
CleverTOC with separate keyword list
CleverTOC pre-filtered from url parameter
CleverTOC items in an accordian
Staff list with filters

Let us know you agree to cookies