Skip to main content
Skip table of contents

scanHeadings

A logic command that finds all the headings of an HTML document and stores data about the headings into a Collection.

By default, scanHeadings seeks out all the standard HTML heading elements from <h1> to <h6>. With the selectors attribute it is possible to customize this by providing a set of element or class names that the command will look for instead. With either the default or custom selectors, scanHeadings only picks out elements that have the id attribute defined.

The resulting Collection will contain Map values in the order of the headings' appearance; each of these Maps contains the following entries:

  • level - A Number value that is the level of the heading, as defined by the order of the provided selectors. With the default selectors, <h1> is level 1, while <h6> is level 6.

  • text - A String that is the text content of the heading element and its possible descendant elements.

  • href - A String that is the heading element's id preceded by a #. This can be used with href to create a link to the heading.      

  • numbering - A Collection that contains the sequential number of headings of the heading's own level, as well as the levels above its level. For example, if this is the second level 3 heading under the fifth level 2 heading under the first level 1 heading, the Collection would contain the Numbers 1, 5 and 2 in this order.  

Attributes

var

Required

Value type

EL-evaluated

Yes

String

No

Defines the name of the variable that will hold the Collection of found heading data. See the command's main documentation about details of the Collection's contents.

file

Required

Value type

EL-evaluated

Yes

File

Yes

Defines the HTML file whose headings this command will seek. The resolved value is therefore expected to be a File whose type is HTML.

selectors

Required

Value type

EL-evaluated

No

Collection

Yes

Defines a set of element and/or class names that the command treats as headings. The resolved value is expected to be a Collection of String values, each String being either of these two CSS-like selectors:

  • .class - Any String starting with a dot is a class selector. Any element whose class attribute contains this String is treated as a heading.

  • element - Any String that doesn't start with a dot is an element selector. Any element whose name is this String is treated as a heading.

The order in which the selector Strings are in the Collection defines the levels of the headings, with any headings matching the first selector being headings of level 1, those matching the second selector being headings of level 2, and so on.

If undefined, a Collection containing the following selectors in this order is used: "h1", "h2", "h3", "h4", "h5", "h6"  

Examples

Use the selectors attribute to have scanHeadings adapt to different document structures. For example, if the elements that should be treated as headings are <div> elements with specific classes, give the command a Collection of appropriate class selectors. The following example finds all elements with a defined id whose class attribute values contain either "product-group-name" or "product-name", with owners of the first class being first level headings and those with latter class being second level headings:

CODE
<setCollection var="selectors"><addItem value=".product-group-name"><addItem value=".product-name"><scanHeadings var="headingData" file="${composedDoc}" selectors="${selectors}">

The Collection produced by scanHeadings could then be used to create a table of contents or a navigation tool in a Screen. Here's the previous example's data being used in HTML:

CODE
<div class="product-links"><div dyn-repeat="headingData" dyn-repeat-var="heading" dyn-class="product-link-level-${heading.level}"><a dyn-content="heading.text" dyn-href="heading.href"></a></div></div> 

The numbering data for the headings is provided in a Collection containing all the components for the heading's number. The previous example could have numberings like "1.1." and "2.5." included as follows:

CODE
<div class="product-links"><div dyn-repeat="headingData" dyn-repeat-var="heading" dyn-class="product-link-level-${heading.level}"><span dyn-repeat="heading.numbering" dyn-repeat-var="levelNum" dyn-content="${levelNum}."></span> <a dyn-content="heading.text" dyn-href="heading.href"></a></div></div>
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.