Skip to main content

Виджеты

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

widget

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

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

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор виджета внутри страницыГенерируется по индексу wgt[idx]
ref-idСсылкаСсылка на родительский файл виджета
depends-onСсылка на виджетСсылка на master виджет
master-field-idСсылка на поле выборкиСсылка на поле выборки в master виджете. Используется вместе с depends-onid
detail-field-idСсылка на поле выборкиСсылка на поле выборки в текущем виджете. Используется вместе с depends-on
master-paramСтрокаПараметр фильтра
srcReact компонентРеализация виджетаДля каждого виджета своя реализация по умолчанию. Для <widget> атрибут обязательный.
routeСтрокаURL виджетаФормируется из идентификаторов страницы и виджета
uploadquery, defaults, copy, resolveИсточник данных виджетаЕсли задан query-id, то query. Если задан default-values-query-id, то defaults.
classСтрокаCSS класс, который будет добавлен к виджету
styleCSS свойствоСтиль виджета
nameСтрокаНаименование виджета
iconCSS классИконка виджета
query-idСсылка на выборкуВыборка виджета
object-idСсылка на объектОбъект виджетаОбъект выборки виджета
default-values-query-idСсылка на выборкуВыборка виджета, используемая для получения значений по умолчанию
sizeЧислоКоличество записей, которое отображает виджет10
fetch-on-inittrue falseНастройка получения данных виджета при инициализацииtrue, если у виджета есть выборка и он независимый
auto-focustrue falseАвтоматическая установка фокуса на виджетеtrue

<actions>#

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

note

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
generatecrud, submit, closeГенерация стандартных действий

Пример

<actions generate="crud">  <action>...</action>  <action>...</action>  <action>...</action></actions>
<action>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор действия
nameСтрокаНаименованиеВычисляется по операции объекта
iconCSS классИконка действияВычисляется, если id действия из списка стандартных действий.
defaulttrue falseДействие по умолчанию. Вызов по двойному клику или Enter.Вычисляется, если id действия из списка стандартных действий.
hotkeyСочетание клавишГорячая клавиша вызоваВычисляется, если id действия из списка стандартных действий. Например, для create горячая клавиша Insert.
visibletrue falseВидимость действияtrue
enabledtrue falseДоступность действияtrue

Тело

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

Пример

<action id="close">  <close/></action>

<toolbar>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
placetopLeft, topRight, bottomLeft, bottomRight, topCenter, bottomCenterМесто расположения менюtopLeft
generatecrud, tableSettings, refresh, resize, word-wrap, export, columns, filters, submit, closeГенерация стандартных кнопок

Пример

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

Кнопка.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор кнопкиВычисляется из action-id
labelСтрокаЗаголовок кнопкиВычисляется из action-id
widget-idСтрокаИдентификатор виджета над которым будет выполнена операцияТекущий виджет
modelresolve filter edit multi datasourceМодель, над которой выполнится действие. Если модель пустая, то кнопка будет заблокирована.resolve
iconCSS классИконка кнопкиВычисляется из action-id
colorСтрокаЦвет кнопки
visibletrue falseВидимость кнопкиВычисляется из action-id
enabledtrue falseДоступность кнопкиВычисляется из action-id
validatetrue falseВалидировать ли форму при нажатии на кнопкуДля каждого действия свои умолчания.
action-idСсылка на действие виджетаДействие виджета, которое будет вызвано при нажатии на кнопку
classCSS классCSS класс кнопки
styleCSS свойствоСтиль кнопки
enabling-conditionСтрокаУсловие доступности
visibility-conditionСтрокаУсловие видимости
descriptionСтрокаОписание при наведении на кнопку
tooltip-positionleft, right, top, bottomПозиция подсказкиbottom
confirmtrue falseПоказать предупреждение перед выполнением действияfalse
confirm-textСтрокаТекст предупреждения
confirm-typemodal popoverТип предупреждения перед выполнением действия: popover - поповер, modal - модальное окноmodal
confirm-titleСтрокаЗаголовок окна предупреждения
confirm-ok-labelСтрокаТекст кнопки подтверждения
confirm-cancel-labelСтрокаТекст кнопки отмены
typetext, icon, textAndIconКнопка с иконкой или безЕсли задан icon, то iconAndText, иначе text
srcСтрокаРеализация действия

Тело

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

Пример

<button action-id="create"/>
<button  label="Добавить в реестр"  icon="fa-plus"  type="textAndIcon">  <open-page page-id="register" action-id="create"/></button>
<sub-menu>#

Кнопка с выпадающим меню.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
labelСтрокаЗаголовок кнопкиВычисляется из действия кнопки
iconCSS классИконка
typetext, icon, textAndIconКнопка с иконкой или безЕслизадан icon, то iconAndText, иначе text
classCSS классСтиль кнопки

Пример

<sub-menu>  <menu-item>...</menu-item>  <menu-item>...</menu-item>  <menu-item>...</menu-item></sub-menu>
<menu-item>#

Пункт выпадающего меню.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор пункта менюВычисляется из action-id
labelСтрокаЗаголовок пункта менюВычисляется из action-id
widget-idСтрокаИдентификатор виджета над которым будет выполнена операцияТекущий виджет
modelresolve filter edit multi datasourceМодель, над которой выполнится действие. Если модель пустая, то пункт меню будет заблокирован.resolve
iconCSS классИконка пункта менюВычисляется из action-id
colorСтрокаЦвет пункта меню
visibletrue falseВидимость пункта менюВычисляется из action-id
enabledtrue falseДоступность пункта менюВычисляется из action-id
validatetrue falseВалидировать ли форму при нажатии на пункт менюДля каждого действия свои умолчания.
action-idСсылка на действие виджетаДействие виджета, которое будет вызвано при нажатии на пункт меню
classCSS классCSS класс пункта меню
styleCSS свойствоСтиль пункта меню
enabling-conditionСтрокаУсловие доступности
visibility-conditionСтрокаУсловие видимости
descriptionСтрокаОписание при наведении на пункт меню
tooltip-positionleft, right, top, bottomПозиция подсказкиleft
confirmtrue falseПоказать предупреждение перед выполнением действияfalse
confirm-textСтрокаТекст предупреждения
confirm-typemodal popoverТип предупреждения перед выполнением действия: popover - поповер, modal - модальное окноmodal
confirm-titleСтрокаЗаголовок окна предупреждения
confirm-ok-labelСтрокаТекст кнопки подтверждения
confirm-cancel-labelСтрокаТекст кнопки отмены

Пример

<sub-menu>  <menu-item action-id="create"/></sub-menu>
<sub-menu>  <menu-item label="Удалить запись" icon="fa-trash">    <invoke operation-id="delete"/>  </menu-item></sub-menu>
<group>#

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

Тело

Список кнопок или кнопок с выпадающим меню

Пример

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

<pre-filters>#

Предустановленные фильтры виджета.

Тело

Предустановленные фильтры

<table>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
selectionnone active radio checkboxВариант выбора строки таблицыactive
table-sizesm lgРазмер строк таблицы
widthСтрокаМаксимальная ширина таблицы
heightСтрокаМаксимальная высота таблицы
text-wraptrue falseПеренос текста в ячейкеtrue
checkboxestrue falseНаличие чекбоксов в первом столбце таблицыfalse
check-on-selecttrue falseСрабатывание (включение/выключение) чекбокса при клике по строкеtrue
childrencollapse, expandОтображение дочерних записей в свернутом или раскрытом видеcollapse

Пример

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

<columns>#

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

Пример

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

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор столбцаЭквивалентно text-field-id
srcReact компонентРеализация столбца таблицы
classСтрокаCss класс заголовка столбца таблицы
styleСтрокаСтиль заголовка столбца таблицы
text-field-idСсылка на поле выборкиПоле выборки, отображаемое в столбце в виде текста
tooltip-field-idСсылка на поле выборкиПоле выборки, отображаемое при наведении на ячейку
visibletrue / falseСтолбец видимый по умолчанию?true
widthЧислоШирина столбца (px)
resizabletrue falseМожно ли изменить ширину столбцаfalse
labelСтрокаНаименование заголовка столбцаИз наименования поля выборки text-field-id
iconCSS классИконка заголовка столбца
typetext icon textAndIconЗаголовок с иконкой или безЕсли задан icon, то iconAndText, иначе text
sorting-field-idСсылка на поле выборкиПоле, по которому сортируется столбецЭквивалентно text-field-id
sorting-directionasc, descНаправление сортировки по умолчанию
fixedleft rightПрилипание столбца к краю
hide-on-blurtrue falseСкрытие ячейки при наведении на строкуfalse

Пример

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

Тело

Ячейка

<filter-column>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор столбцаЭквивалентно text-field-id
text-field-idСсылка на поле выборкиПоле выборки, отображаемое в столбце
tooltip-field-idСсылка на поле выборкиПоле выборки, отображаемое при наведении на ячейку
visibletrue / falseСтолбец видимый по умолчанию?true
widthЧислоШирина столбца (px)
resizabletrue falseМожно ли изменить ширину столбцаfalse
labelСтрокаНаименование заголовка столбцаИз наименования поля выборки text-field-id
iconCSS классИконка заголовка столбца
typetext icon textAndIconЗаголовок с иконкой или безЕсли задан icon, то iconAndText, иначе text
sorting-field-idСсылка на поле выборкиПоле, по которому сортируется столбецЭквивалентно text-field-id
sorting-directionasc, descНаправление сортировки по умолчанию
fixedleft rightПрилипание столбца к краю

Пример

<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СтрокаНаименование заголовка столбца

Пример

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

Тело Разные виды столбцов

<rows>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
classСтрокаCSS класс строки
styleCSS свойствоСтиль строки

Тело

Переключатель, Клик по строке

Примеры

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

<pagination>#

Паджинация таблицы.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcReact компонентРеализация паджинацииPagination
layoutbordered flat separated bordered-rounded flat-rounded separated-roundedУстанавливает представление компонентаseparated
prevtrue falseПоказать/скрыть кнопку быстрого перехода на предыдущую страницуfalse
prev-labelСтрокаТекст кнопки "Предыдущая страница"
prev-iconCSS классИконка кнопки "Предыдущая страница"fa fa-angle-left
nexttrue falseПоказать/скрыть кнопку быстрого перехода на следующую страницуfalse
next-labelСтрокаТекст кнопки "Следующая страница"
next-iconCSS классИконка кнопки "Следующая страница"fa fa-angle-right
lasttrue falseПоказать/скрыть кнопку быстрого перехода на последнюю страницуfalse
last-labelСтрокаТекст кнопки "Последняя страница"
last-iconCSS классИконка кнопки "Последняя страница"fa fa-angle-double-right
firsttrue falseПоказать/скрыть кнопку быстрого перехода на первую страницуtrue
first-labelСтрокаТекст кнопки "Первая страница"
first-iconCSS классИконка кнопки "Первая страница"fa fa-angle-double-left
show-counttrue falseПоказать общее количество записейtrue
show-single-pagetrue falseПоказать пагинацию на единственной страницеfalse
max-pagesЧислоМаксимальное кол-во кнопок перехода между страницами5
placetopLeft topRight bottomLeft bottomRight topCenter bottomCenterМесто расположения пагинацииbottomLeft
classСтрокаCSS класс, который будет добавлен к пагинации
styleCSS свойствоСтиль пагинации

Пример

<pagination  layout="separated-rounded"  first="true"  last="true"  prev="true"  next="true"/>

<filters>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
placetop, leftПозиция фильтровtop
search-on-changetrue falseЗапускать фильтрацию по мере вводаfalse
default-values-query-idСтрокаИдентификатор запроса значений по умолчанию для фильтров

Тело

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

Пример

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

<form>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
default-values-query-idСсылка на выборкуВыборка значений по умолчанию. Её результат сливается со значениями по умолчанию, заданными в полях.
modeone-model two-modelsРежим работы формы. Возможные значения: one-model - одна модель редактируется и отправляется. two-models - 2х модельный режим (при первой загрузке данные копируются в модель resolve и edit. При редактировании формы меняется модель edit.)one-model
unsaved-data-prompttrue falseПоказать предупреждение о наличии несохраненных данных.false

Пример

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

Тело

Поля формы, меню управляющих кнопок виджета и/или действие обновления компонента

<fields>#

Поля формы.

Тело

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

Пример

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

<tree>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
parent-field-idСсылка на поле выборкиРодительский узел дерева
value-field-idСсылка на поле выборкиИдентификатор узла дерева
label-field-idСсылка на поле выборкиНаименование узла дерева
icon-field-idСсылка на поле выборкиИконка узла дерева
badge-field-idСсылка на поле выборкиЗначок узла дерева
badge-color-field-idСсылка на поле выборкиЦвет значка узла дерева
image-field-idСсылка на поле выборкиИзображение узла дерева
multi-selecttrue falseРежим множественного выбораtrue
checkboxestrue falseВыбор в режиме чекбоксfalse
ajaxtrue falseПоддержка загрузки через ajax запросfalse

Пример

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

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

<node>#

Узел сгруппированного дерева.

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
value-field-idСсылка на поле выборкиИдентификатор узла
label-field-idСсылка на поле выборкиНаименование узла
iconCSS классИконка узла
enabledtrue / falseДоступность узла для выбораtrue

Тело

Дочерний узел

Пример

<node  value-field-id="org.id"  label-field-id="org.name"  icon="fa-building">  <node>...</node><!--Дочерний узел--></node>

<list>#

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

Пример

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

<content>#

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

Элементы

НаименованиеТело
left-topЯчейка
left-bottomЯчейка
headerЯчейка
bodyЯчейка
sub-headerЯчейка
right-topЯчейка
right-bottomЯчейка
extraЯчейка

Пример

 <content>    <left-top id="leftTop">        <image class="list-image"/>    </left-top> </content>

<chart>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
widthЧислоШирина
heightЧислоВысота

Тело

Список графиков

Пример

<chart width="600" height="400">    <areas>...</areas></chart>

<html>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcСтрокаПуть к html файлу. Если не задан, необходимо задать содержимое в теле.

Пример

<html query-id="article" src="file.html"></html>

<content>#

Статическое содержимое HTML виджета

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
urlСтрокаURL адрес HTML страницы

<calendar>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
heightСтрокаВысота календаря
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СтрокаПоле выборки, отвечающее за блокирование события для выбора

Пример

<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 |Строка |Поле выборки, отвечающее за маппинг ресурсов |

Пример

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

Тело

Список ресурсов календаря

<resource>#

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

Атрибуты

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

Пример

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

<action-on-select-slot>#

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

Тело

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

<action-on-select-event>#

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

Тело

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

<formats>#

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

Пример

<formats> ...</formats>

Тело

Список форматов дат и времени.

<format>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
iddateFormat dayFormat weekdayFormat timeGutterFormat monthHeaderFormat dayRangeHeaderFormat dayHeaderFormat agendaHeaderFormat selectRangeFormat agendaDateFormat agendaTimeFormat agendaTimeRangeFormat eventTimeRangeFormat eventTimeRangeStartFormat eventTimeRangeEndFormatТип формата. Список всех возможных форматов (http://jquense.github.io/react-big-calendar/examples/index.html#prop-formats)
valueСтрокаЗначение формата

Пример

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

<tiles>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор виджета
cols-sm1, 2Количество колонок в мобильной версии1
cols-md1, 2, 3, 4, 6Количество колонок в планшетах2
cols-lg1, 2, 3, 4, 6, 12Количество колонок в десктопной версии3
heightЧислоМинимальная высота плитки.
widthЧислоШирина плитки

Пример

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

<content>#

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

Пример

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

Тело

Список блоков.

<block>#

Блок.

Атрибуты

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

Пример

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

Тело

Ячейка

<cards>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор виджета
vertical-aligncenter top bottomВыравнивание по вертикали содержимого колонокtop
heightСтрокаВысота карточек

Пример

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

<col>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
sizeчислоШирина колонки по бутстрапу

Пример

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

Тело

Список блоков.

<block>#

Блок.

Атрибуты

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

Пример

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

Тело

Ячейка

<widget>#

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

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcReact компонентРеализация виджета

Тело

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

Пример

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