Компонент Форма-грид обратной связи (sf.iblock.add)

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


  Помимо своей основной функции: добавления элемента, компонент имеет ряд вспомогательных функций:

• Позволяет настраивать внешний вид (расположение полей)
• Условия вывода полей: выводить поля в зависимости от того какие данные были введены в другие поля
• Автозаполнение: в зависимости от выбранного параметра,  поля могут заполнятся данными из другого инфоблока
• Редактировать имеющиеся элементы

Рассмотрим основные элементы формы: 
  Красным выделена строка. Строка является основным контейнером формы, строки имеют расположение друг относительно друга, также именно на строки вешаются условия показа (показываются/скрываются в зависимости от значений полей)

  Синим выделены колонки. Колонки являются обязательными элементами строки, их количество от 1 до 12. У колонки есть ширина(сколько места она занимает на экрана), также у колонки есть области.

 Зелёным выделены области, у области есть содержимое. Им может быть текст либо поле для ввода значения.  



Строка

Число строк в форме, задаётся в основных параметрах





А расположение строк друг относительно друга в "Сортировка строк", чтобы поменять расположение достаточно перетащить курсором мыши блок



Основные параметры строки:

У каждой строки есть название, внешне оно не выводится на странице сайта а служит лишь для удобства поиска нужного параметра. 

• Активность - если строка больше не нужна, необязательно перенастраивать грид, достаточно просто её деактивировать
• Условие показа - по умолчанию строка с полями показыватся всегда, но если необходимо выводить её только при определённом значении, то нужно поставить эту галочку. В данном примере строка ИП содержит данные полей индивидуального предпринимателя, поэтому выводятся только когда тип организации выбран как ИП. 
• Условие показа код свойства - код поля который содержит значение в зависимости от которого строка будет показыватся или нет
• Условие показа: сравнение - есть несколько вариантов сравнения со значением: пусто, не пусто, равно, не равно, больше, меньше, больше или равно, меньше или равно
• Условие показа значение - значение с которым будет сравниватся значение введеное в поле пользователем.
• Количество колонок - содержит число вертикальных областей. Их число может варироватся от 1 до 12
• Модификаторы обёртки - в это поле можно добавить css классы которые применятся к обёртке строки( к примеру если нам нужно добавить отступ сверху можно прописать mt-3  подробнее о модификаторах sf4.simai.pro)
• Модификаторы строки - в это поле можно добавить css классы которые применятся к строке

Колонка

Основные параметры колонки

• Адаптивная ширина колонки, при включении данного параметра ширина колонки настраивается для различных разрешений экрана: XL, LG, MD, SM, XS подробнее можете ознакомится в документации по bootstrap 4
• Ширина колонки - за 100% ширины берётся значение 12, соответственно 6/12 - 50%, 4/12 - 30%, 3/12 - 25% и т.д.
• Модификаторы колонки - поле для ввода классов модификаторов
• Количество областей - колонки делятся на горизонтальные области
• Модификаторы обёртки областей - поле для ввода классов модификаторов
• Содержимое области: название поля, поле, текст, тип (остальные параметры индивидуальны для каждого типа)
• Модификатор области - поле для ввода классов модификаторов

Содержимое области

Всего есть 4 типа: Название поля, Поле, Текст, Тип

 

Название поля представляет из себя обычный <label> значение которого берётся из названия одного из свойств инфоблока. Также к нему могут быть применены модификаторы для изменения внешнего вида.



Поле - поле для ввода данных пользователем



Параметры поля:

• Модификатор - определяет внешний вид
• Поле - свойство инфоблока куда будет записано значение
• Брать значение - свойство откуда будут братся значение для автозаполнения

Текст

На самой форме это выглядит так. 

У текста имеются следующие параметры:

• Модификатор
• Текст  

Тип

Данное поле выводится на форме только 1 раз, оно служит фильтром для выбора данных автозаполнения.

Дополнительных параметров данное поле не имеет.



В незаполненном виде оно выглядит следующим образом.


После заполнения появляется второе поле которое содержит списки элементов для автозаполнения.


Настройки автозаполнения

Для начала поясним логику автозаполнения. Есть 2 инфоблока, в данном примере есть "Анкеты", "Заявки". В анкетах содержатся данные регистрационные данные организаций, точно такие же данные заполняются в каждой заявке. Чтобы облегчить заполнение и автоматически подставлять в поля уже сохранённые данные используется автозаполнение. Выбор данных для подстановки осуществляется при помощи поля Тип. В данном примере это "Тип организации", после выбора типа организации, снизу появляется выпадающий список из анкет созданных пользователем. После выбора анкеты, её данные подставляются в поля.





Все параметры содержатся в разделе "Источник данных". 

• Тип инфоблока(источник данных) - тип инфоблока из элементов которого будут братся значения для автозаполнения
• Инфоблок
• Фильтр по типу(источник) 
• Фильтр по типу (форма)
• Снизу выводится значения выпадающих списков их нужно сопоставить.