Диалог Форма быстрых полей

Компонент ui.dialogs.checkbox-list выводит попап с чекбоксами для настройки вывода вашего контента.

Подключение

JS

import {CheckboxList} from 'ui.dialogs.checkbox-list';

PHP

\Bitrix\Main\UI\Extension::load('ui.dialogs.checkbox-list');

Использование

В js-коде необходимо инициализировать расширение и передать json.

Параметры

Обязательные параметры отмечены *

Параметр тип	Описание
popupOptions popupOptions	Добавление параметров в popup
columnCount number	Количество столбцов при отображении popup. По умолчанию имеет значение 4
lang* object	Заголовок окна title string. При необходимости возможно заменить фразы на кнопках: switcher string — текст вместо «Компактный вид полей» placeholder string — placeholder поля поиска defaultBtn string — текст ссылки «По умолчанию» acceptBtn string — текст кнопки «Применить» cancelBtn string — текст кнопки «Отменить» selectAllBtn string — текст ссылки «Выбрать все» deselectAllBtn string — текст ссылки «Отменить все»
compactField object	Значение switcher: value boolean — его текущее состояние defaultValue boolean — значение по умолчанию
sections array	Массив объектов с данными о секции: title string — заголовок секции key string — уникальный ключ value boolean — включена или выключена секция
categories* array	Массив объектов с описаниями категорий: title string — заголовок категории key string — уникальный ключ sectionKey string — ключ секции, к которой относится категория
options* Array	Массив объектов с описаниями опций в виде чекбоксов: title string — заголовок опции value boolean — включена или выключена опция defaultValue boolean — значение, которое будет установлено после клика по «← По умолчанию» categoryKey string — ключ категории к которой относится опция id string — уникальный id
events* object	Передается событие onApply. Оно срабатывает при нажатии на кнопку Применить.

Методы

Метод	Описание
show(): void	Отображает диалог на странице
show(): void	Скрывает диалог на странице

Пример вызова

const checkboxList = new BX.UI.CheckboxList({
    popupOptions: {
        width: 1100,
    },
    columnCount: 4,
    lang: {
        title: 'Настройка полей для быстрой формы создания',
    },
    compactField: {
        value: true,
        defaultValue: true,
    },
    sections: [
        {
            key: 'SECTION_1',
            title: 'Сделка',
            value: true,
        },
    ],
    categories: [
        {
            title: 'О сделке',
            sectionKey: 'SECTION_1',
            key: 'about'
        },
    ],
    options: [
        {
            title: 'Дата',
            value: true,
            categoryKey: 'about',
            defaultValue: true,
            id: '1',
        },
        {
            title: 'Не отмеченный чекбокс',
            value: false,
            categoryKey: 'about',
            defaultValue: true,
            id: '2',
        },
    ],
    events: {
        onApply: (event) => {
            console.log("event.data",  event.data.fields);
        },
    },
});

checkboxList.show();