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

UI-библиотека

Описание и расширения

UI-библиотека (user interface) — это библиотека пользовательских интерфейсов.

Основная задача модуля — стандартизировать и централизовать управление стилями и поведением типовых элементов, таких как: кнопки, формы, иконки, табы и т.п.

Модуль несёт системный характер. Его нельзя ни отключить, ни удалить. Он подключается автоматически при его использовании. Всё остальное время модуль неактивен.

РасширениеОписание
ui.entity-selectorДиалог выбора сущностей.
ui.buttonsКнопки.
ui.formsФормы.
ui.alertsСообщения.
ui.iconsИконки.
ui.progressbarПрогрессБар.
ui.notificationНотификации.
ui.hintПодсказки.
ui.button.panelПанель кнопок.
toolbarТулбар.
ui.stepprocessingДиалог для пошагового процесса.

Примеры

Универсальный пример получения доступа к API поля. С помощью этого API устанавливаются значения, удаляются значения и так далее.

// Получаем ссылку на DOM-элемент поля
var element = document.querySelector("[data-name=\"sEmployeeGroup\"]");
// Получаем запись из BX.Main.ui.Factory
var field = BX.Main.ui.Factory.get(element);

if (field)
{
   // Получаем ссылку на экземпляр класса поля
   var fieldInstance = field.instance;
    
   // Далее можно использовать API:

   // Установка значения для поля типа main-ui-select
   fieldInstance.updateValue(fieldInstance.getItems()[0]);
   fieldInstance.updateDataValue(fieldInstance.getItems()[0]);

   // Установка значения для поля типа main-ui-multi-select
   fieldInstance.selectItem(fieldInstance.getItems()[0]);
   // Удаление значения для поля типа main-ui-multi-select
   fieldInstance.unselectItem(fieldInstance.getItems()[0]);
}

Как через js библиотеку BX поменять настройки фильтра на странице.

var filter = BX.Main.filterManager.getById('my_filter_id');

if (filter) {
  var filterApi = filter.getApi();
  filterApi.setFields({'NAME': 'main 17.0.7'});
  filterApi.apply();
}

Смотрите также:



© «Битрикс», 2001-2023, «1С-Битрикс», 2023