При работе с компонентом Chronoforms 6 элемент-контейнер «Repeater area» позволяет дублировать вложенные в него поля. В зависимости от настроек, дублирование может быть статическим или динамическим.

Статический повторитель генерирует указанное веб-мастером количество полей сразу при загрузке формы. Пользователь никак не может влиять на это количество, а лишь заполняет предложенные ему поля.

Динамический множитель, напротив, дает возможность пользователю самому добавлять новые копии полей на форму путем нажатия на кнопку-триггер.

Инструмент является частью функционала настройки клиентской части создаваемого приложения и находится в группе «Areas» вкладки «Представления» (Views) в разделе «Страницы» (Pages) в конструкторе формы.

Окно редактора элемента «Repeater area»

Настройка мультипликатора (множителя) осуществляется посредством установки соответствующих параметров в редакторе самого инструмента. Окно редактора элемента «Repeater area» имеет следующие параметры:

Chronoforms 6 | Элемент-контейнер «Repeater area» | Настройка мультипликатора

Рис. 1

  • Собственные настройки:
    1. «Метка конструктора» (Designer label) — служебная метка. Отображается только в редакторе. Это поле не является обязательным.
    2. «Имя» (Name) — имя соответствующего элемента. Является обязательным и генерируется системой по умолчанию. Должно быть уникальным, без пробелов и спецсимволов.
  • Настройки мультипликатора:
    1. «Источник данных» (Data provider) — источник данных для повторителя. Можно указать массив, содержимое которого будет выводиться при создании дубликатов полей, находящихся в теле мультипликатора. В таком случае в поле источника прописывается команда chrono syntax, вызывающая функцию, которая и возвращает массив. Например, если в поле «Источник данных» мультипликатора «area_repeater1» указать «{var:read_data8}», то в значения «value» сгенерированных им полей, используя команду {var: area_repeater1.row. MODEL_OF_READ_DATA8.NEEDED_VALUES}, можно подгрузить данные, возвращаемые функцией «read_data8». В итоге, получим те самые значения «NEEDED_VALUES», по одному на каждый создаваемый мультипликатором «area_repeater1» элемент. В качестве источника так же может быть указано целое число, которое просто будет определять количество повторений содержимого тела множителя.
    2. «Источник ключей» (Keys provider) — список допустимых ключей генерируемых повторителем элементов. Может использоваться как массив, так и целое число (аналогично п.3). Это поле не является обязательным. Если оставить его пустым, то мультипликатор начнет свою работу от нулевого элемента. Если, например, в поле «Источник данных» указать число 5, а в этом поле — число 3, то множитель начнет свою работу от 3-го элемента и совершит три итерации, т.е создаст 3-й, 4-й и 5-й элементы.
    3. «Модель» (Model) — имя модели для полей-дубликатов. Не должно содержать пробелов и спецсимволов. Это поле заполнять необязательно, но если прописать в нем значение имени, то оно будет добавлено к каждому дублируемому элементу. Например, если указать в этом поле значение «mymodel», то для полей «text2» в теле множителя имена будут выглядеть так: mymodel[n][text2], где «n» — текущее значение ключа, указанного в поле «Источник ключей» (см. п. 4).
    4. «Класс множителя» (Repeater class) — класс CSS, используемый для стилизации повторителя на форме и при обработке скриптами. Во избежание утраты работоспособности, изменять и удалять это значение не рекомендуется. А при необходимости следует добавлять новый класс через пробел.
    5. «Включить мультипликатор?» (Enable content multiplier?) — переключатель, позволяющий настроить динамический мультипликатор.
    6. «Количество повторений» (Max multiplies) — максимальное количество элементов, которое может создать на форме пользователь путем нажатия на кнопку-триггер. Это значение обрабатывается скриптами системы только в случае применения динамического мультипликатора.
  • Контейнер для расположения элементов в теле множителя:
    1. Тело контейнера для расположения вложенных элементов или их групп, которые требуется дублировать указанное количество раз.
  • Контейнер для расположения элементов в подвале множителя:
    1. Тело футера повторителя. Обычно здесь располагается кнопка-триггер, необходимая для инициализации динамического повторителя.

Настройка мультипликатора на форме обратной связи Chronoforms 6

Настройка мультипликатора на форме обратной связи Chronoforms 6 осуществляется в зависимости от задачи, возлагаемой на эту функцию.

Рассмотрим примеры настройки статического и динамического повторителей на примере с полем «Text field».

Статический множитель

Во вкладке «Представления» размещаем в области формы элемент «Repeater area» и в его тело множителя помещаем поле «Text field»:

Chronoforms 6 | Расположение полей внутри «Repeater area»

Рис. 2

С учетом того, что требуется на форму вывести только три поля, начиная с 1-го, настройки повторителя будут такими:

Chronoforms 6 | Настройка статического множителя

Рис. 3

Затем нужно скопировать команду chrono syntax, сгенерированную в описании к полю «Источник данных» и перенести ее в настройки поля «Text field», чтобы уникализировать его имя и идентификатор:

Chronoforms 6 | Настройка полей в теле контейнера «Repeater area»

Рис. 4

Остальные настройки указанных элементов в данном случае остаются по умолчанию. Изменять их не нужно. На странице сайта при загрузке формы содержимое множителя будет выглядеть следующим образом:

Chronoforms 6 | Статический множитель на форме

Рис. 5

Динамический множитель

Чтобы перенастроить повторитель, созданный выше, достаточно несколько несложных изменений.

Сначала добавим по одной кнопке «Button» в тело множителя и в футер, чтобы получилось так:

Chronoforms 6 | Расположение элементов внутри динамического множителя «Repeater area»

Рис. 6

Повторитель нужно перенастроить так:

Chronoforms 6 | Настройка динамического множителя «Repeater area»

Рис. 7

Настройки кнопок будут такими:

Chronoforms 6 | Настройка кнопки «Удалить» для динамического множителя «Repeater area»

Рис. 8

Chronoforms 6 | Настройка кнопки «Добавить» для динамического множителя «Repeater area»

Рис. 9

На сайте после того, как пользователь добавит все поля в пределах ограничения, мультипликатор будет выглядеть, как на рисунке 10.

Chronoforms 6 | Динамический множитель «Repeater area» на форме

Рис. 10