Документация для разработчиков
Темная тема

Примеры

Импорт данных из файла

// javascript
var progress = (new BX.UI.StepProcessing.Process({
		'id': 'awesome',
		'controller': 'bitrix:awesome.dancer'
	})
	// установить всю очередь заданий
	.setQueue([
		{'action': 'upload', 'title': 'Загрузка'},
		{'action': 'parse', 'title': 'Разбор'}
	])
	// добавить отдельное задание
	.addQueueAction({'action': 'finalize', 'finalize':  true}) 

	// установить поля на стартовый диалог
	.setOptionsFields({
		'convertEncoding': {
			'name' 'allowConvert',
			'type' 'checkbox',
			'title' Loc::getMessage('ALLOW_CONVERT'),
			'value' true,
		},
		'languages': {
			'name': 'languages',
			'type': 'select',
			'multiple': true,
			'size': 10,
			'title': Loc::getMessage('LANGUAGES'),
			'list': ['all': Loc::getMessage('LANGUAGES_ALL'), 'ru': 'ru', ...],
			'value': 'all',
		},
	})
	// добвить отдельное поле
	.addOptionsField('csvFile', {
		'name': 'csvFile',
		'type': 'file',
		'title': Loc::getMessage('TR_UPLOAD_CSV_FILE'),
		'obligatory': true,
		'emptyMessage': Loc::getMessage('TR_UPLOAD_CSV_FILE_EMPTY_ERROR'),
	})

	// параметры запроса
	.setParams({
		'key': 'any value',
		'path': '/somewhere/',
	})
	.setParam('key', 'any value')

	// фразы, выводимые на диалог и кнопки
	.setMessages({
		'DialogTitle': 'Импорт', // обязательно необходимо определить
		'DialogSummary': 'Импорт данных', // обязательно необходимо определить
		'DialogStartButton': 'Старт',
		'DialogStopButton': 'Стоп',
		'DialogCloseButton': 'Закрыть',
		'RequestCanceling': 'Отменяю..',
		'RequestCanceled': 'Процесс остановлен',
		'RequestCompleted': 'Готово!',
	})
	.setMessage('DialogStartButton', 'Старт')

	// функции коллбеки
	.setHandler(
		BX.UI.StepProcessing.ProcessCallback.StateChanged,
		function (state, result)
		{
		/** @type {BX.UI.StepProcessing.Process} this */
		if (state === BX.UI.StepProcessing.ProcessResultStatus.completed)
			{
				var grid = BX.Main.gridManager.getById(gridId);
				grid.reload();
				this.closeDialog();
			}
		}
	)
;
HTML
<button onclick="BX.UI.StepProcessing.ProcessManager.get('awesome').showDialog()" class="ui-btn ui-btn-primary">Импорт</button>

Дополнить параметры запроса на шаге

// javascript
var progress = (new BX.UI.StepProcessing.Process({
		'id': 'awesome',
		'controller': 'bitrix:awesome.dancer'
	})
	// функция колбек, вызываемая непосредственно для отправки ajax запроса
		.setHandler(
			BX.UI.StepProcessing.ProcessCallback.RequestStart,
			function(actionData)
			{
				/**
				* @var {FormData} actionData
				* @var {BX.UI.StepProcessing.Process} this
				*/
			actionData.append('smthg', 'got it!');
			}
		);

Параметры для запроса с формы на странице

// процесс 
var process = (new BX.UI.StepProcessing.Process({
		id: 'import',
		controller: 'bitrix:jobworking'
	}))
	// очередь заданий
	.addQueueAction({'action': 'dosmth', 'title': 'Делаю'})
	.setMessag('RequestCompleted', 'Сделал!');

var form = document.forms['form'];
process
	.setParams(BX.ajax.prepareForm(form).data)
	.showDialog()
	.start();

Перехват события DropFile в рабочей области

// capture file drop event
	BX("adm-workarea").ondrop = function (evt) 
	{
		// процесс 
		var process = (new BX.UI.StepProcessing.Process({
			id: 'import',
			controller: 'bitrix:importer'
		}))
		// поле типа файл
		.addOptionsField('File', {'type': 'file'})
		 // очередь заданий
		.addQueueAction({'action': 'upload', 'title': 'Загрузка'})
		.addQueueAction({'action': 'parse', 'title': 'Разбор'})
		.addQueueAction({'action': 'finalize', 'finalize':  true})
		.setMessag('RequestCompleted', 'Готово!')
		// вывести диалог
		.showDialog();

		// поле ввода типа file
		var fileInput = process.getDialog().getOptionField('File');
		if (fileInput)
		{
			// установка значания файла из события 
			fileInput.setValue(evt.dataTransfer.files);
		}
        
		// старт
		process.start();

		evt.preventDefault();
	};

Передача данных между итерациями

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

// payload action step
.addQueueAction({
	'title': 'Действие',
	'action': 'someAction',
	'handlers': {
		// сохраним значения total и processed между запросами
		'StepCompleted': function (state, result)
		{
			 /** @type {BX.UI.StepProcessing.Process} this */
			if (state === BX.UI.StepProcessing.ProcessResultStatus.progress)
			{
				var fields = this.getParam('fields') || [];
				if (result.TOTAL_ITEMS)
				{
					fields.totalItems = parseInt(result.TOTAL_ITEMS);
				}
				if (result.PROCESSED_ITEMS)
				{
					fields.processedItems = parseInt(result.PROCESSED_ITEMS);
				}
				this.setParam('fields', fields);
			}
		}
	}
})


Пользовательские комментарии

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

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
0
Беляев Владимир
Сообщение не промодерировано, возможны ошибки и неточности.
Цитата
пишет:
поправьте синтаксис примеров, там опечатки.
и для полноты хотелось бы увидеть бэкенд, который хотя бы будет имитировать работу
Бек для импорта в модуле translate можно посмотреть
2
Студия «СОВА»
Сообщение не промодерировано, возможны ошибки и неточности.
Цитата
и для полноты хотелось бы увидеть бэкенд, который хотя бы будет имитировать работу

/bitrix/modules/main/lib/controller/export.php
0
Иван Невраев
Сообщение не промодерировано, возможны ошибки и неточности.
Рабочий пример. Работает только с контроллером модуля. У меня не заработало с контроллером для компонента.


BX.UI.StepProcessing.ProcessManager.create(<?=Json::encode([ 'id' => 'import_product', // Уникальный идентификатор процесса в контексте страницы
   'controller' => 'bit:main.import', // дефолтый контроллер процесса
   'messages' => [
        // Для всех сообщений уже имеются фразы по-умолчанию.
        // Переопределение фразы необходимо для кастомизации под конкретную задачу.
       'DialogTitle' => "Импорт товаров", // Заголовок диалога
       'DialogSummary' => "Загрузите файл по установленному шаблону, введи ID сделки и нажмите кнопку Старт", // Аннотация на стартовом диалоге
       'DialogStartButton' => "Импорт", // Кнопка старт
       'DialogStopButton' => "Стоп", // Кнопка стоп
       'DialogCloseButton' => "Закрыть", // Кнопка закрыть
       'RequestCanceling' => "Прерываю...", // Аннотация, выводимая п прерывании процесса. По-умолчанию: 'Прерываю...'"
       'RequestCanceled' => "Пройесс прерван пользователем", // Аннотация, выводимая если процесс прерван
       'RequestCompleted' => "Импорт успешно завершен", // Текст на финальном диалоге успешного завершения
       'DialogExportDownloadButton' => "Скачать результаты импорта", // Кнопка для скачивания файла
       'DialogExportClearButton' => "Удалить файл", // Кнопка удаления файла
   ],
   
   // Очередь заданий
   'queue' => [
       [
           'action' => 'checkFile', // действие контроллера
           'title' => "Анотация диалога на шаге", // аннотация диалога на шаге
           'progressBarTitle' => "Короткая анотация для прогресс бара", // короткая аннотация для прогресс-бара
       ],
       [
           'action' => 'import', // действие контроллера
           'title' => "Анотация диалога на шаге", // аннотация диалога на шаге
           'progressBarTitle' => "Короткая анотация для прогресс бара", // короткая аннотация для прогресс-бара
       ],
   ],
   
   // поля, выводимые на стартовом диалоге
   'optionsFields' => [
      'csvFile' => [
           'name' => 'csvFile',// уникальное имя в рамках диалога
           'type' => 'file', // тип поля 'checkbox' | 'select' | 'radio' | 'text' | 'file'
           'title' => "CSV файл", // наименование поля
           'obligatory' => true, // обязателен для заполнения
           'emptyMessage' => "Обязательно прикрепите файл",//текст ошибки если не заполнено  
       ],
       'encodingIn' => [
           'name' => 'encodingIn',
           'type' => 'select',
           'title' => "Выберите кодировку",
           'list' => [
             'utf-8' => "UTF-8",// список {value: title}
             'win-1251' => "Windows - 1251",
           ],
           'value' => 'win-1251',// значение по-умолчанию
           'multiple' => false, // селектор множественного выбора. Только для полей 'checkbox' | 'select'
           'obligatory' => true,
       ],
       'dealId' => [
           'name' => 'dealId',
           'type' => 'text',
           'title' => 'Введите ID сделки',
           'obligatory' => true,
           'emptyMessage' => "Не указали ID сделки",

       ]
   ],
   'showButtons' => [
       'start' => true, // вывести кнопку Старт. По-умолчанию: true
       'stop' => false, // вывести кнопку Стоп. По-умолчанию: true
       'close' => true, // вывести кнопку Закрыть. По-умолчанию: true
   ],
])?>);

</script>
<button oncl ick="BX.UI.StepProcessing.ProcessManager.get('import_product').showDialog();" class="ui-btn ui-btn-primary">Импорт CSV</button>
2
Михаил Косов
Сообщение не промодерировано, возможны ошибки и неточности.
поправьте синтаксис примеров, там опечатки.
и для полноты хотелось бы увидеть бэкенд, который хотя бы будет имитировать работу
© «Битрикс», 2001-2024, «1С-Битрикс», 2024
Наверх