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

<ss: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

Examples

Linking with PHP

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

HTML:

PHP:


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:

Debugging the data

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

HTML:

DataStart and DataLimit Attributes

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

HTML:

DataFilter Attribute

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

HTML:

DataOrder Attribute

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

HTML: