Компонент Chronoforms 5, в отличие от шестой версии, не имеет обособленного инструмента для настройки динамического множителя полей на форме. Но отсутствие такого элемента целиком и полностью компенсируется наличием в CF5 уникального многофункционального инструмента «Container».

Элемент-контейнер «Container» может выполнять множество совершенно разных задач в зависимости от установленных в его редакторе параметров. В числе этих возможностей есть и настройка мультипликатора для форм обратной связи Chronoforms 5.

Именно этот элемент этот послужил прототипом для разработки «Repeater area» в CF6, а потому также позволяет создать на своей базе комплексный инструмент из трех основных частей:

  1. Общий контейнер с глобальными настройками мультипликатора.
  2. Тело множителя, где располагаются поля, для которых предполагается динамическое дублирование кликом по кнопке-триггеру.
  3. Футер мультипликатора для расположения кнопки удаления дубликатов полей.

Контейнер относится к средствам реализации клиентской части формы, поэтому расположен в разделе «Дизайнер» (Designer) конструктора формы в группе элементов «Advanced» (слева).

Конфигурация динамического множителя полей на формах Chronoforms 5

Не все параметры «Container», необходимые для настройки мультипликатора, доступны сразу при размещении этого элемента в области формы. Чтобы активировать соответствующие дополнительные вкладки редактора контейнера, необходимо выбрать для него задачу.

Инструмент составной, включающий как дублируемые, так и единственные поля. Поэтому необходимо использование двух элементов «Container» путем вложения одного в другой. В связи с этим и задачи для каждого из них будут отличаться. Для общего контейнера нужно выбрать тип «Multiplier», а для создания тела множителя — «Multiplier Contents».

Ниже контейнера с типом «Multiplier Contents» следует расположить элемент «Custom» (также из группы «Advanced») для расположения в нем кода кнопки-триггера «Добавить».

В итоге общая конфигурация динамического множителя полей на формах Chronoforms 5 должна выглядеть следующим образом:

Конфигурация  динамического множителя полей на формах  Chronoforms 5

Рис. 1

  1. Общий контейнер, основная задача которого — создание как визуальной части, так и функционала, для всего мультипликатора. Устанавливается путем размещения элемента «Container» в области формы и выбора для него типа «Multiplier», после чего активируется дополнительная вкладка в его редакторе под названием «Multiplier», которая и позволяет осуществить его глобальную настройку.
  2. Тело динамического множителя создается путем вложения второго элемента «Container» в область первого (см. п. 1). Для него должен быть установлен тип «Multiplier Contents», также активирующий соответствующую вкладку настроек. Именно здесь следует размещать поля, для которых предполагается применять динамическое дублирование путем нажатия на кнопку «Добавить».
  3. Футер (подвал) мультипликатора. Может содержать любые элементы, в том числе и «Container», которые не подлежат дублированию. Но, как правило, содержит кнопку-триггер, нажатием на которую пользователь сайта сможет самостоятельно добавлять на форму копии полей.

Настройка «Container» с типом «Multiplier» для форм Chronoforms 5

Настройка «Container» с типом «Multiplier» для форм Chronoforms 5 осуществляется изменением следующих параметров:

Настройка «Container» с типом «Multiplier» для форм Chronoforms 5

Рис. 2

  1. «Замена» (Replacer) — Текст, который при обнаружении система будет заменять на текущее значение счетчика (см п. 2).
  2. «Счетчик» (Counter) — значение, с которого стартует счетчик. Как и при обработке любого массива, здесь счет элементов ведется от нулевого. Поэтому, если в данном поле указано значение «0», то при загрузке формы поля внутри мультипликатора будут генерироваться от нулевого элемента, а при «1» — от первого. При установке данного значения следует учитывать, что это отразится на порядке вывода записей из БД сайта в случаях, когда мультипликатор оперирует данными, получаемыми с помощью функций «DB Read» (см. п. 6).
  3. «Скрыть первый элемент» (Hide first) — переключатель, с помощью которого можно скрыть первый элемент при загрузке страницы с формой.
  4. «Отключить первый элемент» (Disable first) — переключатель, с помощью которого можно заблокировать ввод данных в первое отображаемое мультипликатором поле.
  5. «Скрыть кнопки» (Hide buttons) — переключатель, позволяющий скрыть дефолтную кнопку добавления при загрузке формы для контейнера с типом «Multiplier».
  6. «Путь к данным» (Data path) — текстовое поле для указания массива данных, из которого мультипликатор будет загружать значения в дублируемые им поля. При использовании на форме функции «DB Read», в этих целях должно быть указано ее имя.

Настройка «Container» с типом «Multiplier Contents» на формах Chronoforms 5

Настройка «Container» с типом «Multiplier Contents» на формах Chronoforms 5 состоит в определении всего одного параметра — «Скрыть кнопки» (Hide buttons). Эта опция действует аналогично опции из п.5 настроек для «Multiplier» (см. выше) и не будет генерировать внутри тела множителя «Multiplier Contents» дефолтную кнопку «Удалить».

Настройка  «Container» с типом «Multiplier Contents» на формах Chronoforms 5

Рис. 3

Дефолтные кнопки «Добавить» и «Удалить» отличаются от размещаемых вручную только тем, что при их использовании исключается возможность добавить к ним какой-либо дополнительный контент. По умолчанию они представляют собой стилизованные особым образом значки «+» и «-», но их применение (если соответствующие переключатели установлены в положение «Да») избавляет нас от необходимости создавать эти кнопки внутри контейнеров вручную.

Размещение и настройка элементов в теле динамического множителя Chronoforms 5

Размещение и настройка элементов в теле динамического множителя Chronoforms 5 отличаются от того же процесса в любых других случаях только тем, что в их идентифицирующие параметры — «Имя», «ID» и «Метку», необходимо добавлять значение глобального параметра мультипликатора «Замена». Порядок установки остальных настроек ничем не отличается от обычного.

В качестве примера поместим в область мультипликатора (вложенный контейнер с типом «Multiplier Contents») элемент «Multi field» из той же группы «Advanced», который позволит создать связку сразу из двух элементов — «Text Box» и «Custom» (см. рис. 4).

Размещение и настройка элементов в теле динамического множителя  Chronoforms 5

Рис. 4

  1. «Тип поля» (Field Type) — список выбора типов полей.
  2. Кнопка «Добавить» для создания в группе нового поля.
  3. Список всех полей, добавленных в группу.

Это окно формирования группы полей можно вызвать лишь однажды, при перемещении мышью элемента в область формы элемента «Multi field». В дальнейшем количество и типы полей в наборе изменить не получится.

Далее нужно перейти к настройке полей группы путем открытия окна ее редактора (см. рис. 5).

Настройка группы полей «Multi field» в Chronoforms 5

Рис. 5

  • Поле «Text Box»:
    1. «Имя поля» (Field Name) — уникальное имя поля в группе. Для полей, представляемых на форме для ввода данных пользователем рекомендуется добавить квадратные скобки без пробела «[]», т. к. группа полей представляет собой, прежде всего, массив.
    2. «ID поля» (Field ID) — уникальный идентификатор. Для любого типа полей внутри множителя, с данными которых оперирует форма, нужно обязательно указать значение параметра мультипликатора «Замена» (см. п.2 на рис. 2), добавив его к дефолтному значению идентификатора этого поля (см. п.2 на рис. 5).
    3. «Метка» (Label) — метка поля, отображаемая над ним на форме. Добавление к этому параметру значения поля настроек мультипликатора «Замена» (см. п.2 на рис. 2) не является обязательным. Это осуществляется лишь для того, чтобы показать пользователю порядковый номер поля.
  • Поле «Custom»:
    1. «Код» (Code) — поле для размещения любого вида кода, используемого на форме. В данном случае сюда добавляется следующий HTML-код кнопки «Удалить»:
          <span class="btn btn-danger btn-xs multiplier-remove-button" ><i class="fa fa-times fa-lg">Удалить</i></span>
      

Создание футера мультипликатора на формах Chronoforms 5

Создание футера мультипликатора на формах Chronoforms 5 необходимо в тех случаях, когда вместо его дефолтных кнопок используются элементы, предлагаемые конструктором и настраиваемые вручную или же в общем контейнере «Multiplier» требуется разместить поля или визуальные элементы, которые дублированию не подлежат. В данном примере для создания футера достаточно расположить элемент «Custom» и добавить в его основное поле такой код:

    <span class="btn btn-success btn-sm multiplier-add-button"><i class="fa fa-plus fa-lg">Добавить</i></span>

Это код кнопки «Добавить», которая запускает каждую итерацию работы повторителя.

Динамический множитель полей на форме обратной связи Chronoforms 5

Рис. 6

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