Виджеты

Тип метаданных

widget

Библиотека компонентов

http://n2oapp.net/framework/config/schema/widget-5.0

Базовые свойства

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
id	Строка	Идентификатор виджета внутри страницы	Генерируется по индексу wgt[idx]
ref-id	Ссылка	Ссылка на родительский файл виджета
src	Строка	React компонент виджета	Для каждого виджета своя реализация по умолчанию. Для `<widget>` атрибут обязательный.
class	CSS класс	Класс компонента виджета
style	CSS свойство	Стиль компонента виджета
datasource	Ссылка на источник данных	Идентификатор источника данных для виджета
fetch-on-init	true false	Получение данных при инициализации
fetch-on-visibility	true false	Получение данных при появлении по условию видимости
visible	true false	Видимость виджета
auto-focus	true false	Автоматическая установка фокуса на виджете	false

Настройки

# Автоматическая установка фокуса на виджете
n2o.api.widget.auto_focus=false

Простые виджеты

<calendar>

Виджет Календарь.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
height	Строка	Высота календаря. Доступные единицы измерения: `px`, `em`, `rem`. При указании числа оно будет приведено к `px`
default-date	Строка	Стартовая дата календаря (по умолчанию текущая)
default-view	day week workWeek month agenda	Вид отображения календаря по умолчанию	month
views	Строка	Список используемых видов отображения в календаре (через запятую)		!
min-time	Строка	Минимальное отображаемое время
max-time	Строка	Максимальное отображаемое время
mark-days-off	true false	Подсветка выходных дней	true
selectable	true false	Включает возможность добавлять события в календарь	true
step	Число	Шаг при создании события (в минутах)	30
timeslot-count	Число	Количество слотов на раздел	2
title-field-id	Строка	Поле выборки, отвечающее за заголовок события		!
tooltip-field-id	Строка	Поле выборки, отвечающее за данные тултипа события		!
start-field-id	Строка	Поле выборки, отвечающее за дату начала события		!
end-field-id	Строка	Поле выборки, отвечающее за дату завершения события		!
cell-color-field-id	Строка	Поле выборки, отвечающее за цвет ячейки события		!
disabled-field-id	Строка	Поле выборки, отвечающее за блокирование события для выбора		!

Настройки

#Количество событий в календаре (число)
n2o.api.widget.calendar.size=50
#Вид календаря по умолчанию
n2o.api.widget.calendar.view=month
#Подсветка выходных дней
n2o.api.widget.calendar.mark_days_off=true
#Включает возможность добавлять события в календарь
n2o.api.widget.calendar.selectable=true
#Шаг при создании события в минутах
n2o.api.widget.calendar.step=30
#Количество слотов на раздел
n2o.api.widget.calendar.time_slot_count=2

Тело
<resources> - Ресурсы календаря
<action-on-select-slot> - Действие на добавление события в календаре html
<action-on-select-event> - Действие на клик по событию
<formats> - Форматы дат и времени
<dependencies> - Зависимости виджета
<datasource> - Встроенный источник данных
<toolbar> - Меню управляющих кнопок виджета
<actions> - Встроенные действия

Пример

<calendar
  height="500px" default-view="month" views="month,day,agenda"
  min-time="08:00:00" max-time="20:00:00"
  title-field-id = "title" tooltip-field-id = "tooltip"
  start-field-id = "start" end-field-id = "end" cell-color-field-id = "color"
  disabled-field-id = "disabled">
  <resources>...</resources>
  <action-on-select-slot>...</action-on-select-slot>
  <action-on-select-event>...</action-on-select-event>
  <formats>...</formats>
</calendar>

<resources>

Ресурсы календаря.
Ресурсы используются для возможности разбиения календаря на определенные сущности (бронирование переговорных комнат и т.д.).

Артибуты

Наименование	Тип	Описание
value-field-id	Строка	Поле выборки, отвечающее за маппинг ресурсов

Тело
<resource> - Ресурс календаря

Пример

<resources value-field-id="resourceId">
 ...
</resources>

<resource>

Ресурс календаря.

Атрибуты

Наименование	Тип	Описание	Обязательность
id	Строка	Идентификатор ресурса	!
title	Строка	Имя ресурса	!

Пример

<resource id="1" title="Meeting room"/>

<action-on-select-slot>

Действие на добавление события в календаре.

Тело
Ссылка на Обработчик действия

<action-on-select-event>

Действие на клик по событию.

Тело
Ссылка на Обработчик действия

<formats>

Форматы дат и времени.

Тело
<format> - Формат дат и времени

<format>

Формат даты и времени.

Атрибуты

Наименование	Тип	Описание	Обязательность
id	dateFormat dayFormat weekdayFormat timeGutterFormat monthHeaderFormat dayRangeHeaderFormat dayHeaderFormat agendaHeaderFormat selectRangeFormat agendaDateFormat agendaTimeFormat agendaTimeRangeFormat eventTimeRangeFormat eventTimeRangeStartFormat eventTimeRangeEndFormat	Тип формата. Список всех возможных форматов	!
value	Строка	Значение формата	!

Пример

<format id="dayFormat" value="dd"/>

<chart>

Виджет График.

Атрибуты

Наименование	Тип	Описание
width	Строка	Ширина графика. Доступные единицы измерения: `px`. При указании числа оно будет приведено к `px`
height	Строка	Высота графика. Доступные единицы измерения: `px`. При указании числа оно будет приведено к `px`

Тело
<areas> - Диаграмма-область
<bars> - Гистограмма
<lines> - Линейный график
<pie> - Круговая диаграмма
<dependencies> - Зависимости виджета
<datasource> - Встроенный источник данных
<toolbar> - Меню управляющих кнопок виджета
<actions> - Встроенные действия

Пример

<chart width="600px" height="400px" datasource="ds1">
    <areas>
        <area>...</area>
    </areas>
</chart>

<form>

Виджет Форма.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
mode	one-model two-models	Режим работы формы. Возможные значения: one-model - одна модель редактируется и отправляется. two-models - 2х модельный режим (при первой загрузке данные копируются в модель resolve и edit. При редактировании формы меняется модель edit.)	one-model
unsaved-data-prompt	true false	Показать предупреждение о наличии несохраненных данных.	false

Настройки

#Показать предупреждение о наличии несохраненных данных в форме
n2o.api.widget.form.unsaved_data_prompt=false
#Количество записей в форме (число)
n2o.api.widget.form.size=1

Тело
<fields> - Поля формы
<dependencies> - Зависимости виджета
<datasource> - Встроенный источник данных
<toolbar> - Меню управляющих кнопок виджета
<actions> - Встроенные действия

Пример

<?xml version='1.0' encoding='UTF-8'?>
<form xmlns="http://n2oapp.net/framework/config/schema/widget-5.0"
  name="Моя форма"
  object-id="myObject">
  <fields>...</fields>
  <toolbar>...</toolbar>
</form>

<html>

HTML виджет. Виджет, отображающий HTML содержимое.

Тело
<content> - Контент для отображения html

<content>

Контент для отображения html.

Атрибуты

Наименование	Тип	Описание
url	Строка	URL адрес HTML страницы. Если не задан, необходимо задать содержимое в теле.

Пример

<html>
    <content url="index.html"/>
</html>

Пример

<html>
    <content>
        <![CDATA[
            <div class='test'><p>Hello</p></div>
        ]]>
    </content>
</html>

Настраиваемый виджет.

Атрибуты

Наименование	Тип	Описание
src	Строка	React компонент виджета

Через расширенные свойства можно указать дополнительные свойства виджета.

Тело
Произвольные элементы и атрибуты.

Пример

<?xml version='1.0' encoding='UTF-8'?>
<widget src="MyWidget"
        ext:prop1="value1"
        ext:prop2="value2">
</widget>

Списковые виджеты

<cards>

Виджет Карточки.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
id	Строка	Идентификатор виджета
vertical-align	center top bottom	Выравнивание по вертикали содержимого колонок	top
height	Строка	Высота карточек. Доступные единицы измерения: `px`, `em`, `rem`. При указании числа оно будет приведено к `px`

Настройки

#значение по умолчанию для пагинации карточек
n2o.api.widget.cards.size=10
#значение по умолчанию для выравнивания карточек (top/center/bottom)
n2o.api.widget.cards.vertical_align=top
#значение по умолчанию для высоты карточек
n2o.api.widget.cards.height=

Тело
<content> - Список колонок (карточек)
<pagination> - Пагинация карточек
<dependencies> - Зависимости виджета
<datasource> - Встроенный источник данных
<toolbar> - Меню управляющих кнопок виджета
<actions> - Встроенные действия

Пример

<cards id="cards_id" vertical-align="center" height="400px">
  <content>...</content>
  <pagination>...</pagination>
</tiles>

<content>

Содержимое виджета: список колонок (карточек).

Тело
<col> - Колонка

<col>

Колонка.

Атрибуты

Наименование	Тип	Описание
size	Число	Ширина колонки согласно сетке bootstrap (1-12).

Тело
<block> - Блок.

Пример

<content>
  <col>
    <block>...</block>
    <block>...</block>
  </col>
  <col>
    <block>...</block>
  </col>
</content>

<block>

Блок.

Атрибуты

Наименование	Тип	Описание
id	Строка	Идентификатор ресурса
text-field-id	Строка	Поле выборки, отображаемое в блоке
tooltip-field-id	Строка	Поле выборки, отображаемое при наведении на ячейку
class	Строка	Класс компонента блока
style	Строка	Стиль компонента блока

Тело
Ячейка.

<list>

Виджет Список.

Настройки

#Количество записей в списке (число)
n2o.api.widget.list.size=5

Тело
<content> - Содержимое списка
<rows> - Настройки строк списка
<pagination> - Пагинация
<dependencies> - Зависимости виджета
<datasource> - Встроенный источник данных
<toolbar> - Меню управляющих кнопок виджета
<actions> - Встроенные действия

Пример

<?xml version='1.0' encoding='UTF-8'?>
<list name="Мой список"
      datasource="myList">
  <content>...</content>
  <pagination>...</pagination>
</list>

<content>

Содержимое списка.

Тело
<left-top>
<left-bottom>
<header>
<body>
<sub-header>
<right-top>
<right-bottom>
<extra>

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
text-field-id	Строка	Поле выборки, отображаемое в строке списка в виде текста

Тело
Ячейка

Пример

 <content>
    <left-top text-field-id="image">
        <image width="50px"/>
    </left-top>
 </content>

<rows>

Настройки строк списка.

Тело
<click> - Клик по строке

Пример

 <list>
     <content>
        <left-top id="leftTop">
            <image class="list-image"/>
        </left-top>
     </content>
     <rows>
        <click>...</click>
     </rows>
     <pagination>...</pagination>
 </list>

<table>

Виджет Таблица.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
selection	none active radio checkbox	Вариант выбора строки таблицы	active
width	Строка	Максимальная ширина таблицы. Доступные единицы измерения: `px`, `em`, `rem`, `%`. При указании числа оно будет приведено к `px`
height	Строка	Максимальная высота таблицы. Доступные единицы измерения: `px`, `em`, `rem`. При указании числа оно будет приведено к `px`
text-wrap	true false	Перенос текста в ячейке	true
auto-select	true false	Автоматическое выделение первой строки таблицы	true
children	collapse expand	Отображение дочерних записей в свернутом или раскрытом виде	collapse
sticky-header	true false	Фиксация шапки таблицы при вертикальном скроле	false
sticky-footer	true false	Фиксация футера таблицы при вертикальном скроле	false
scrollbar-position	top bottom	Расположение горизонтального скрол-бара	bottom

note

Для выравнивания содержимого ячеек по верхнему или по нижнему краю используйте class="text-align-top" или class="text-align-bottom"

Настройки

#Количество записей в таблице (число)
n2o.api.widget.table.size=10
#Перенос текста в ячейке
n2o.api.widget.table.text_wrap=true
#Срабатывание (включение/выключение) чекбокса при клике по строке
n2o.api.widget.table.check_on_select=false
#Автоматическое выделение первой строки таблицы
n2o.api.widget.table.auto_select=true
#Отображение дочерних записей в свернутом виде
n2o.api.widget.table.children.toggle=collapse
#Вариант выбора записей в таблице (none/active/radio/checkbox)
n2o.api.widget.table.selection=active
#Наличие чекбоксов в первом столбце таблицы
n2o.api.widget.table.checkboxes=false
#Фиксация шапки таблицы при вертикальном скроле
n2o.api.widget.table.sticky_header=false
#Фиксация футера таблицы при вертикальном скроле
n2o.api.widget.table.sticky_footer=false
#Расположение горизонтального скрол-бара
n2o.api.widget.table.scrollbar_position=bottom

Тело
<columns> - Столбцы таблицы
<rows> - Настройки строк таблицы
<filters> - Фильтры таблицы
<pagination> - Пагинация таблицы
<dependencies> - Зависимости виджета
<datasource> - Встроенный источник данных
<toolbar> - Меню управляющих кнопок виджета
<actions> - Встроенные действия

Пример

<?xml version='1.0' encoding='UTF-8'?>
<table xmlns="http://n2oapp.net/framework/config/schema/widget-5.0"
  name="Моя таблица" datasource="ds1"
  size="10" children="expand">
  <datasource>...</datasource>
  <filters>...</filters>
  <toolbar>...</toolbar>
  <columns>...</columns>
  <rows>...</rows>
  <pagination>...</pagination>
</table>

<columns>

Столбцы таблицы.

Тело
<column> - Столбец таблицы
<filter-column> - Фильтруемый столбец таблицы
<multi-column> - Многоуровневый столбец таблицы
<dnd-column> - Drag-n-drop столбец таблицы

Пример

<columns>
  <column>...</column>
  <filter-column>...</filter-column>
  <multi-column>...</multi-column>
  <dnd-column>...</dnd-column>
</columns>

<column>

Столбец таблицы.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
id	Строка	Идентификатор столбца	Значение `text-field-id`
src	Строка	React компонент столбца таблицы
class	CSS класс	Класс компонента заголовка столбца таблицы
style	CSS свойство	Стиль компонента заголовка столбца таблицы
text-field-id	Ссылка на поле выборки	Поле выборки, отображаемое в столбце в виде текста
tooltip-field-id	Ссылка на поле выборки	Поле выборки, отображаемое при наведении на ячейку
visible	true false	Столбец видимый по умолчанию?	true
width	Строка	Ширина столбца. Доступные единицы измерения: `px`, `em`, `rem`, `%`. При указании числа оно будет приведено к `px`
resizable	true false	Можно ли изменить ширину столбца	false
label	Строка	Наименование заголовка столбца	Значение `name` поля выборки, указанного в `text-field-id`, иначе значение `text-field-id`
icon	Класс иконки	Иконка заголовка столбца
sorting-field-id	Ссылка на поле выборки	Поле, по которому сортируется столбец	Значение `text-field-id`
sorting-direction	asc desc	Направление сортировки по умолчанию
fixed	left right	Прилипание столбца к краю
alignment	left right center	Выравнивание заголовка столбца таблицы	left
content-alignment	left right center	Выравнивание контента в ячейках столбца таблицы	совпадает с alignment, если столбец не входит в multi-column

Настройки

#Выравнивание заголовка простого и фильтрующего столбца
n2o.api.widget.column.alignment=left
#Скрытие ячейки при наведении на строку
n2o.api.widget.table.column.hide_on_blur=false
#Можно ли изменить ширину столбца
n2o.api.widget.table.column.resizable=false

Тело
Ссылка на Ячейку
<dependencies> - Зависимости столбца

Пример

<column
  label="Имя"
  text-field-id="firstName"
  sorting-field-id="firstName"
  sorting-direction="asc">
    <dependencies>
     ...
    </dependencies>
 </column>

<dependencies>

Зависимости столбца.

Тело
<visibility> - Условие видимости столбца

Пример

<column text-field-id="name">
  <dependencies>
      <visibility>
        ...
      </visibility>
  </dependencies>
</column>

<visibility>

Видимость столбца.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
on	Строка	Поля, от которых зависит условие видимости	Вычисляется по условию
reset	true false	Сбросить значение при скрытии	false

Тело
Java Script выражение.

Пример

<column text-field-id="name">
    <dependencies>
        <visibility on="type" reset="true">type.id == 1</visibility>
        <!-- Колонка видима, если type.id равен 1 -->
    </dependencies>
</column>

<filter-column>

Фильтруемый столбец таблицы.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
id	Строка	Идентификатор столбца	Значение `text-field-id`
text-field-id	Ссылка на поле выборки	Поле выборки, отображаемое в столбце
tooltip-field-id	Ссылка на поле выборки	Поле выборки, отображаемое при наведении на ячейку
visible	true false	Столбец видимый по умолчанию?	true
width	Строка	Ширина столбца. Доступные единицы измерения: `px`, `em`, `rem`, `%`. При указании числа оно будет приведено к `px`
resizable	true false	Можно ли изменить ширину столбца	false
label	Строка	Наименование заголовка столбца	Значение `name` поля выборки, указанного в `text-field-id`, иначе значение `text-field-id`
icon	Класс иконки	Иконка заголовка столбца
sorting-field-id	Ссылка на поле выборки	Поле, по которому сортируется столбец	Значение `text-field-id`
sorting-direction	asc desc	Направление сортировки по умолчанию
fixed	left right	Прилипание столбца к краю
src	Строка	React компонент столбца таблицы
class	CSS класс	Класс компонента заголовка столбца таблицы
style	CSS свойство	Стиль компонента заголовка столбца таблицы
alignment	left right center	Выравнивание заголовка столбца таблицы	left
content-alignment	left right center	Выравнивание контента в ячейках столбца таблицы	совпадает с alignment

Настройки

#Выравнивание заголовка простого и фильтрующего столбца
n2o.api.widget.column.alignment=left
#Скрытие ячейки при наведении на строку
n2o.api.widget.table.column.hide_on_blur=false
#Можно ли изменить ширину столбца
n2o.api.widget.table.column.resizable=false

Тело
<cell> - Ячейка столбца
<filter> - Фильтр столбца

Пример

<filter-column
  label="Имя"
  text-field-id="firstName"
  sorting-field-id="firstName"
  sorting-direction="asc">
  <filter>...</filter>
  <cell>...</cell>
</filter-column>

<filter>

Фильтр столбца.

Тело
Поле ввода

Пример

<filter>
  <input-text>...</input-text> <!--Поле-->
</filter>

<multi-column>

Многоуровневый столбец таблицы.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
label	Строка	Наименование заголовка столбца	Значение поля выборки `text-field-id`, иначе значение `id`
src	Строка	React компонент столбца таблицы
class	CSS класс	Класс компонента заголовка столбца таблицы
style	CSS свойство	Стиль компонента заголовка столбца таблицы
alignment	left right center	Выравнивание заголовка столбца таблицы	center
content-alignment	left right center	Выравнивание контента в ячейках вложенных столбцов (значение content-alignment, указанное во вложенном столбце в приоритете)
width	Строка	Ширина столбца. Доступные единицы измерения: `px`, `em`, `rem`, `%`. При указании числа оно будет приведено к `px`
fixed	left right	Прилипание столбца к краю

Настройки

#Выравнивание заголовка мульти столбца
n2o.api.widget.column.multi.alignment=center

Тело
<column> - Столбец таблицы
<filter-column> - Фильтруемый столбец таблицы
<multi-column> - Многоуровневый столбец таблицы

Пример

<multi-column label="Имя">
  <column>...</column>
  <column>...</column>
</multi-column>

<dnd-column>

Drag-n-drop столбец таблицы

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
move-mode	settings table all	Режим перемещения колонок: `settings` - только через настройки `table` - только через таблицу `all` - через настройки и таблицу	all
fixed	left right	Прилипание столбца к краю

Настройки

#Режим перемещения колонок
n2o.api.widget.column.dnd.move_mode = all

Тело

<column> - Столбец таблицы
<filter-column> - Фильтруемый столбец таблицы

Пример

<dnd-column move-mode="settings">
    <column text-field-id="name"/>
    <column text-field-id="type"/>
</dnd-column>

<rows>

Настройки строк таблицы.

Атрибуты

Наименование	Тип	Описание
src	Строка	React компонент строки
class	CSS класс	Класс компонента строки. Поле выборки, отвечающее за класс строки (таким образом можно задать цвет, стиль, фон строки)
style	CSS свойство	Стиль компонента строки

Тело
<switch> - Переключатель
<click> - Клик по строке
<overlay> - Наведение на строку

Примеры

<rows class="{type==1?'text-muted':''}"/>

<rows>
    <switch value-field-id="type">
        ...
    </switch>
    <click>
        ...
    </click>
    <overlay>
        ...
    </overlay>
</rows>

<overlay>

Наведение на строку.

Атрибуты

Наименование	Тип	Описание
class	CSS класс	Класс компонента строки таблицы

Тело
<toolbar> - Меню управляющих кнопок виджета

Пример

<overlay class="top">
    <toolbar>
        <button label="Кнопка"/>
        <sub-menu label="Меню">
            <menu-item label="Кнопка1"/>
            <menu-item label="Кнопка2"/>
        </sub-menu>
    </toolbar>
</overlay>

<filters>

Фильтры таблицы

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
place	top left	Позиция фильтров	top
fetch-on-change	true false	Запуск фильтрации при изменении полей фильтров	false
fetch-on-clear	true false	Запуск фильтрации при сбросе фильтров	true
fetch-on-enter	true false	Запуск фильтрации при нажатии на Enter	true
datasource	Ссылка на источник данных	Идентификатор источника данных для виджета

Настройки

#Запуск фильтрации при изменении полей фильтров
n2o.api.widget.table.fetch_on_change = false
#Запуск фильтрации при сбросе фильтров
n2o.api.widget.table.fetch_on_clear = true
#Запуск фильтрации при нажатии на Enter
n2o.api.widget.table.fetch_on_enter = true

Тело

Список филдсетов
Список полей

Пример

<filters>
  <input-text>...</input-text> <!--Поле-->
  <select>...</select> <!--Поле-->
  <set>...</set> <!--Филдсет-->
  <line>...</line> <!--Филдсет-->
  ...
</filters>

<tiles>

Виджет Плитки.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
id	Строка	Идентификатор виджета
cols-sm	1, 2	Количество колонок в мобильной версии	1
cols-md	1, 2, 3, 4, 6	Количество колонок в планшетах	2
cols-lg	1, 2, 3, 4, 6, 12	Количество колонок в десктопной версии	3
height	Строка	Минимальная высота плитки. Доступные единицы измерения: `px`, `em`, `rem`, `%`. При указании числа оно будет приведено к `px`
width	Строка	Ширина плитки. Доступные единицы измерения: `px`, `em`, `rem`, `%`. При указании числа оно будет приведено к `px`

Настройки

#Количество колонок в мобильной версии
n2o.api.widget.tiles.colsSm=1
#Количество колонок в планшетах
n2o.api.widget.tiles.colsMd=2
#Количество колонок в десктопной версии
n2o.api.widget.tiles.colsLg=4
#Минимальная высота плитки
n2o.api.widget.tiles.height=
#Ширина плитки
n2o.api.widget.tiles.width=
#Количество плиток на странице
n2o.api.widget.tiles.size=10

Тело
<content> - Содержимое виджета Плитки
<pagination> - Пагинация плиток
<dependencies> - Зависимости виджета
<datasource> - Встроенный источник данных
<toolbar> - Меню управляющих кнопок виджета
<actions> - Встроенные действия

Пример

<tiles id="tiles_id" cols-lg="6">
  <content>...</content>
  <pagination>...</pagination>
</tiles>

<content>

Содержимое виджета Плитки.

Тело
<block> - Список блоков.

Пример

<content>
  <block>...</block>
  <block>...</block>
</content>

<block>

Блок.

Атрибуты

Наименование	Тип	Описание
id	Строка	Идентификатор ресурса
text-field-id	Строка	Поле выборки, отображаемое в блоке
tooltip-field-id	Строка	Поле выборки, отображаемое при наведении на ячейку
class	CSS класс	Класс компонента блока
style	CSS свойство	Стиль компонента блока

Тело
Ячейка.

Пример

<block text-field-id="id" tooltip-field-id="tooltip">
    <text/>
</block>

<tree>

Виджет Дерево.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
parent-field-id	Ссылка на поле выборки	Родительский узел дерева
value-field-id	Ссылка на поле выборки	Идентификатор узла дерева
label-field-id	Ссылка на поле выборки	Наименование узла дерева
icon-field-id	Ссылка на поле выборки	Иконка узла дерева
has-children-field-id	Ссылка на поле выборки	Наличие дочерних элементов
badge-field-id	Ссылка на поле выборки	Значок узла дерева
badge-color-field-id	Ссылка на поле выборки	Цвет значка узла дерева
badge-position	left right	Позиция значка	right
badge-shape	rounded circle square	Форма значка	square
badge-image-field-id	Ссылка на поле выборки	Картинка в значке
badge-image-position	left right	Позиция картинки в значке	left
badge-image-shape	rounded circle square	Форма картинки в значке	circle
image-field-id	Ссылка на поле выборки	Изображение узла дерева
multi-select	true false	Режим множественного выбора	true
checkboxes	true false	Выбор в режиме чекбокс	false
ajax	true false	Поддержка загрузки через ajax запрос	false

note

Записи должны ссылаться "сами на себя" (parent-field-id), образуя древовидную структуру.

Настройки

#Позиция значка в widget <tree>
n2o.api.widget.tree.badge.position=right
#Форма значка в widget <tree>
n2o.api.widget.tree.badge.shape=square
#Позиция картинки в значке в widget <tree>
n2o.api.widget.tree.badge.image_position=left
#Форма картинки в значке в widget <tree>
n2o.api.widget.tree.badge.image_shape=circle
#Количество записей в дереве за один запрос (число)
n2o.api.widget.tree.size=200
#Поддержка загрузки через ajax запрос
n2o.api.widget.tree.ajax=false
#Режим множественного выбора
n2o.api.widget.tree.multi_select=false
#Выбор в режиме чекбокс
n2o.api.widget.tree.checkboxes=false

Тело
<pagination> - Пагинация таблицы
<dependencies> - Зависимости виджета
<datasource> - Встроенный источник данных
<toolbar> - Меню управляющих кнопок виджета
<actions> - Встроенные действия

Пример

<?xml version='1.0' encoding='UTF-8'?>
<tree xmlns="http://n2oapp.net/framework/config/schema/widget-5.0"
    name="Моё дерево"
    parent-field-id="parentId"
    label-field-id="name"
    datasource="ds1">
</tree>

Зависимости виджета

<dependencies>

Зависимости виджета.

Тело
<visibility> - Условие видимости
<enabling> - Условие доступности

Встроенный источник данных

<datasource>

Встроенный источник данных виджета.

По умолчанию id источника данных совпадает с id виджета.

Ссылка на Источник данных

Меню управляющих кнопок

Меню управляющих кнопок виджета.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
class	CSS класс	Класс компонента меню
style	CSS свойство	Стиль компонента меню
place	topLeft topRight bottomLeft bottomRight topCenter bottomCenter	Место расположения меню	topLeft
generate	crud create update delete close submit	Генерация стандартных кнопок. Можно указать несколько значений через запятую

Настройки

# Место расположения меню
n2o.api.widget.toolbar.place=topLeft

Тело
<button> - Кнопка
<sub-menu> - Кнопка с выпадающим меню
<group> - Группа кнопок

Пример

<toolbar place="topLeft" generate="crud">
  <button>...</button>
  <sub-menu>...</sub-menu>
  <group>...</group>
</toolbar>

<group>

Группа кнопок.

Атрибуты

Наименование	Тип	Описание
generate	crud create update delete close submit	Генерация стандартных кнопок. Можно указать несколько значений через запятую

Тело
<button> - Кнопка
<sub-menu> - Кнопка с выпадающим меню

Пример

<group>
    <button>...</button>
    <sub-menu>
        <menu-item>...</menu-item>
    </sub-menu>
</group>

Встроенные действия

<actions>

Действия над виджетом.

note

Действия не видимы сами по себе, но на них можно ссылаться, например, из кнопок.

Тело
<action> - Список действий над виджетом

Пример

<actions>
  <action>...</action>
  <action>...</action>
  <action>...</action>
</actions>

<action>

Действие над виджетом.
(допускает использование нескольких обработчиков действий в теле)

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
id	Строка	Идентификатор действия		!

Тело
Обработчики действий

Пример

<action id="act1">
  <close/>
  <open-page page-id="test"/>
</action>

Пагинация

<pagination>

Пагинация виджета.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
src	Строка	React компонент пагинации	Pagination
prev	true false	Показать/скрыть кнопку быстрого перехода на предыдущую страницу	false
prev-label	Строка	Текст кнопки "Предыдущая страница"
prev-icon	Класс иконки	Иконка кнопки "Предыдущая страница"	fa fa-angle-left
next	true false	Показать/скрыть кнопку быстрого перехода на следующую страницу	false
next-label	Строка	Текст кнопки "Следующая страница"
next-icon	Класс иконки	Иконка кнопки "Следующая страница"	fa fa-angle-right
show-last	true false	Показать/скрыть кнопку с номером последней страницы.	true
show-count	always never by-request	Показать общее количество записей	always
place	topLeft topRight bottomLeft bottomRight topCenter bottomCenter	Место расположения пагинации	bottomLeft
class	CSS класс	Класс компонента пагинации
style	CSS свойство	Стиль компонента пагинации
routable	true false	Восстановление параметров пагинации по урл	false

Настройки

#Показать/скрыть кнопку быстрого перехода на предыдущую страницу
n2o.api.widget.list.paging.prev = false
#Показать/скрыть кнопку быстрого перехода на следующую страницу
n2o.api.widget.list.paging.next = false
#Показать/скрыть кнопку с номером последней страницы
n2o.api.widget.list.paging.show_last = true
#Показать общее количество записей
n2o.api.widget.list.paging.show_count = always
#Наименование кнопки "Предыдущая страница"
n2o.api.widget.list.paging.prev_label =
#Иконка кнопки "Предыдущая страница"
n2o.api.widget.list.paging.prev_icon = fa fa-angle-left
#Наименование кнопки "Следующая страница"
n2o.api.widget.list.paging.next_label =
#Иконка кнопки "Следующая страница"
n2o.api.widget.list.paging.next_icon = fa fa-angle-right
#CSS класс, который будет добавлен к виджету
n2o.api.widget.list.paging.className =
#Место расположения пагинации
n2o.api.widget.list.paging.place = bottomLeft

Пример

<pagination
  prev="true"
  next="true"
/>

Базовые свойства​

Простые виджеты​

<calendar>​

<resources>​

<resource>​

<action-on-select-slot>​

<action-on-select-event>​

<formats>​

<format>​

<chart>​

<form>​

<html>​

<content>​

<widget>​

Списковые виджеты​

<cards>​

<content>​

<col>​

<block>​

<list>​

<content>​

<rows>​

<table>​

<columns>​

<column>​

<dependencies>​

<visibility>​

<filter-column>​

<filter>​

<multi-column>​

<dnd-column>​

<rows>​

<overlay>​

<filters>​

<tiles>​

<content>​

<block>​

<tree>​

Зависимости виджета​

<dependencies>​

Встроенный источник данных​

<datasource>​

Меню управляющих кнопок​

<toolbar>​

<group>​

Встроенные действия​

<actions>​

<action>​

Пагинация​

<pagination>​

Базовые свойства

Простые виджеты

<calendar>

<resources>

<resource>

<action-on-select-slot>

<action-on-select-event>

<formats>

<format>

<chart>

<form>

<html>

<content>

<widget>

Списковые виджеты

<cards>

<content>

<col>

<block>

<list>

<content>

<rows>

<table>

<columns>

<column>

<dependencies>

<visibility>

<filter-column>

<filter>

<multi-column>

<dnd-column>

<rows>

<overlay>

<filters>

<tiles>

<content>

<block>

<tree>

Зависимости виджета

<dependencies>

Встроенный источник данных

<datasource>

Меню управляющих кнопок

<toolbar>

<group>

Встроенные действия

<actions>

<action>

Пагинация

<pagination>