Контейнеры определяют границы и функционал группы полей размещенных внутри. Любые поля должны размещаться внутри контейнеров. Контейнеры могут быть вложенными, за исключением некоторых. На данный момент у плагина Frontend Code-Form Builder существуют 6 типов контейнеров.
1. container — простой контейнер, который является просто оболочкой для группы полей без какого-либо функционала.
2. ajax — контейнер в который могут динамически подгружаться поля или контейнеры с полями по заданным условиям, например под разные категории объявлений подгружать разные группы полей. ajax контейнер не работает внутри повторяемых и комплексных полей.
3. repeat — поле или группа повторяемых полей.
4. complex — похож на repeat, но с большими возможностями. Можно не только повторять одну и ту же группу полей, но и выбирать другие из заранее созданных шаблонов.
5. tabs — вкладки с горизонтальным или вертикальным расположением кнопок.
6. step — контейнер ничего не делает функционально, только позволяет задавать несколько групп полей для пошаговой формы. js-функционал не разработан и по сути возложен на разработчика.
container
Это основной и часто используемый контейнер. Часть настроек применимы от полей, по этому смотрите документацию по полю «text».
[
‘type’ => ‘container’,
‘label’ => ‘Простой контейнер’,
‘id’ => ‘product’,
//Развернуть/свернуть контейнер на все окно
‘full’ => 1,
‘fields’ => [
//Внутри fields размещаются поля или вложенные контейнеры
[
‘type’ => ‘text’,
‘id’ => ‘name’,
‘label’ => ‘Название’,
],
],
];
ajax
Будет отдельная документация по использованию ajax контейнеров.
[
‘type’ => ‘container’,
‘label’ => ‘Простой контейнер’,
‘id’ => ‘product’,
‘fields’ => [
//поле от которого зависит отображение содержимого контейнера
[
‘type’ => ‘checkbox’,
‘label’ => ‘Согласен с правилами’,
‘id’ => ‘agreement’,
],
//ajax контейнер. Границы данного контейнера не видны на странице.
[
‘type’ => ‘ajax’,
‘id’ => ‘groupfields’,
//условная логика, в которой указывается от каких полей и их значений, зависит погрузка нужной группы полей.
‘conditions’ => [
‘or’ => [
[
//часть названия фильтра (вп хука)
‘group’ => ‘nm’,
//динамическое обновление данных для фильтра, иначе кэшируется после первого совпадения условий.
‘dynamic’ => true,
//правила
‘rules’ => [
[
‘id’ => ‘agreement’,
‘values’ => [‘1’],
‘compare’ => ‘=’,
],
],
],
],
],
],
],
]
repeat
Кроме повторяемых полей позволяет создавать фиксированные таблицы для заполнения данными.
$args[] = [
‘type’ => ‘repeat’,
‘label’ => ‘repeat — контейнер’,
‘id’ => ‘products’,
//Текст кнопки
‘btn’ => ‘Добавить товар’,
//Минимальное количество повторяемых полей
‘min’ => 1,
//Максимальное количество повторяемых полей
‘max’ => 10,
//Вариант отображения в виде таблицы
‘table’ => true,
‘fields’ => [
[
‘type’ => ‘text’,
‘id’ => ‘name2’,
‘label’ => ‘Название’,
‘ww’ => ‘50%’,
],
[
‘type’ => ‘number’,
‘id’ => ‘count’,
‘label’ => ‘Количество’,
‘ww’ => ‘50%’,
],
],
];
$args[] = [
‘type’ => ‘repeat’,
‘label’ => ‘Фиксированная таблица’,
‘id’ => ‘ing’,
‘min’ => 4,
‘max’ => 4,
‘table’ => true,
‘fix_table’ => true,
‘fields’ => [
[
‘type’ => ‘first_col_table’,
‘label’ => ‘Название продукта’,
‘id’ => ‘n’,
‘ww’ => ‘33%’,
‘row_names’ => [‘Хлеб ржаной::Хлеб ржаной::Хлеб ржаной’, ‘Мука::описание муки’, ‘Яблоки’, ‘Слива’, ‘Мясо’],
],
[
‘type’ => ‘range’,
‘label’ => ‘Белки’,
‘tooltip’ => ‘Белки’,
‘id’ => ‘b’,
‘ww’ => ‘33%’,
],
[
‘type’ => ‘text’,
‘label’ => ‘Жиры’,
‘id’ => ‘g’,
‘ww’ => ‘33%’,
],
],
];
complex
$args[] = [
‘type’ => ‘complex’,
‘style_wrapper’ => 3,
‘label’ => ‘Комплексные поля’,
‘id’ => ‘blocks’,
//Текст на кнопке
‘btn’ => ‘Добавить’,
//Первичный информационный текст
‘help’ => ‘Нажмите на «Добавить», чтобы создать новый блок полей’,
‘fields’ => [
[
‘type’ => ‘complex_fields’,
‘label’ => ‘О магазине’,
‘id’ => ‘obout’,
//Максимальное кол-во повторений данного блока полей
‘max’ => 2,
‘fields’ => [
[
‘type’ => ‘text’,
‘label’ => ‘Название’,
‘id’ => ‘nm’,
‘ww’ => ‘100%’,
],
],
],
[
‘type’ => ‘complex_fields’,
‘label’ => ‘О продукте’,
‘id’ => ‘obout1’,
‘max’ => 10,
‘fields’ => [
[
‘type’ => ‘text’,
‘label’ => ‘Название’,
‘id’ => ‘nm1’,
‘ww’ => ‘100%’,
],
],
],
],
];
tabs
$args[] = [
‘type’ => ‘tabs’,
‘label’ => ‘Табы ‘,
‘id’ => ‘tabs’,
//Расположение кнопок. left — слева, иначе сверху
‘btn_position’ => false,
‘fields’ => [
[
‘type’ => ‘tab’,
‘label’ => ‘Вкладка 1’,
‘id’ => ‘tab1’,
‘fields’ => [
[
‘type’ => ‘text’,
‘label’ => ‘Логин’,
‘ww’ => ‘100%’,
‘id’ => ‘login’,
‘sw’ => 2,
‘required’ => ‘1’,
],
[
‘type’ => ‘password’,
‘label’ => ‘Пароль’,
‘ww’ => ‘100%’,
‘sw’ => 2,
‘id’ => ‘password’,
‘required’ => ‘1’,
],
],
],
[
‘type’ => ‘tab’,
‘label’ => ‘Вкладка 2’,
‘id’ => ‘tab2’,
‘fields’ => [
[
‘type’ => ‘text’,
‘label’ => ‘text2’,
‘id’ => ‘text2’,
],
],
],
],
];
step
Для пошаговых форм будет отдельная документация.