In forms even dynamic elements can occur. These fields are duplicated during the input. A typical example here is the declaration of e.g. people living in one household. If you e.g. select 5, the respective block is displayed five times. Another example is the opporunity of any number of uploads.

Contents

Repeated elements are created directly in the formcycle Designer or by using the JavaScript function jQuery.fn.dynamic.

Selection of dynamic elements

Within the possible actions, dynamic elements are treated as follows.

If a dynamic element is used in the inbox or in the workflow later, all values of its dynamic elements, connected with a comma, are redelivered. By creating a new column in the inbox for the dynamic field with the name tf1, all values in the column in the inbox than appear comma separated.

In the form itself every duplicated element gets a name after the schema Elementname_index. So, if three pieces of the element tf1 existed, the fields with the name tf1_0, tf1_1 and tf1_2 would be generated. To these fields it can also be accessed directly with this name in inboxes or in the action processing.

To select all duplicated elements, it can be accessed with the attribute data-org-name instead of name.

Examples

All dynamically created fields of a primal form field are selected with data-org-name.

$("[name=tf1]") // Selects the non-dynamic textfield tf1.
$("[org_name=tf2]") // Selects all dynamically created versions of the textfield tf2.

To like select the second duplicated element of a dynamic element with the name tf1, the following code can be used.

$($("[org_name=tf1]").get(1)) // Selects the second dynamically created element of the textfield tf1.

To execute events / functions that have been added to an element within a repeating container via script for all repetitions, it is necessary to define them again. For example, a selection selLocation should execute a modification on change. The element is located in a repeating container. In this case, the definition should be made for the events ready (form fully loaded) and addRow (new row is added on repetition):

$('FORM.xm-form').on("ready addRow", function(_, data) {
    let row = (data) ? data.container : null;
    $("[data-org-name=selLocation]", row).on("change", function(event) {
          // Here follows the actual definition, which is executed when selLocation is changed
     });
});