Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Самодельная форма добавления элемента на API Битрикс

Просмотров: 42560

Компонент iblock.element.add.form написан таким образом, что вы не сможете (не попотев изрядно и не используя js) как угодно переставлять поля ввода. Например сделать заполненеие текста анонса до ввода разделов. Или переставить чекбоксы свойств до ввода названия (хотя это глупо, но вы не сможжете сделать такую глупость даже если захотите)

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

В большинстве случаев, достаточно воcпользоваться стандартным компонентом iblock.element.add.form. Однако, данный компонент очень давно не обновляется. Назвать его гибким и тонко настраеваемым ни как нельзя. Достаточно часто, для создания формы приходиться писать свои костыли. Например: форму добавления элемента инфоблока через API Битрикс

Компонент iblock.element.add.form написан таким образом, что вы не сможете (не попотев изрядно и не используя js) как угодно переставлять поля ввода. Например сделать заполненеие текста анонса до ввода разделов. Или переставить чекбоксы свойств до ввода названия (хотя это глупо, но вы не сможете сделать такую глупость даже если захотите)

Расскажу как сделать форму через API. Абсолютным костылем данный способ не назвать, в любом случае задача будет решена. И у вас будет возможность оформлять форму как угодно.

Работать будем с методом CIBlockElement::Add - добавляет новый элемент информационного блока. Перед добавлением элемента вызываются обработчики события OnBeforeIBlockElementAdd, из которых можно изменить значения полей или отменить добавление элемента вернув сообщение об ошибке.

Создаем форму на произвольной странице сайта или в основном шаблоне

Для начала: имеем инфоблок "Тест", у которого созданы свойства "Строка", "Список", "Чекбокс", "Файл", "Привязка к разделам". ID этого инфоблока 12

Кстати: в стандартном компоненте не хватает некоторых свойств, например он не умеет выводить свойство привязка к раздел. Как это реализовать можете подсмотреть тут

Далее: Создаем в корне сайта страницу add_form_page.php с таким содержимым

<?
	 require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php");

	 //Подключаем модуль инфоблоков
	 CModule::IncludeModule('iblock');
	 $IBLOCK_ID = 12; //ИД инфоблока с которым работаем
	 ?>

	 <form name="add_my_ankete" action="/add_form_result.php" method="POST" enctype="multipart/form-data">

	Название
	 <input type="text" name="name" maxlength="255" value="">

	Картинка анонса
	 <input type="file" size="30" name="image" value="">

	 Свойство Строка
	 <input type="text" name="line" maxlength="255" value="">

	Выпадающий список не множественный
	   <select name='selector'>
	     <option value='#'>Выберите из списка</option>
	     <option value="60">1</option>
	     <option value="61">2</option>
	   </select>
	              
	   Текст анонса
	   <textarea name="description" placeholder="Заполните поле"></textarea>
	                
	   Выбор раздела- множественный
	   <select name='section_id[]' multiple>
	     <option value='#'>Выберите из списка или начните вводить название</option>
	     <?
	       $arFilter = array('IBLOCK_ID' => $IBLOCK_ID, 'ACTIVE' => 'Y', "DEPTH_LEVEL" => "2");
	       $arSelect = array('ID', 'NAME');
	       $rsSection = CIBlockSection::GetTreeList($arFilter, $arSelect);
	       while ($arSection = $rsSection->Fetch()) {
	     ?>
	       <option value="<?= $arSection['ID']; ?>"><?= $arSection['NAME']; ?></option>
	     <?}?>
	   </select>
	             
	   Чекбокс
	   <label><input type="checkbox" name="chek_box" value="47"> Рассрочка </label>
	               
	   Произвольный файл
	   <input type="file" size="30" name="file_pol" value="">
	                    
	   Привязка к подразделам конкретного раздела другого мнфоблока чекбоксы                 
	   <?
	   $rsParentSection = CIBlockSection::GetByID(5741);
	   if ($arParentSection = $rsParentSection->GetNext()) {
	   $arFilter = array('IBLOCK_ID' => $arParentSection['IBLOCK_ID'], '>LEFT_MARGIN' => $arParentSection['LEFT_MARGIN'], '<RIGHT_MARGIN' => $arParentSection['RIGHT_MARGIN'], '>DEPTH_LEVEL' => $arParentSection['DEPTH_LEVEL']);
	   $rsSect = CIBlockSection::GetList(array('left_margin' => 'asc'), $arFilter);
	   while ($arSect = $rsSect->GetNext()) {
	   ?>
	    <label><input name='service_dop[]' type="checkbox" value="<?= $arSect['ID']; ?>"> <?= $arSect['NAME']; ?></label>
	   <?}}?>            
	   <input type="submit" value="Отправить">
	 </form>    
<?require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/footer.php"); ?>

Это наша форма, которую заполняет пользователь

Рядом создаем файл add_form_result.php, которому будет передаваться POST запрос и пользователю будет выдаваться сообщение о результате добавления. Содержимое файла:

<?
	 require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php");
	 define("NO_KEEP_STATISTIC", true);
	 define("NOT_CHECK_PERMISSIONS", true);
	 require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.php");
	 ?>
 
	 <?
	 if (!empty($_REQUEST['name']) and !empty($_REQUEST['description'])) {
 
	   CModule::IncludeModule('iblock');
 
	   echo 'Вот такие данные мы передали';
	   echo '<pre>';
	   print_r($_POST);
	   echo '<pre>';
 
	   //Погнали
	   $el = new CIBlockElement;
	   $iblock_id = 24;
	   $section_id = false;
	   $section_id[$i] = $_POST['section_id']; //Разделы для добавления
 
	   //Свойства
	   $PROP = array();
 
	   $PROP['LINE'] = $_POST['line']; //Свойство Строка
	   $PROP['SELECTOR'] = $_POST['selector']; //Свойство список
	   $PROP['CHEK_BOX'] = $_POST['chek_box']; //Свойство чекбокс
	   $PROP['FILE_POL'] = $_FILES['file_pol']; //Свойство файл
	   $PROP['SECTIONS_SV'][$c] = $_POST['sections_sv']; //Чекбоксы привязка к разделам
 
	   //Основные поля элемента
	   $fields = array(
	     "DATE_CREATE" => date("d.m.Y H:i:s"), //Передаем дата создания
	     "CREATED_BY" => $GLOBALS['USER']->GetID(),  //Передаем ID пользователя кто добавляет
	     "IBLOCK_SECTION" => $section_id[$i], //ID разделов
	     "IBLOCK_ID" => $iblock_id, //ID информационного блока он 24-ый
	     "PROPERTY_VALUES" => $PROP, // Передаем массив значении для свойств
	     "NAME" => strip_tags($_REQUEST['name']),
	     "ACTIVE" => "Y", //поумолчанию делаем активным или ставим N для отключении поумолчанию
	     "PREVIEW_TEXT" => strip_tags($_REQUEST['description']), //Анонс
	     "PREVIEW_PICTURE" => $_FILES['image'], //изображение для анонса
	     "DETAIL_TEXT"  => strip_tags($_REQUEST['description_detail'],
	     "DETAIL_PICTURE" => $_FILES['image_detail'] //изображение для детальной страницы
	   );
	  
	   //Результат в конце отработки
	   if ($ID = $el->Add($fields)) {
	     echo "Сохранено";
	   } else {
	     echo 'Произошел как-то косяк Попробуйте еще разок';
	   }
	 }
	 ?>
<? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/footer.php"); ?>

Вот и все. Результат будет отдаваться в запись элемента инфоблока. Уже по вкусу, можете оформлять как угодно, прикручивать js проверку на заполненность или на проверку данных- маски.

На базе данной заметки сделал компонент. Устроен максимально просто, поддается доработкам и расширению функционала. Компонент добавления элемента в инфоблок

Видео: Форма добавления через API

Опубликовав и прочитав записку, понял, что она не до конца понятна. Решил записать поясняющее видео

Загрузка множественного свойства типа файл

Создаем массив со свойствами файлов, методом CFile::MakeFileArray и передаем в $PROP["MORE_PHOTO"] (в моем случае, свойство с доп картинками)


$arMorePhoto["VALUE"];
    $i = 0;
    foreach ($_POST["MORE_PHOTO"] as $morePhoto) {
        $arMorePhoto['n'.$i] = array("VALUE"=>CFile::MakeFileArray($morePhoto));
        $i++;
    }
$PROP["MORE_PHOTO"] = $arMorePhoto;
Александр Семашко 18.05.2020
Добрый день. Спасибо за форму. Подскажите, кто нибудь уже изменял данную форму, что бы она работала при редактировании элемента. Поделитесь пожалуйста
Павел Шестаков 01.07.2020
Добрый день.
Все что нужно уже сделано, но вот возникла такая проблема.
Инфоблок куда пишу данные имеет свойство "Товар" - привязка к элементу инфоблока каталог товаров. При создании заявки нужно сделать выбор 1-3 элементов из каталога.  Как это реализовать полноценно на API не могу разобраться (новичок еще), прошу помощи натолкнуть на мысль.
Михаил Базаров 01.07.2020
Цитата
Павел Шестаков написал:
Добрый день.
Все что нужно уже сделано, но вот возникла такая проблема.
Инфоблок куда пишу данные имеет свойство "Товар" - привязка к элементу инфоблока каталог товаров. При создании заявки нужно сделать выбор 1-3 элементов из каталога.  Как это реализовать полноценно на API не могу разобраться (новичок еще), прошу помощи натолкнуть на мысль.
Суть в том, что вам нужно получить список товаров методом
https://dev.1c-bitrix.ru/api_help/iblock/classes/ciblockelement/getlist.php
загнать их в select
И передать в нужное свойство (привязка к элементам) ID выбранного товара
Arsen Sheremeta 30.09.2020
Здравствуйте.
У меня пошаговая форма на 6 шагов. Подскажите пожалуйста как сделать чтоб после первого шага форма  создавала запись (элемент), а с каждым следующим шагом, обновляла туже запись а не создавала новую? Спасибо!
Михаил Базаров 30.09.2020
Цитата
Arsen Sheremeta пишет:
Здравствуйте.
У меня пошаговая форма на 6 шагов. Подскажите пожалуйста как сделать чтоб после первого шага форма  создавала запись (элемент), а с каждым следующим шагом, обновляла туже запись а не создавала новую? Спасибо!
На первом шаге создаете элемент методом: CIBlockElement::Add
На остальных обновляете методом: CIBlockElement::Update
Arsen Sheremeta 30.09.2020
Цитата
Михаил Базаров пишет:
[QUOTE][URL=/club/user/14020/]Arsen Sheremeta[/URL] пишет:
Здравствуйте.
У меня пошаговая форма на 6 шагов. Подскажите пожалуйста как сделать чтоб после первого шага форма  создавала запись (элемент), а с каждым следующим шагом, обновляла туже запись а не создавала новую? Спасибо![/QUOTE] На первом шаге создаете элемент методом: CIBlockElement::Add
На остальных обновляете методом: CIBlockElement::Update
Спасибо!
Roma Rampagev 03.10.2020
Все сделал
Максим Максимов 16.03.2021
Добрый день
Спасибо за базу знаний по битрикс !
А есть ли возможность сделать и вашей формы редактор статей на сайте ?

Не только создавать статью но и изменять её?
Михаил Базаров 20.03.2021
Цитата
Максим Максимов написал:
Добрый день
Спасибо за базу знаний по битрикс !
А есть ли возможность сделать и вашей формы редактор статей на сайте ?

Не только создавать статью но и изменять её?
В целом да. Нужно передать сюда ID статьи и по нему получить все содержимое элемента (методом CIBlockElement::GetByID)
Заполнить им все поля, а дальше в обработчике обновлять с помощью $el->Update

Штука получится монструозная- лучше сделать свой компонент.

Как сделать такой компонент добавления/редактирования элемента, будет рассмотрено в этом курсе
https://camouf.ru/video/board/
Владимир 25.06.2021
Здравствуйте!
Хорошее видео. Не подскажете как это всё отправить на почту?
Столкнулся с проблемой нет нигде описание как добавить в форму обратной связи поле "select", решил попробовать как у вас на видео, но не понятно как оправлять ее на почту... ну и прикрутить recaptcha.
Спасибо!

Записная книжка разработчика

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

Заполнение габаритов товара, после обмена с 1С, из свойств элемента и... Просмотров: 10423 Если Ваш интернет-магазин интегрирован с 1С, скорее всего столкнулись с такой проблемой: 1... Данные о заказе текущего пользователя Просмотров: 12901 Иногда нужно получить данные о заказе текущего пользователя. Не через компонент, а непосре... Мобильные версии страниц и поисковые системы Просмотров: 5849 Согласно требования поисковых систем: Яндекс и Google, в случае если у вашего сайта имеетс... Композитный сайт на 1С-Битрикс Просмотров: 3037 Для новых клиентов: Все новые проекты будут включать в себя применение технологии "Компози... Открытие мобильного приложения Apache Cordova по ссылке Просмотров: 683 Достаточно часто нужно реализовывать открытие мобильного приложения по ссылке. Например: п... Фотогалерея на базе компонента новостей, с fancybox. Просмотров: 1542 Это заметка обновление к очень старой, уже имеющейся на сайте. Сделаем что-то типа фотогал... Добавить свойство в административную форму заказа Просмотров: 2809 Задача, кастомизировать административную форму заказа: добавить свойство заказа в шапку фо... Прятать или показывать описание раздела каталога Просмотров: 598 В новых компонентах и шаблонах catalog.section есть не документированный и не выводимый па... Получение доступа к железу устройства из Битрикс мобильное приложение Просмотров: 5603 Документация к мобильному приложению 1С-Битрикс очень куцая. В основном описывает функцион... Валидация пароля и подтверждения при регистрации в битрикс Просмотров: 14264 Встала задачка сделать валидацию пароля и его подтверждения в стандартной форме регистраци... Основные функции вывода в шаблонах Битрикс Просмотров: 155357 Знаю, что все их знают. Но иногда не бывает лишним собрать все самое используемое в одну к... Цвета торговых предложений из Highload инфоблоков в списке товаров Просмотров: 14086 Подвернулся на доработку очень старый сайт, работал еще на 11-ой версии Битрикс. Выполнили... Вывести все товары, с постраничной навигацией, из всех разделов инфоб... Просмотров: 28421 По сути, эта заметка, небольшой лайфхак. Достаточно часто нужно, в корне каталога, в ТОП-е... Умный фильтр на главной странице Битрикс Просмотров: 20882 Редкая но востребованная задачка- это вывести компонент "умный фильтр" на главную страницу... Отсортировать элементы в Битрикс по свойству привязка к разделам Просмотров: 27915 При создании достаточно сложных интернет-магазинов на Битрикс, иногда встает задача помимо... Дать пользователю возможность быстро отредактировать материал Просмотров: 4364 На одном из разрабатываемых сайтов, пользователи формирую его контент. После регистрации, ... AJAX корзина с отправкой количества из раздела каталога Просмотров: 19124 Столкнулся с задачкой: нужно было на одном сайте реализовать интерактивный прайс лист. При... Автоматическая загрузка каталогов из csv файлов в Битрикс Просмотров: 10631 Если требуется настроить автоматический импорт каталогов из csv файлов, от поставщиков. В... Связанные элементы в карточке товара, с помощью catalog.section Просмотров: 14029 Достаточно часто, при разработке магазинов на битрикс, требуется выводить связанные элемен... Добавление своих полей в почтовые шаблоны Битрикс Просмотров: 43635 Иногда нужно внести свои поля в почтовые шаблоны битрикс. Например: добавить имя и номе...