Skip to main content

Виджеты

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

widget

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

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

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор виджета внутри страницыГенерируется по индексу wgt[idx]
ref-idСсылкаСсылка на родительский файл виджета
srcСтрокаReact компонент виджетаДля каждого виджета своя реализация по умолчанию. Для <widget> атрибут обязательный.
classCSS классКласс компонента виджета
styleCSS свойствоСтиль компонента виджета
datasourceСсылка на источник данныхИдентификатор источника данных для виджета
fetch-on-inittrue falseПолучение данных при инициализации
fetch-on-visibilitytrue falseПолучение данных при появлении по условию видимости
visibletrue falseВидимость виджета
auto-focustrue falseАвтоматическая установка фокуса на виджетеfalse

Настройки

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

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

<calendar>

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчаниюОбязательность
heightСтрокаВысота календаря. Доступные единицы измерения: px, em, rem. При указании числа оно будет приведено к px
default-dateСтрокаСтартовая дата календаря (по умолчанию текущая)
default-viewday week workWeek month agendaВид отображения календаря по умолчаниюmonth
viewsСтрокаСписок используемых видов отображения в календаре (через запятую)!
min-timeСтрокаМинимальное отображаемое время
max-timeСтрокаМаксимальное отображаемое время
mark-days-offtrue falseПодсветка выходных днейtrue
selectabletrue 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>

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

Атрибуты

НаименованиеТипОписаниеОбязательность
iddateFormat 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>

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
modeone-model two-modelsРежим работы формы. Возможные значения: one-model - одна модель редактируется и отправляется. two-models - 2х модельный режим (при первой загрузке данные копируются в модель resolve и edit. При редактировании формы меняется модель edit.)one-model
unsaved-data-prompttrue 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>

<widget>

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

Атрибуты

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

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

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

Пример

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

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

<cards>

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор виджета
vertical-aligncenter 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СтрокаПоле выборки, отображаемое при наведении на ячейку

Тело
Ячейка.

<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>

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
selectionnone active radio checkboxВариант выбора строки таблицыactive
widthСтрокаМаксимальная ширина таблицы. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px
heightСтрокаМаксимальная высота таблицы. Доступные единицы измерения: px, em, rem. При указании числа оно будет приведено к px
text-wraptrue falseПеренос текста в ячейкеtrue
auto-selecttrue falseАвтоматическое выделение первой строки таблицыtrue
childrencollapse expandОтображение дочерних записей в свернутом или раскрытом видеcollapse
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

Тело
<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> - Многоуровневый столбец таблицы

Пример

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

<column>

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор столбцаЗначение text-field-id
srcСтрокаReact компонент столбца таблицы
classCSS классКласс компонента заголовка столбца таблицы
styleCSS свойствоСтиль компонента заголовка столбца таблицы
text-field-idСсылка на поле выборкиПоле выборки, отображаемое в столбце в виде текста
tooltip-field-idСсылка на поле выборкиПоле выборки, отображаемое при наведении на ячейку
visibletrue falseСтолбец видимый по умолчанию?true
widthСтрокаШирина столбца. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px
resizabletrue falseМожно ли изменить ширину столбцаfalse
labelСтрокаНаименование заголовка столбцаЗначение поля выборки text-field-id, иначе значение id
iconКласс иконкиИконка заголовка столбца
sorting-field-idСсылка на поле выборкиПоле, по которому сортируется столбецЗначение text-field-id
sorting-directionasc descНаправление сортировки по умолчанию
fixedleft rightПрилипание столбца к краю
alignmentleft right centerВыравнивание заголовка столбца таблицыleft
content-alignmentleft 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СтрокаПоля, от которых зависит условие видимостиВычисляется по условию
resettrue 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Ссылка на поле выборкиПоле выборки, отображаемое при наведении на ячейку
visibletrue falseСтолбец видимый по умолчанию?true
widthСтрокаШирина столбца. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px
resizabletrue falseМожно ли изменить ширину столбцаfalse
labelСтрокаНаименование заголовка столбцаЗначение поля выборки text-field-id, иначе значение id
iconКласс иконкиИконка заголовка столбца
sorting-field-idСсылка на поле выборкиПоле, по которому сортируется столбецЗначение text-field-id
sorting-directionasc descНаправление сортировки по умолчанию
fixedleft rightПрилипание столбца к краю
srcСтрокаReact компонент столбца таблицы
classCSS классКласс компонента заголовка столбца таблицы
styleCSS свойствоСтиль компонента заголовка столбца таблицы
alignmentleft right centerВыравнивание заголовка столбца таблицыleft
content-alignmentleft 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 компонент столбца таблицы
classCSS классКласс компонента заголовка столбца таблицы
styleCSS свойствоСтиль компонента заголовка столбца таблицы
alignmentleft right centerВыравнивание заголовка столбца таблицыcenter
content-alignmentleft right centerВыравнивание контента в ячейках вложенных столбцов (значение content-alignment, указанное во вложенном столбце в приоритете)
widthСтрокаШирина столбца. Доступные единицы измерения: px, em, rem, %. При указании числа оно будет приведено к px

Настройки

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

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

Пример

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

<rows>

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

Атрибуты

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

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

Примеры

<rows class="{type==1?'text-muted':''}"/>
<rows>
<switch value-field-id="type">
...
</switch>
<click>
...
</click>
<overlay>
...
</overlay>
</rows>
<overlay>

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

Атрибуты

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

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

Пример

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

<filters>

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

Атрибуты

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

Настройки

# Запускать фильтрацию по мере ввода
n2o.api.widget.table.fetch_on_change = false
# Запускать фильтрацию при сбросе
n2o.api.widget.table.fetch_on_clear = true

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

Пример

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

<tiles>

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор виджета
cols-sm1, 2Количество колонок в мобильной версии1
cols-md1, 2, 3, 4, 6Количество колонок в планшетах2
cols-lg1, 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СтрокаПоле выборки, отображаемое при наведении на ячейку
classCSS классКласс компонента блока
styleCSS свойствоСтиль компонента блока

Тело
Ячейка.

Пример

<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-positionleft rightПозиция значкаright
badge-shaperounded circle squareФорма значкаsquare
badge-image-field-idСсылка на поле выборкиКартинка в значке
badge-image-positionleft rightПозиция картинки в значкеleft
badge-image-shaperounded circle squareФорма картинки в значкеcircle
image-field-idСсылка на поле выборкиИзображение узла дерева
multi-selecttrue falseРежим множественного выбораtrue
checkboxestrue falseВыбор в режиме чекбоксfalse
ajaxtrue 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 виджета.

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

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

<toolbar>

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

Атрибуты

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

Для виджета Таблица атрибут generate может иметь дополнительные значения: tableSettings, refresh, columns, filters, resize, export, word-wrap.

Настройки

# Место расположения меню
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>

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

Атрибуты

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

Для виджета Таблица атрибут generate может иметь дополнительные значения: tableSettings, refresh, columns, filters, resize, export, word-wrap.

Тело
<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
prevtrue falseПоказать/скрыть кнопку быстрого перехода на предыдущую страницуfalse
prev-labelСтрокаТекст кнопки "Предыдущая страница"
prev-iconКласс иконкиИконка кнопки "Предыдущая страница"fa fa-angle-left
nexttrue falseПоказать/скрыть кнопку быстрого перехода на следующую страницуfalse
next-labelСтрокаТекст кнопки "Следующая страница"
next-iconКласс иконкиИконка кнопки "Следующая страница"fa fa-angle-right
show-lasttrue falseПоказать/скрыть кнопку с номером последней страницы.true
show-countalways never by-requestПоказать общее количество записейalways
placetopLeft topRight bottomLeft bottomRight topCenter bottomCenterМесто расположения пагинацииbottomLeft
classCSS классКласс компонента пагинации
styleCSS свойствоСтиль компонента пагинации

Настройки

#Показать/скрыть кнопку быстрого перехода на предыдущую страницу
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"
/>