A repeat is a form element that functions as a subform; a form under or behind the main form. It is accessed several times – “instances” – during the recording of form data, and is very handy to use when you
A. only need to register data in certain cases – such as if you only want to enter a value in the form if it deviates from normal, or
B. need a table for input with an unknown number of instances (rows) – depending on the actual situation at the time of filling in the form
We will show examples of the two methods in sections A and B below.
A. Creating a single repeat link
We often call a Repeat element from a Link button. The button can be placed anywhere in the form, including in a Yes/No option.
In the example below, we ask “Was the equipment test completed successfully?”. We have added a button for specification of details only for the “No” option, as we don’t need details of the answer is “Yes”. The button will only appear if the user has pressed “No”:
This question logic is defined in the Elements panel as a Single Select element with two options, and the “No” option containing the link element Details:
The link element Details links to a repeat Exception where the user can document what went wrong. The connecting link code is set in the Reference field of the link element:
The Repeat element can be placed directly under the Details link, or elsewhere in the form.
When pressing the [Details] button, the user will get a separate page with the repeat/subform. Details about the test can here be entered in a text box, in a 3-level risk evaluation and in a photo:
B. Creating a repeat table
When the number of instances you need to register differ each time you use the form, you can use a repeat to record these – instead of a grid with a pre-defined number of rows.
Example: If you want to record the names of people attending a weekly meeting, and the number of participants changes from one week to another, you can define a repeat labeled Participants like this:
The form will show the headline Participants and a button generally called [+ Add Item]. From Zegeba v 3.24, this button is called just [+ Add] but can be styled with other texts, colors and icons – see below. For now we will continue using [+ Add item] as an example.
When pressing [+ Add Item], the user will get a new page for registering a participant’s name and telephone number:
When pressing [OK], the normal form page is shown with this new entry:
By continuing to press [+ Add Item], we can add all the participants:
From the Settings menu in the top right button, next to [+ Add Item], we can select Multi column view …
… or choose the more handy Data table format for displaying the entries:
Horizontal format is set as default in the repeat’s Element Properties – Layout of subelements. You can at any time change it to Vertical in the form design or even as a user when filling in the form. If you select Lock Layout of subelements, users will not be able to change this layout themselves.
Column width
The columns of a repeat with horizontal layout are by default given the same width, as shown in the picture above. From Zegeba v 3.24, you can set the width of each column individually. For each element in the repeat you can go to Properties > Repeats to set the width in a percentage of 100% (the entire table).
In the repeat table below we have set the element “Repair performed” to 30% and “Hours used” to 10%. This leaves 60% for the Photo column.
Repeat buttons
Buttons in the repeat listing
In the Repeat tab you can set various options that determine the buttons shown in the repeat listing.
The options above will result in the following listing:
The number 1 to the left is the subform sequence number. This number is by default shown in the repeat listing for each repeat line.
The subform key is an internal ID number for this repeat line. It is by default not shown.
The […] button has a dropdown menu leading to a Copy option and a Delete option. See picture above. If only one of these is selected to be shown by the form designer, they will appear as individual Delete or Copy icons, as shown below:
The Delete button is by default shown to the right for each repeat line:
You can also switch on the Copy subform button:
This button is by default not shown. When switched on, and the Delete button switched off, it will appear as in the picture above. We have there pressed the Copy button for the second line to create a copy of it below, in the third line. When that is done we can click on the third line to change some of the data and save it.
When both the Delete and the Copy subform is selected, they will appear in the dropdown menu as described above.
You can style these buttons as you wish: change the text, icons, colors and size of each button. One example is shown in the picture further up, of the repeat table with individual column widths and photos of PC repairs. There the [+Add item] button has been renamed [Repairs made], it has a spanner icon and company brand colors. Read more about the styling of buttons in Designing: 4.2.3 Styling tab.
Buttons in the repeat window
From Zegeba v 4.4, you can create your own buttons to be used in the repeat window, instead of the standard green [OK] and red [Cancel] buttons. Then you can style the buttons and e.g. give them your branding colors. You can also add extra actions to the buttons, such as setting a specific parameter value when Save is pressed, in addition to saving the entry.
- Add two Link buttons at the bottom of the repeat,
for instance by placing them right justified inside a grid with no borders. - In the Reference fields of these Link elements, set in the Save button:
action://saveopenrepeat|<ID of Save Link button>
In the Cancel button:
action://cancelopenrepeat|<ID of Cancel Link button> - You can also combine several actions in one button with & between the actions.
In this command, the value 1 is set in the repeat’s element counter-element before the repeat is saved and closed:
action://setValue|counter_element|1&saveopenrepeat|save_button|Remember to put the save command last and put a | character at its end. - Then go to the repeat element’s “Other” properties tab and select Hide the [OK] and [Cancel] buttons in the repeat window.
Subrepeats
You can add a repeat to a repeat via the element Repeat Subset, often called for short a subrepeat. This is often used to add as many images as you like to one entry in a repeat.
In the picture below we have first created the main repeat, Repeat 1, and then a second repeat for adding photos, Repeat 2. Then we have added a Repeat Subset element at the end of the first repeat, and in its Reference property entered the ID of the second repeat:
Repeat 2 is set to Hidden, but the added photos will show inside the first repeat. In the example below, we have added two photos in each repeat instance, but we could have added as many as needed. Or none.
Description Formula
The Description Formula for a repeat is used to give each repeat instance a unique name based on some content – preferably from within the repeat itself.
Format and usage are the same as for forms, with the addition of a way to reference elements from within the repeat (see Designing: 6.4 Description Formula for options).
Link to a repeat description
A Link element can link to a Repeat by setting Reference to e.g. “repeat://elementIDOfRepeat”.
The link is a one-to-one link to one instance of the repeat. The heading of the repeat can be customized by the link by using the link’s Description Formula.
The Description Formula may contain element IDs as well as labels (see Designing: 6.4 Description Formula for options).
Element IDs are referenced with:
{#elementID}
Labels are referenced with:
{@elementID} or {@this} or {@this.parent}
Examples:
{#elementX} – {@elementY} where elementX = “ABC” and elementY is = “title” will produce form description = “ABC – title”
{@this.parent.parent} will pick the label of the parent-parent element of the link. E.g. if you have a grid with a row labeled “1. Check carburetor” and the link is on the option of a Single Select element (under the grid row), this reference will produce a title for the repeat instance = “1. Check carburetor”
With this notation we can create e.g. detailed checklists with the heading of the checklist items.
In the example from section A. above, the link element Details has as Reference a link to the repeat Details repeat. The ‘headline’ – the label “Was the equipment test completed successfully?” and the reply No is sent with the link to the repeat. This is done in the link’s Description Formula. Just {@this} would send “Details”, {@this.parent} would send “No”, but we want first to send the label above this, so we first write {@this.parent.parent}. Then we have added some spaces and “{@this.parent}” to write “No” behind the question. With this type of notation we can add other questions, such as “Did the launch go as planned?”, use the same repeat “Details repeat” for these, and still get a new, relevant headline for each question answered.
Auto increment in repeats
Sometimes you may want to use a repeat with an ID for each element. This ID should not be a sequential number, but a unique number that is not changed if you change the order of instances or delete an item from a list. This can be done in the following way:
- Add a Number element in the repeat.
- Enter for instance “Counter” as its Label.
Its Element ID will then automatically be set to “counter”. - Go to the Rules tab in the Element Properties of this number element.
- Drag the function [repeatIncrement] into the calculation.
- Drag [Text / String] ” into the “repeatIncrement” function.
- Type counter in this field.
- The Calculation Formula now looks like this:
Each time the repeat is accessed, the counter increases from 1, 2, 3, 4,… The Label (“Counter”) and the resulting number will be displayed in the repeat unless you in Element Properties check Hide label text to hide the word Counter and/or check Hidden under Element Type to hide the count number itself.
Note! You can place tabs in a repeat, but the data entered in the tabs will not show up in the repeat table. Also note that if you put a validation inside a repeat, it will prevent the user from saving the repeat if the validation requirement is not met.