Datadriven Block List

A datadriven list component that can accommodate a variety of styles and controls.


The list can be client side filtered via a call to widgetVar.filter(query). The helper tag filterFor can be used to add filtering capabilities to any text input.

The li tag takes an optional chrevron attribute to render a chrevron to the right of the element, a title to render as a list item header, and also a link attribute that will wrap the children of the li in an anchor with href to the attribute value.


<h:inputText pt:placeholder="Search" id=search/>

<t:filterFor widget="movies" target="search"/>

<t:list title="Movies" value="#{controller.movies}" widgetVar="movies">
    <t:li chevron="true" link="#">#{it.title}</t:li>

A datadriven list component that can accommodate a variety of styles and controls.

Tag name list
Component type io.tornadofaces.component.List
Renderer type io.tornadofaces.component.ListRenderer
styleClassStyles to apply to the list section.false
titleA title to be displayed as the list header.false
filterFnA JavaScript function to filter the list when widget.filter() is called. The function is called with each item in the list false
valueThe List of elements, as a value expression.true
highlightFilterHighlight text in filtered elements. Default true.false
hideEmptyHide the section completely if the value is of zero length (empty list). Default false (will render title if empty).false
varThe variable that will refer to each element in the list. Defaults to "it"false
renderedShould this component be rendered?false
Client Side API

Widget: TornadoFaces.widget.List

Method Params Return type Description
setFilterFn(filterFn) filterFn: Function that will be called to filter then list via filter() function Override the default filter function used for client side filtering. The method will be called with the parameters (item, query, index) and should return true or false to indicate that the given item should be rendered.
filter(query) query: The query string to filter the list by String The default filterFn looks for the query text somewhere within each item. A custom filterFn can be provided via setFilterFn for finer grained control.
Advanced usage

The markup for the list is very basic, and you can easily replicate the markup with a standard repeater component if necessary. Please refer to the Foundation For Apps Documentation for more information.