Repeater Elements#

Repeater Elements are markup elements that are bound to a database query or function, rendering themselves (and their children) for each result of the query/function.

The element and its subtree will be rendered as many times as there are objects in the query result. A repeater element is the only element that can make new Keywords available to its child elements. This is called Data Binding.

The following screenshot shows an example of a repeater element of type div in a page, and the resulting output. Repeater elements will be diplayed with a special icon in the Pages Tree View.

The child element of the div is a Content Element with a simple Template Expression.

Configuration

Data Key

The data key of a repeater element is the name of the keyword that contains the current element of the result iteration.

Advanced Repeaters

In more recent Structr versions the to_graph_object() function allows using nested arrays as repeaters. Normally only lists of “real” graph objects (nodes) could be used in repeaters. With the updated repeater functionality, lists of (almost) arbitrary elements can be used as a data source for repeaters. The only caveat is that the elements have to be objects - this is why the to_graph_object() function wraps certain elements:

1. Strings are wrapped in an object and the string value is put in the key value
2. Nested arrays are wrapped in an object and the array is put in the key values

Example 1 (simple repeater):

Repeater Config: Data Key = project, Repeater Function Query=

{
    return Structr.toGraphObject( [ "Project 1", "Project 2", "Project 3", "Project 4" ] );
}

${project.value} would correspond with the individual strings.

Example 2 (nested repeater):

Repeater Config: Data Key = project, Repeater Function Query=

{
    return Structr.toGraphObject([
    	["Project 1", 10, "Site A"],
    	["Project 2", 4, "Site B"],
    	["Project 3", 7, "Site C"],
    	["Project 4", 3, "Site D"],
    ]);
}

${project.values} would correspond with the contained arrays and could be used in a nested repeater with the following configuration:

Nested Repeater Config: Data Key = projectInfo, Repeater Function Query= project.values

${projectInfo.value} would correspond to the individual elements of the array.