Кастомизируем форму добавления элемента списка в Битрикс24

Недавно у меня появилась задача изменить поведение полей в форме добавления и редактирования элемента в списке на портале одной из клиентов нашей компании. А именно: в форме есть чекбоксы и текстовые поля. Нужно было сделать так, чтобы при выборе одного из чекбоксов, пользователю открывалась возможность заполнения определенного текстового input’а. Такое в стандартной форме реализовать невозможно, поэтому я решил создать новый раздел (назовем его custom_form) с индексной страницей и разместить на нем форму, которую я смог бы кастомизировать.

Так как списки – это по сути информационные блоки, я решил воспользоваться компонентом iblock.element.add.form. Если ваша задача заключается только в изменении внешнего вида формы или добавление каких-нибудь эффектов на JS, то достаточно просто скопировать шаблон компонента и произвести изменения в его файлах. В моем же случае при добавлении нового элемента запускался бизнес-процесс в списке, который использовался для утверждения различными сотрудниками документа, прикрепленного к элементу списка. Поэтому я скопировал компонент в свое пространство имен полностью. Делал я все это в папке local, расположенной в корневой папке портала.

Описание параметров компонента iblock.element.add.form можно найти на странице документации. Здесь я не буду приводить пример вызова этого компонента.

Сразу перейду к тому, что я поменял в шаблоне компонента. На самом деле файл template.php, который является шаблоном не очень большой – состоит из около 400 строк кода. Как я писал выше мне нужно было использовать JS, поэтому в самом начале кода шаблона я добавил подключение библиотеки jQuery.

$this->addExternalJS($templateFolder.'/js/jquery-3.4.1.min.js');

Я не стал использовать эту библиотеку, встроенную в Битрикс, так как ее версия довольно старая. Я скачал версию 3.4.1 и разместил ее в папке script внутри папки шаблона.

Далее я создал массив в котором сохранил связку чекбоксов в форме с текстовыми полями. Ключи массива – это идентификаторы свойств элемента списка, которые являются флажками. Они выводятся в шаблоне в качестве значения атрибута data-rowid. Значения элементов массива помещаются в HTML-атрибут id у строк таблицы, в которых находятся соответствующие текстовые input’ы. Пример массива, который получился у меня. В вашем случает значения будут другими.

$arCheckToElementsIDs = Array('91'=>'#field_row_133', '92'=>'#field_row_134', '95'=>'#field_row_137');

В процессе своей работы компонент iblock.element.add.form формирует массив $arResult["PROPERTY_LIST"], в который помещает все свойства элемента списка с указанием их типов. Затем в шаблоне компонента производится их «обход» в цикле foreach и вывод в HTML-форму.

Элементы формы, в которых располагаются поля изначально скрыты. Я добавил им CSS-класс hidden-row. В их атрибуте id формируется идентификатор, который хранится в массиве $arCheckToElementsIDs, как сказано выше.

<?foreach ($arResult["PROPERTY_LIST"] as $propertyID):?>
     <tr<?if(in_array($propertyID, $arParams["PROPERTY_CODES_HIDDEN"])):?> class="hidden-row" id="field_row_<?=$propertyID?>"<?endif;?>>
   …
<?endforeach;?>

Когда дело в шаблоне доходит до вывода элементов по типам (конструкция switch / case) мы выбираем блок case, в котором обрабатывается значение равное L. Это как раз свойства типа «список», к которому относятся наши флажки. Находим следующую строку.

<input type="<?=$type?>" name="PROPERTY[<?=$propertyID?>]<?=$type == "checkbox" ? "[".$key."]" : ""?>" value="<?=$key?>" id="property_<?=$key?>"<?=$checked ? " checked=\"checked\"" : ""?> /><label for="property_<?=$key?>"><?=$arEnum["VALUE"]?></label>

И заменяем ее блоком кода:

<?if(array_key_exists($key, $arCheckToElementsIDs)):?>
       <input type="<?=$type?>" name="PROPERTY[<?=$propertyID?>]<?=$type == "checkbox" ? "[".$key."]" : ""?>" value="<?=$key?>" id="property_<?=$key?>"<?=$checked ? " checked=\"checked\"" : ""?> class="j-toggle-row" data-rowid="<?=$arCheckToElementsIDs[$key]?>" /><label for="property_<?=$key?>"><?=$arEnum["VALUE"]?></label><br />
<?else:?>
       <input type="<?=$type?>" name="PROPERTY[<?=$propertyID?>]<?=$type == "checkbox" ? "[".$key."]" : ""?>" value="<?=$key?>" id="property_<?=$key?>"<?=$checked ? " checked=\"checked\"" : ""?> /><label for="property_<?=$key?>"><?=$arEnum["VALUE"]?></label><br />
<?endif;?>

В конец файла шаблона template.php добавляем JS для обработки кликов по чекбоксам.

<script>
$(function(){
	$('.j-toggle-row').on('change', function(){
		var linkEl = $(this).data('rowid');
		$(linkEl).slideToggle();
	});
});
</script>

На этом кастомизация шаблона завершена. Можно проводить проверку. Если все сделано правильно, то сейчас при кликах по флажкам будет происходить отображение и скрытие блоков с текстовыми input’ами.

Переходим к дополнительной доработке, которая связана с запуском бизнес-процессов при добавлении элементов списка.

Для того, чтобы при создании элемента списка из нашей формы, запускался бизнес-процесс в списке, нужно внести небольшие изменения в файл component.php. По этой причине я и написал в начале статьи, что нужно сделать копию компонента iblock.element.add.form целиком, а не только его шаблона. Находим в файле блок, отвечающий за запуск бизнес-процесса при добавлении элемента списка. В нем и будем проводить замену некоторых параметров в коде. Он начинается со строки if($bBizproc). В указанном блоке различным методам класса CBPDocument в качестве аргумента передаются массивы следующего вида:

array("iblock", "CIBlockDocument", $DOCUMENT_TYPE)

или

array("iblock", "CIBlockDocument", $arParams["ID"])

в них нужно произвести замену значений iblock и CIBlockDocument на lists и Bitrix\Lists\BizprocDocumentLists соответственно.

Итак, наша задача практически выполнена. Осталось только добавить страницу с формой в левое меню портала, чтобы иметь к ней быстрый доступ.