Repeaters
Insert data from arrays
Binding | Description |
---|---|
Repeat | Repeat content inside content control. |
List | Repeat content inside content control, continue list numbering. |
Table | Repeat table rows. |
DynamicTable | Repeat table rows and set visibility and width of columns. |
RepeatTableCells | Repeat individual cells in a table, adding them one by one. |
TableFormat | Format tables with static length. |
Repeaters iterate through arrays, allowing generating multiple instances of content, including bullets and table rows, filled with different data. The arrays passed to repeaters need to be arrays of objects, with the assumption that their properties make up the content that's repeated.
Repeat
{ "BindingType": "Repeat", "BindingKey": "ArrayPath", "Separator": "SeparatorText" }
Repeats content inside the content control once for each element of ArrayPath
. This is especially valuable when there are nested content controls inside the repeat content control. In the nth repetition, the scope is the nth element of ArrayPath
.
Parameters
string BindingType
Always "Repeat"
to invoke the Repeat binding.
JSON path ArrayPath
A path to an array defining the repeating of elements and setting the scope.
string SeparatorText
[optional]
A string or character to be added in between repeated elements.
List
{ "BindingType": "List", "BindingKey": "ArrayPath" }
Behaves exactly like Repeat, but differs only when used on numbered lists. List
continues the numbering, instead of repeating points with the same number. This also applies if there is both text and a list inside the content control - the numbering will continue even after being interrupted by text. Generates one instance of the content inside the content control for each element of ArrayPath
, changing the scope to the current element at each step. The scope of the content is changed to the current element being iterated through.
Unless repeating a list, it's recommended to use the Repeat binding.
Parameters
string BindingType
Always "List"
to invoke the List binding.
JSON path ArrayPath
A path to an array defining the repeating of elements and setting the scope.
Table
{ "BindingType": "Table", "BindingKey": "ArrayPath" }
Add a copy of the table row or rows enclosed within the content control, once for each element of the input array. It can also be wrapped around the whole table, in which case the rows between the first one with bindings to the last one with bindings will be duplicated.
Parameters
string BindingType
Always "Table"
to invoke the Table binding.
JSON path ArrayPath
The path to an array defining the repeating of rows and setting the scope for table data.
DynamicTable
{"BindingType": "DynamicTable", "BindingKey": "tableData" }
Define table properties; set the visibility, number and whether to adjust width of columns. Also set the number of rows, in a way similar to the repeat binding.
Parameters
string BindingType
Always "DynamicTable"
to invoke the DynamicTable binding.
JSON path BindingKey
A path to a JSON object with a defined model for storing the configuration of the table. The data needs to be transformed into an object with the properties (case-sensitive):
- object
Options
[optional]
Properties in theOptions
object define general properties for the table or its formatting. Only one is currently supported:- boolean
KeepTotalWidth
[optional]
Set totrue
to keep the width of the table the same as before processing.false
ornull
will not preserve the width.
- boolean
- array
Headers
[optional]
Set the number of columns in the resulting table. Each object defined in this parameter must contain aVisible
key that controls the visibility of that column. Ifnull
, processing will not set the amount of columns in the table. The number of elements in the array can be smaller or bigger than the number of columns. In the first case, the other columns are going to be hidden, and otherwise, a repeat of the last column will be appended as many times as needed to match the length of the array.- boolean
Visible
Set visibility of an existing or populated column. If the value is truthy, show the column. Otherwise, hide the column. - boolean
KeepWidth
[optional]
Define if a column preserves its width after processing. This parameter plays a role when resizing table columns.
- boolean
- array
Rows
[optional]
Set the number of rows in the resulting table. First object in the list defines the header values. In order not to change header values, the object needs to be defined, but left empty. If the length of the list is larger than the existing number or rows, the processing will populate the last row to match the length the list. If the list is shorter, the processing will decrease the amount of rows. Each object can define unlimited amount of properties for the row. If there are no dynamic elements in rows, the table will be hidden.
Example
{
"tableData": {
"Options":
{
"KeepTotalWidth": true
},
"Headers" : [
{
"Visible" : true
},
{
"Visible" : ValueFromMyData
},
{
"Visible" : Value2FromMyData,
"KeepWidth" : true
}
],
"Rows": [
{
"H1" : "Header value 1",
"H2" : "Header value 2"
},
{
"L1" : "Second row value",
"L2" : "Second row value 2"
}
]
}
}
RepeatTableCells
{"BindingType":"RepeatTableCells","BindingKey":"sampleKey"}
Insert one table cell for each element of the cells
array inside the object pointed to by sampleKey
. The binding must enclose the entire table. The first cell in the table is the one that's going to be repeated, with scope set to a different element of the cells
array at each repetition. The number of columns in the table is preserved, so when the length of the cells
array exceeds the width of the table, new cells are added in the next row whenever the previous one is full.
Parameters
object sampleKey
Object with the following structure representing the configuration of the cell repeater:
{
"options":{
"direction": "lrtb"
},
"cells":[{"testkey":"testvalue"}]
}
object options
Static and case-sensitive. Defines the options of the binding. string direction
is the only currently supported option, representing the direction in which the cells are added, with lrtb
being the only currently supported setting , meaning left-to-right, top-to-bottom.
array[object] cells
Static and case-sensitive. Array of objects containing the data for the table cells. In the nth cell, the scope is set to the nth element of the cells
array.
TableFormat
Set visibility of table columns and provide data for the table, similar to DynamicTable, but with following differences:
- The entire table receives the same scope as the TableFormat binding, so it's not a true repeater, just used in similar cases.
- If there are less headers in
Headers
than there are columns in the table, the columns for which visibility is not set will be visible by default. - If there are more headers in
Headers
than there are columns in the table, the visibility will be set only for the columns that are present in the table; the number of columns will not be changed. - The number of rows is not changed dynamically.
Parameters
{ "BindingType": "TableFormat", "BindingKey": "tableData" }
string BindingType
Always "TableFormat"
to invoke the TableFormat binding.
JSON path tableData
A path to an object with a defined model representing the configuration of the table. Uses the same structure as in the DynamicTable binding.
Updated 6 months ago