HOWTO: How to Create a Complex Nested List

Introduction

HOWTO: How to Create a Simple Nested List explained how to create a self-referencing list in Bricolage, and showed how this could be output as XHTML.

This HOWTO takes the nested list a step further by allowing the author to determine the type of nested list (ordered or unordered), and it also allows multiple paragraphs per list item.

Elements

Three elements are required:

List Item

Publishing → Element Types → Add a New Element Type

Key Name	Name	Content Type
list_item	List Item	Subelement

Add a custom field:

Widget Type	Key Name	Label	Min. Occur.
Text Area	paragraph	Paragraph	1

List Nested

Publishing → Element Types → Add a New Element Type

Key Name	Name	Content Type
list_nested	List Nested	Subelement

Save List Nested and add it as a subelement of itself.
Add List Item as a subelement.

List

Publishing → Element Types → Add a New Element Type

Key Name	Name	Content Type
list	List	Subelement

Add a custom field:

Widget Type	Key Name	Label	Min. Occur.	Max. Occur.	Default Value	Options, Label
Radio Buttons	list_type	List Type	1	1	ul	ul,Unordered ol,Ordered

Add List Nested as a subelement.

Element Summary

List is the top-level element, and its sole purpose is to provide a container for the List Type selection. List Item is a repeatable text field which is used to create paragraphs within list items. Nested List contains List Item, and it can be nested within itself.

Template

Template → New Template

Template Type	Category	Element Type
Element	/	list

/list.tt

[% BLOCK list_nested %]
    <[% tag %]>
    [%~ FOREACH e IN list.get_elements() %]
      [%~ IF e.has_key_name('list_item') %]
        <li>
          [%~ FOREACH p IN e.get_elements('paragraph') %]
            <p>[% p.get_value() %]</p>
          [%~ END %]
          [%~ PROCESS list_nested
              list = loop.next()
              IF loop.next.has_key_name('list_nested')
          %]
        </li>
      [%~ END %]
    [%~ END %]
    </[% tag %]>
[%~ END %]

[%~ PROCESS list_nested
    tag  = element.get_value('list_type')
    list = element
%]

The value from list_type in the List element is used to create the appropriate HTML tag (ul or ol). A Template Toolkit BLOCK is created so that the list can be called recursively, thus allowing for the creation of nested lists.

Adding the List element to a story allows the author to add lists with an arbitrary number of levels.