HOWTO: How to Create a Complex Nested List

mikeraynham edited this page May 20, 2011 · 1 revision

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.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.