data:repeater
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater
ATTRIBUTES
EXAMPLES
data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:audio standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

<data:repeater> </...>

Repeaters are similar to a foreach loop.
Allows iteration over a set of data, rendering HTML.

Related Tutorials

Content

any
Defines the template for each repetition of the repeater. Access the datasource content through the variable named in the as attribute to render the content in the datasource.

Attributes

as
string
The name of the variable to be registered for each row. For example, as="myvar" will let you reference $myvar inside the control.
classRow
string
The CSS class for rows (<tr> tags).
dataFilter
array
A Filter Array, if datasource is a function that supports a Query Array.
dataGroupBy
array
An array of fields to group by, if datasource is a function that supports a Query Array.
dataJoins
array
Array of tables to join with, if datasource is a function that supports a Query Array.
dataLimit
int
The maximum number of results to return, if datasource is a function that supports a Query Array.
dataOrder
array
Sets the order by which the data is sorted

The parameter is a two-dimensional array consisting of column names and the direction of the order.

For example, the following would sort contacts by their last name ascending and in the event of two contacts having the same last name, their first name descending

[['contact_last_name', 'asc'], ['contact_first_name', 'desc']]
dataSearch
string
Filter results if they match this string, if datasource is a function that supports a Query Array.
dataSourceSupportsOrdering
bool
Sets whether the DataSource supports the order parameter.

When set to true, an order parameter will be appended to the data. The order parameter is an array containing values similar to: [['contact_id', 'desc'], ...].
dataSourceSupportsPaging
bool
Sets whether the DataSource supports the paging parameters.

When set to true, two parameters will be appended to the call to the DataSource which represent the start and limit values of pagination.
dataStart
int
The number of results to skip, if datasource is a function that supports a Query Array.
emptyMessage
string
The message shown when there are no rows in the data control.
exportable
bool|string
If true, an 'Export Data' link will appear beneath the control which will save a CSV file to the client of all the data in the control. Default = false.
height
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
id
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
keyAs
string
The name of the variable to be registered for each row's key.
For arrays of entities from the database (for example getAll()), the keys will be incrementing integers starting at 0.
paging
bool
Whether to enable paging for this control. With paging enabled, the initial number of results will be limited to the value of pagingrows, and a 'Show More' button will appear.
Each click of the button will append pagingrows more rows. Default = false.
pagingRows
int
Use in conjunction with paging, to control the initial number of rows to be shown, and the number of rows loaded when 'Show More' is clicked. Default = 25.
populateAt
string
Sets when to populate from the datasource. Not required for most tasks, but can resolve timing issues on very complicated pages.
Default = 'init'. Other possible values: 'render'.
width
string
Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.
onPopulateServer
callable
Called after the data control has populated from the datasource / component

Tutorials

Examples

Linking with PHP

How to call functions in Server Code from the data repeater.

HTML:

<data:repeater datasource="getAllItems()" as="item"> [? $item ?]<br /> </data:repeater>

PHP:

<?php function getAllItems() { return ['one', 'two', 'three']; } ?>

Run Example

Linking with Components

You can link the data repeater to components within the system to iterate over data. Refer to the documentation of the component for function calls and field names.

HTML:

<h1>Posts</h1> <data:repeater datasource="\Components\Website\Posts::getAll()" as="post"> [? $post['post_title'] ?]<br /> </data:repeater> <h1>Post Categories</h1> <data:repeater datasource="\Components\Website\Posts\Categories::getAll()" as="category"> [? $category['post_category_title'] ?]<br /> </data:repeater> <h1>Products</h1> <data:repeater datasource="\Components\Commerce\Products::getAll()" as="product"> [? $product['product_title'] ?]<br /> [?? formatCurrency($product['product_price'] ??] </data:repeater>

Debugging the data

You can always output the data contained in the registered variable by using varDump().

HTML:

<data:repeater datasource="\Components\Website\Posts::getAll()" as="post"> [? varDump($post) ?] </data:repeater>

DataStart and DataLimit Attributes

Allows you to show from a record, to a record. Behaves like the LIMIT clause in SQL.

HTML:

<h1>Show the First Post</h1> <data:repeater datasource="\Components\Website\Posts::getAll()" as="post" datalimit="1"> [? $post['post_title'] ?] </data:repeater> <h1>Show the First Three Posts</h1> <data:repeater datasource="\Components\Website\Posts::getAll()" as="post" datalimit="3"> [? $post['post_title'] ?] </data:repeater> <h1>Show the Second and Third Post</h1> <data:repeater datasource="\Components\Website\Posts::getAll()" as="post" datastart="1" datalimit="2"> [? $post['post_title'] ?] </data:repeater> <br /><br /> datastart="1" datalimit="2" behaves the same as SQL's LIMIT 1 2

DataFilter Attribute

Allows you to specify conditions in your query. Behaves like the WHERE clause in SQL.

HTML:

<h1>Returns all products greater than $100 in value</h1> <data:repeater datasource="\Components\Commerce\Products::getAll()" as="product" datafilter="[? [['product_price_base', '&gt;', 100]] ?]"> [? $product['product_title'] ?] </data:repeater>

DataOrder Attribute

Allows you to specify conditions in your query. Behaves like the ORDER clause in SQL.

HTML:

<data:repeater datasource="\Components\Website\Posts::getAll()" as="post" dataorder="[? [['post_date', 'desc']] ?]"> [? varDump($post) ?] </data:repeater>