Block-Repeatable

The Block-Repeatable control is used as a container to repeat a template or section within it based on a reference of JSON array or list. You can specify a repeat reference in settings and use the block as a template using that reference value.

The Block-Repeatable control has the following settings:

• Repeat Reference: Enter the reference variable that holds the values to be iterated.
• Repeated item reference: An auto generated value that references the item to be repeated.
• Repeated index reference: An auto generated value that references the current count of iteration.

You cannot apply styles to the Block-Repeatable control but you can apply style to the UI control that are added within this control.

Example:

Considering the use case to display the name and color of three fruits along with index, let us specify a global variable using Add References option as follows:

• Name: Fruits
• Type: Static JSON
• Value: [{"name":"Apple","color":"red"}, {"name":"Mango","color":"yellow"}, {"name":"Grapes","color":"green"}]

Next in the UI model, add Block-Repeatable control and specify the settings as follows:

• Repeat Reference: Fruits
• Repeat Item Reference: For this example the value "item_ofpq" is auto generated.
• Repeat Index Reference: For this example the value "index_vctu" is auto generated.

Now add three Text-Input controls within Block-Repeatable control and specify the settings as follows:

• Text-Input control 1
• Reference: item_ofpq.name
• Label: Name
• Text-Input control 2
• Reference: item_ofpq.color
• Label: Color
• Text-Input control 3
• Reference: index_vctu
• Label: Count

When saved and previewed the page looks as shown in the image below.