Examples

Data import from file

// javascript
var progress = (new BX.UI.StepProcessing.Process({
        'id': 'awesome',
        'controller': 'bitrix:awesome.dancer'
    })

    // set complete actions queue
    .setQueue([
        {'action': 'upload', 'title': 'Upload'},
        {'action': 'parse', 'title': 'Parse'}
    ])
    // add separate action
    .addQueueAction({'action': 'finalize', 'finalize':  true}) 

    // set fields for start dialog window
    .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'), 'en': 'de', ...],
            'value': 'all',
        },
    })
    // add a separate field
    .addOptionsField('csvFile', {
        'name': 'csvFile',
        'type': 'file',
        'title': Loc::getMessage('TR_UPLOAD_CSV_FILE'),
        'obligatory': true,
        'emptyMessage': Loc::getMessage('TR_UPLOAD_CSV_FILE_EMPTY_ERROR'),
    })

    // query parameters
    .setParams({
        'key': 'any value',
        'path': '/somewhere/',
    })
    .setParam('key', 'any value')

    // phrases, printed to dialog window and buttons
    .setMessages({
        'DialogTitle': 'Import', // must be defined
        'DialogSummary': 'Data import', // must be defined
        'DialogStartButton': 'Start',
        'DialogStopButton': 'Stop',
        'DialogCloseButton': 'Close',
        'RequestCanceling': 'Cancelling..',
        'RequestCanceled': 'Process stopped',
        'RequestCompleted': 'Complete!',
    })
    .setMessage('DialogStartButton', 'Start')

    // Callback functions
    .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">Import</button>

Add query parameters at a step

// javascript
var progress = (new BX.UI.StepProcessing.Process({
        'id': 'awesome',
        'controller': 'bitrix:awesome.dancer'
    })
    // callback function, called directly for sending AJAX query
	.setHandler(
		BX.UI.StepProcessing.ProcessCallback.RequestStart,
		function(actionData)
		{
			/**
			 * @var {FormData} actionData
			 * @var {BX.UI.StepProcessing.Process} this
			 */
			actionData.append('smthg', 'got it!');
		}
    );

Parameters for query for from form indicated on a page

// process 
var process = (new BX.UI.StepProcessing.Process({
        id: 'import',
        controller: 'bitrix:jobworking'
    }))
    // action queue
    .addQueueAction({'action': 'dosmth', 'title': 'In progress'})
    .setMessag('RequestCompleted', 'Complete!');

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

Capturing the event DropFile

    // capture file drop event
    BX("adm-workarea").ondrop = function (evt) 
    {
        // process 
        var process = (new BX.UI.StepProcessing.Process({
                id: 'import',
                controller: 'bitrix:importer'
            }))
            // file type field
           .addOptionsField('File', {'type': 'file'})
           // action queue
           .addQueueAction({'action': 'upload', 'title': 'Upload'})
           .addQueueAction({'action': 'parse', 'title': 'Parse'})
           .addQueueAction({'action': 'finalize', 'finalize':  true})
           .setMessag('RequestCompleted', 'Complete!')
            // show dialog window
           .showDialog();

        // file input field
        var fileInput = process.getDialog().getOptionField('File');
        if (fileInput)
        {
            // set file value from event 
            fileInput.setValue(evt.dataTransfer.files);
        }
        
        // start
        process.start();

        evt.preventDefault();
    };

Passing data between iterations

When required to pass data between iterations of a single step, use the callback StepCompleted, called each time receiving response from server.

// payload action step
.addQueueAction({
    'title': 'Action',
    'action': 'someAction',
    'handlers': {
        // save 'total' and 'processed' values between queries
        '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);
            }
        }
    }
})