HOWTO: How to Create a Complex Nested List

mikeraynham edited this page May 20, 2011 · 1 revision
Clone this wiki locally

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.